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.
When to Use Components
Components are ideal whenever you need to reuse a group of controls, layouts, or sections across different forms, dashboards, or public forms. They help you maintain consistency, save time, and reduce configuration errors. Here are some practical scenarios where Components can add value:
Approval sections: For workflow forms like leave requests or purchase orders, use components for approval logs and comments so the layout stays consistent and updates are easier.
Standard headers and footers: For public forms such as supplier registration or customer surveys, create components with logos, branding, and disclaimers to ensure a uniform look.
Data entry sections: In forms like product catalogs, order forms, or asset records, group common fields into components to avoid repetitive setup.
Dynamic sub-lists: For forms with order items, invoice lines, or other sub-lists, define the structure as a component to save time.
Dashboard widgets: Package KPI tiles, charts, or summary panels as components to apply the same style across dashboards.
Common layout blocks: Save frequently used layout patterns, like a 2-column text-image block, as components for quick reuse.
💡 Tip: If you’re copying similar sections between forms or pages, it’s time to create a component!
Accessing the Component Library
To use components in your form design, open the Components tab in the form designer panel. The panel includes several key sections:
Component Library: Contains system-provided templates such as Approval logs (Print page), Hero heading center, Image Grid Showcase, Media Hero Section, and more. These templates can be dragged directly into your form or page.
Global Components: Lists components that have been created and made available across all applications by system administrators.
Application Components: Displays components created within the current application.
Import custom component (.ycc): Allows you to import custom components packaged in a
.yccfile. Click this link to upload and add a new component to your library.
You can also use the Search component bar at the top to quickly find a component by name.
Using Component Library
Yeeflow provides a rich Component Library with pre-configured templates that you can quickly apply to your forms or pages. This helps you build professional layouts faster and ensures consistency.
How to use the Component Library:
Open the Components tab in the form designer.
In the Component Library section, browse the available templates (e.g., Approval logs (Print page), Hero heading center, Image Grid Showcase, Media Hero Section, Three-Panel Layout, Submission Confirmation, etc.).
You can use the Search component box at the top to quickly locate a specific template.
Drag and drop the desired component onto your form or page.
Once added, you can customize the component’s content and style as needed.
Tip: The component library is great for standard sections like headers, banners, confirmation messages, and common layout patterns.
Creating Custom Components
You can create custom components by grouping controls, containers, or entire sections on your form. This helps you reuse them across multiple forms or pages without rebuilding.
How to create a component:
1️⃣ Select a control, container, or controls you want to save as a component.
2️⃣ Right-click and select Create component from the menu.
3️⃣ In the Create component dialog:
Enter a Name for the component (required).
Optionally provide a Description to describe the purpose of the component.
Save it as:
Application Component: This is the default option for most users. The component will only be available within the current application.
Global Component: Only available to system administrators. Global components can be used across all applications in the tenant.
4️⃣ Click Create. (The new component will appear under Application components in the Components panel.)
Note: Each level (global or application) supports up to 50 components.
Managing Global and Application Components
Once a component is created (either as a global component or an application component), you can manage it through the Components panel. Each component provides several management options accessible via the ⋯ (More options) button.
Available actions:
✅ Edit settings
You can update the component's name and description. After clicking Edit settings, modify the fields as needed in the dialog, then click Create (this saves your changes).
✅ Import to replace
Use this option to update (replace) the current component with a new one from a .ycc file. Simply drag and drop the file or choose a file from your computer. This is useful for version control or updating components across applications.
✅ Export component
You can export a component as a .ycc file. This allows you to back up, share, or reuse components in other environments.
✅ Delete
Remove the component from the library. Be cautious — deleting a component means it will no longer be available for reuse (though it does not affect forms where it has already been used).
Note: Only system administrators can manage global components (edit, delete, or replace). Application components can be managed by users with application-level permissions.
💡 Tip: Use export and import to share standard components within the current application and across different applications.
Importing Custom Components
Yeeflow supports importing custom components that have been exported as .ycc files. This allows you to reuse components from other applications or tenants, or restore component backups.
How to import a custom component
1️⃣ In the Components tab, scroll to the bottom and click Import custom component (.ycc).
2️⃣ In the Import dialog, drag and drop your .ycc file into the upload area, or click choose a file to select a file from your computer.
3️⃣ Click Next step to complete the import. The system will validate the file and add the new component to your Application components list.
Note:
Only
.yccfiles are supported.Imported components will appear under Application components and can be used immediately.
To update an existing component, use Import to replace from the component’s options menu.
💡 Tip: Importing is useful for sharing standard components within the current application, across different applications, or even across environments. It also helps you quickly set up forms with pre-designed sections.