Screen configuration in FlowX.AI
FlowX.AI UI Designer allows you to create rich, interactive user interfaces for your process flows. The UI Designer is available for User Task nodes and Navigation Areas elements, providing contextual interface design capabilities.Accessing the UI designer
To access the UI Designer and start configuring screens:1
Open FlowX.AI Designer
Navigate to FlowX.AI Designer and select Definitions from the Processes tab.
2
Select Process
Choose a process from the process definitions list.
3
Edit Process
Click the Edit process button to enter editing mode.
4
Access UI Designer
Select a User Task node or a Navigation Area then click the brush icon to open the UI Designer.
The UI Designer is available for User Task nodes and Navigation Areas elements.
Platform-specific configuration
FlowX.AI provides platform-specific configuration and styling for components across Web, iOS, and Android platforms.Generic vs platform-specific settings
Cross-Platform Properties: Configure properties available cross-platform (Web, Android and iOS), available for all platforms.These settings serve as the base configuration that applies to all platforms unless specifically overridden.
Configuring platform overrides
To override a general property for a specific platform:1
Access UI Designer
Open the UI Designer and select a UI Element, such as a Card.
2
Access Platform-Specific Settings
From the UI Designer navigation panel, select the Settings tab, then select the desired platform (Web, iOS, or Android).
3
Perform Override
Click the ”+” button (next to “Overrides”) and select Properties -> select the property you want to override (e.g., Title), then input your desired value.
4
Preview Changes
Preview your changes in the UI Designer by navigating from one platform to another or by comparing them.
Settings overrides can always be imported/pushed from one platform to another for consistency across platforms.
Keep in mind that the preview generated in the UI Designer for iOS and Android platforms is an estimate meant to help you visualize how it might look on a mobile view.
Navigation areas configuration
Navigation areas play a pivotal role in user interface design. They enhance the user experience by providing a structured, organized, and efficient way for users to interact with and explore various features and solutions.Navigation types (web only)
Single Page Form (Default)
Single Page Form (Default)
Behavior: The Web Renderer will display all User Tasks within the same page (in parallel).Best Practices:
- Use Cards to guide users through the content
- Apply Accordions to cards to collapse each card after validation
- Maintain a clean UI while displaying multiple user tasks
Wizard Navigation
Wizard Navigation
Navigation types are available starting with v4.1.0 platform release and are only available for Web platform configurations.
Platform hierarchy
In the navigation panel, the navigation hierarchy is displayed beneath platform tabs:- Web Platform: Full navigation features including zones with headers and footers
- Mobile Platforms (iOS & Android): Limited navigation features
Zones with headers and footers are exclusively accessible in web configurations. They are not supported as navigation areas for mobile development.
Layout configuration
Layout settings are available for all components that can group other types of elements (for example, Containers or Cards).Linear layout properties
Display Mode
Display Mode
Linear: Selected by default for arranging child elements in a linear fashion.
Direction
Direction
- Horizontal: Aligns child elements horizontally in a row
- Vertical: Aligns child elements vertically in a column
Justify
Justify
Controls the alignment of child elements along the main axis (the direction set by Horizontal or Vertical):
- Start: Aligns elements at the start of the container
- Center: Centers elements along the main axis
- End: Aligns elements at the end of the container
- Space Between: Distributes elements evenly with space between them
- Space Around: Distributes elements with space around them
- Space Evenly: Distributes elements with equal space around them
Align
Align
Controls the alignment of child elements along the cross axis (perpendicular to the main axis):
- Start: Aligns elements at the start of the cross axis
- Center: Centers elements along the cross axis
- End: Aligns elements at the end of the cross axis
- Stretch: Stretches elements to fill the container along the cross axis
Wrap
Wrap
- Yes: Allows elements to wrap onto multiple lines when they exceed the container’s width
- No: Forces all elements to remain on a single line, potentially causing overflow
Gap
Gap
Sets the spacing between child elements, measured in pixels.
Hide and disable expressions
Configure dynamic visibility and interaction using JavaScript expressions:Available expression types
Purpose: A JavaScript expression that hides the UI element when it evaluates to a truthy value.Usage: Control element visibility based on process data or user interactions.Example: Hide a field based on user role or form state.
Expression configuration
Configure expressions for dynamic behavior:- Select the UI component in the UI Designer
- Navigate to Settings → your desired platform → Overrides (+) → Expressions
- Configure Hide or Disabled conditions
- Add your JavaScript expression
Best practices for screen configuration
Based on existing FlowX.AI documentation:Navigation Design
Navigation Design
Platform Considerations
Platform Considerations
Multi-Platform Design:
- Start with generic settings as your base configuration
- Use platform-specific overrides strategically (e.g., shorter titles on mobile)
- Test previews across all target platforms
- Remember that iOS/Android previews are estimates
Layout and Styling
Layout and Styling
Effective Layout:
- Choose appropriate layout direction for your content flow
- Use gap settings to create proper spacing hierarchy
- Consider responsive wrapping for dynamic content
- Test layouts with realistic content lengths
Configuration examples
Mobile configuration example
For mobile platforms (iOS & Android), you can configure specific properties: Card Component Example:- Screen Title: Set the screen title used in the navigation bar on mobile devices (available only when the card element is set as the root)
- Scrollable Property (iOS): Define whether the screen should be scrollable (default: true)
Platform override example
Override a card title for different platforms:Title: “Complete Application Process”