Uiflow
ChangelogPartners | Freshworks
Ask or search…
⌃K
Links

Components tab

The Components tab enables you to create and configure reusable components, which are customizable components for use throughout your application. These are useful in development when you need to apply the same unique functionality, multiple times. Instead of rebuilding a complex component configuration each time you need it, the Components tab enables you to configure a component once, so you can implement it throughout your application.
Note: Reusable components may contain logic, but they appear as Design components.
This page outlines how to:
The following video shows how to work with reusable components:

Create a reusable component

To create a reusable component, complete the following steps:
Note: Reusable components do not currently support global variables. Global variables applied to reusable components can not update dynamically, and will maintain the variable’s explicitly configured value throughout the app’s lifecycle.

Add a reusable component

When you first select the Components tab, it opens a new component for you to modify by default. However, after you create your first reusable component, the tab opens to an existing reusable component.
This section describes how to add an additional reusable component to your application:
  1. 1.
    Select the Components tab.
  2. 2.
    Enter the Design view and open the component drop-down menu.
  3. 3.
    Click the + icon to add a new reusable component, and enter a name for the component.
  4. 4.
    (Optional) To rename a reusable component:
    1. 1.
      Open the component drop-down menu and click the gear icon.
    2. 2.
      Enter a new name for the component, and click Save.

Design the component

The Components tab incorporates a Design view, where you can add and style reusable components. This determines how reusable components appear in your application UI.
To design a reusable component:
  1. 1.
    Enter the Design view, and open the Libraries panel.
  2. 2.
    Drag-and-drop the component or pattern you want to modify into your application.
    Note: In the Components tab, patterns act as templates for reusable components, so you don't need to build them from scratch.
  3. 3.
    Use the Inspector panel to modify the component's style and state properties as desired.

Build component logic

To configure a reusable component's functionality, build action flows in the Components tab Actions view. Action flows are logic flows for reusable components, which determine each component's functionality. Each action flow appears as an action node on its reusable component.
To build logic for a reusable component:
  1. 1.
    Open the Actions view.
    Note: Before you configure your first action flow, the Actions view opens to a new action flow. After you create an action flow, the Actions view opens to an existing one.
  2. 2.
    (Optional) Rename the action flow:
    Note: As you develop your component, various action flows can make your component logic difficult to navigate. Providing each action flow with a descriptive name helps organize and maintain the component logic.
    1. 1.
      Open the Explorer panel.
    2. 2.
      Double-click the action flow and enter the name of the action you want to develop (e.g. If you want an action that initiates an onClick event, rename the action to onClick).
      Note: An action flow's name determines the corresponding action node's label on the reusable component.
  3. 3.
    Open the Libraries panel, and drag-and-drop your desired components and design references into the action flow.
  4. 4.
    Wire the nodes to build the desired functionality. Any nodes you drag-and-drop outside the action flow boundary appear on the reusable component as nodes.
    Note: The node type that appears on the component matches the node type that you drag-and-dropped outside the action flow boundary. For example, if you drag-and-drop a data node outside the action flow boundary, it appears on the reusable component as a data node.
  5. 5.
    Click Publish Component to save the reusable component.
When you publish a reusable component, it appears in the Design view Libraries panel, under Reusable Components.

Use a reusable component in your app

To integrate a reusable component into your app:
  1. 1.
    Select the Pages tab and open the Design view.
  2. 2.
    Open the Libraries panel and locate your reusable component.
  3. 3.
    Drag-and-drop the component into your application.
  4. 4.
    Open the Logic view and navigate to the Design References section.
  5. 5.
    Drag-and-drop the reusable component into the logic canvas, and wire it to your flow as desired.

Edit a reusable component

To edit a reusable component:
  1. 1.
    Select the Components tab.
  2. 2.
    Open the component drop-down menu, and select the component you want to edit.
  3. 3.
    In the Design and Actions views, edit the component as needed.
  4. 4.
    Click Publish Component to save your changes.

Delete a reusable component

There are two methods to delete reusable components:

Delete a component from the Pages tab

To delete a reusable component from the Pages tab:
  1. 1.
    Select the Pages tab and navigate to the Design view Libraries panel.
  2. 2.
    In the Reusable Components section, locate the component you want to delete.
  3. 3.
    Right-click the component and select Remove Reusable.
  4. 4.
    In the pop-up window, click Remove to confirm the deletion.

Delete a component from the Components tab

To delete a reusable component from the Components tab:
  1. 1.
    Select the Components tab in the header bar, and open the component drop-down menu.
  2. 2.
    Locate and right-click the component you want to delete.
  3. 3.
    Click Delete.
  4. 4.
    In the pop-up window, click Remove to confirm the deletion.
Previous
Preview panel
Next - Uiflow Studio overview
Variables tab
Last modified 1mo ago