Configure your Design components
Components are the basic building blocks of a Uiflow application. They comprise everything from your basic application design to the logic underlying your UI's interactivity.
This page provides an overview of the following topics:
For more details on how to configure components, see the following pages:
There are three main types of components:
- Design components: Blue components that typically map to HTML elements (e.g., Text, Button, Checkbox).
- Logic components: Gray components that contain functions and operations that define your application logic (e.g., For Each, Add, Sequence).
- Data components: Green components that store or retrieve data for your application (e.g., Object, REST API, Variable).
You can use the following to add components to your application:
The Libraries panel contains all available components in the Design and Logic views. However, only certain types of components are available in each screen:
- Design view: Contains Design components.
- Logic view: Contains Logic and Stateful components.
Note: The Logic view Libraries panel includes a Design References section that contains scripts for each component in your application UI. To add interactivity to your app, drag-and-drop these scripts into your application and integrate them into your logic.
To add a component to your application from the Libraries panel:
- 1.Select the Pages tab then Design or Logic to enter the corresponding workspace view.
- 2.Click the plus icon at the left of the screen to open the Libraries panel.
- 3.If you are in the Design view, select the Components tab to view available components.
- 4.Locate the component you want to add via the search bar or component categories.
- 5.Drag-and-drop the component into the application.
The Component Info screen includes descriptions and breakdowns of each component in Uiflow. You can use this screen to add components to your application.
To add a component to your application using the Component Info screen:
- 1.Click Design or Logic at the top left of the screen to enter the Design or Logic view.
- 2.Press
CMD + K(Mac) orCTRL + K(Windows) to open the Component Info screen.Note: In the Design view, you can open the Component Info screen by right-clicking a component and selecting View Component Info.
- 3.Locate the component you want to add via the search bar or component categories.
- 4.Click Insert Component to add the component to your application.
Last modified 2mo ago