Yeeflow's Component feature allows users to efficiently design forms by reusing layouts and functionalities across pages and applications. This guide explains how to access, create, and manage components in approval forms or other custom forms.
What Are Components?
Components are reusable sets of controls or layouts that can be added to a form. They help streamline the design process, ensure consistency, and reduce repetitive work.
There are two categories of components in Yeeflow:
Global Components: Available across all applications in your environment. Only system administrators can manage these.
Application Components: Available only within the current application. Designers with appropriate permissions can create and use these.
Accessing the Components Library
To access components while designing a form:
Open the Form Designer.
Click on the “Components” tab located next to Controls and Page at the top of the design panel.
The Component panel will open, showing:
Component library: Pre-built templates provided by the system.
Global components: User-created components shared across applications.
Application components: Custom components specific to the current app.
A search box to find components by name.
Types of Components
Yeeflow components are organized into five functional types, each tailored to different use cases in your application design process. These types determine where and how a component can be reused. Each type supports up to 50 custom components at both the global and application levels.
1. Approval Form Components (Workflow Forms)
These components are designed for process-driven forms, such as approvals, task submissions, or multi-step workflows. They help streamline repeated structures within workflow-based form pages.
Usage Scenario: Leave approval forms, expense claims, purchase requests
Example Components: Approval log panels, approver comment sections, submit button blocks
Supports: Fields, containers, and layout blocks used during workflow execution
2. List Form Components (List-Based Forms)
Used within standard list forms for data input and management. These forms are not connected to a workflow but serve for creating or editing records in a structured data list.
Usage Scenario: Customer database, equipment list, internal tracking tools
Example Components: Contact info sections, item details panel, editable row sections
Supports: Static and interactive input areas used across various lists
3. Dashboard Components
Dashboard components enhance application landing pages or analytics dashboards with reusable layouts or visual blocks.
Usage Scenario: Executive dashboards, employee homepages, KPI summaries
Example Components: Welcome banners, quick action tiles, announcement blocks
Supports: Panels with charts, text, buttons, or dynamic summary content
4. List Workflow Components
These are specialized components used when a list record needs to trigger or participate in a workflow, combining data collection and process automation in a unified interface.
Usage Scenario: Service ticket submission, equipment request initiation, incident reporting
Example Components: Status indicators, workflow history logs, action triggers
Supports: Controls that display or manage workflow status from within a list form
5. Public Form Components (Public Forms)
Designed for forms that are shared outside the organization, these components are optimized for public submission, such as forms embedded in websites or shared via external links.
Usage Scenario: Job applications, event registrations, customer feedback
Example Components: User information panels, public submission sections, consent checkboxes
Supports: Mobile-friendly, standalone form blocks that do not require user authentication
Each component type helps you save time, ensure consistency, and enhance maintainability across your Yeeflow environment. For best results, organize your components by function and clearly name them for easy identification during reuse.
Using System-Provided Templates
Yeeflow provides a collection of built-in components for immediate use:
Simply drag and drop any component (e.g., Approval Logs, Submission Confirmation, Horizontal Navigation Bar) from the Component Library into your form.
These templates are customizable and can be modified after placement.
Creating a Custom Component
To create a new component from your form:
Select one or more controls or containers in the form.
Right-click and choose “Save as Component”.
Give your component a name and select whether to save it as an Application component or (if you are a system admin) a Global component.
💡 A component can include a single control or an entire layout section, including nested controls.
Importing Custom Components
You can import custom components created in other environments or exported previously:
Go to the Application Components section.
Click “Import custom component (.ycc)”.
Select your
.yccfile and upload it.The imported component will appear in your list of application components.
Managing Components
Edit a component: Drag it into your form, make edits, and choose to re-save it as a new component if needed.
Convert Application Component to Global: System admins can promote an application-level component to a global one.
Delete unused components: Only designers with the correct permissions can delete components. Navigate to the component list and click the delete icon.
Permissions & Roles
System Administrators can manage all global and application components.
App Designers can create and manage application components within their assigned apps.
Viewers or Form Submitters cannot interact with the component panel.
Best Practices
Group related controls into a container before creating a component for better reusability.
Use clear naming conventions (e.g.,
LeaveForm_Header,HR_ApprovalSection) to keep your component list organized.Regularly review and clean up unused components to keep your app lightweight.