The FLOWX.AI platform offers a series of ready-to-use UI components that can be used to create rich web interfaces. These include common form elements like input, select, checkbox, radio, or switch, as well as other UI elements like image, text, anchor links, etc. Each of these components' properties can be configured further using the details tab available when clicking on a specific component. Design flexibility is possible by adding styles or CSS classes to each of the pre-defined components.
UI templates are built in a tree-like structure, with a root component at the top.
The FLOWX.AI Designer includes an intuitive UI Designer (drag-and-drop editor) for creating diverse UI templates. You can use various elements from basic buttons, indicators, and forms, but also predefined collections or prototypes.
Accessing the UI Designer
To access the UI Designer, follow the next steps:
- Open FLOWX Designer and from the Processes tab select Definitions.
- Select a process from the process definitions list.
- Click the Edit process button.
- Select a node from the Process Designer then click the brush icon to open the UI Designer.
Using the UI Designer
After adding a specific component to the node, the right-side menu will display more configuration options.
Depending on the component type different properties are available for configuration.
For example, for a form group element (as in the example above), the following properties can be configured:
- General - where you define the Key and Message
- Key - used to bind form element to process model
- Message - ❗available for Root components; describes the data pushed to the frontend application when the process reaches this user task; should be a valid JSON
- Flowx props - depending on the component type, custom properties will be available here
- Class - add CSS classes to each of the pre-defined components
- Layout - available for components that group children, more details about layouts can be found here. The following properties can be edited:
- Spacing - margin, and padding can be adjusted using spacing
- Sizing - use sizing to edit width, height, min W/H, max W/H or overflow
- Typography - use to manipulate fonts, font color, text indentation etc.
- Backgrounds - set the color of a background
- Borders - set the radius, borders style, width or color
This panel is used for displaying component hierarchy. Clicking on a specific component in the component tree will highlight the selection in the editor.
For more information about Component types, check the next section:»Component types