UI Designer

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:

1. Open FLOWX Designer and from the Processes tab select Definitions.
2. Select a process from the process definitions list.
3. Click the Edit process button.
4. Select a node and then from the Process Designer navigation menu click the brush icon to open the UI Designer.

caution

The UI designer is available for User task nodes and Milestone nodes (nodes that require human interaction).

Using the UI Designer

After adding a specific component to the node, the right-side menu will display more configuration options.

caution

Depending on the component type different properties are available for configuration.

For example, for a card element (as in the example above), the following properties can be configured:

Settings

1. General - where you define the Key and Message
   • 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
2. Flowx props - depending on the component type, custom properties will be available here
3. Has Accordion? (available only for Card component) - the Bootstrap accordion is a component that organizes content within collapsible items. Accordion allows the display of only one collapsed item at a time.

Styling

1. Class - add CSS classes to each of the pre-defined components
2. Layout - available for components that group children, more details about layouts can be found here. The following properties can be edited:
   • Direction
   • Alignment
   • Gap
3. Spacing - margin, and padding can be adjusted using spacing
4. Sizing - use sizing to edit width, height, min W/H, max W/H or overflow
5. Typography - use to manipulate fonts, font color, text indentation etc.
6. Backgrounds - set the color of a background
7. Borders - set the radius, borders style, width or color

Tree view

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