Skip to main content
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.

​
Platform-specific configuration

FlowX.AI provides platform-specific configuration and styling for components across Web, iOS, and Android platforms.

​
Generic vs platform-specific settings

  • Generic Settings
  • Platform-Specific Overrides
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 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.
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
Child Areas: Rendered on the same page
Behavior: The Web Renderer will display one user task at a time, allowing navigation using custom Next and Back buttons.Usage: Ideal for step-by-step or wizard-style navigation within a page when a page contains more than one User Task.Child Areas: Presented sequentially
It’s crucial to configure actions properly to ensure smooth user navigation in wizard mode.
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

Linear: Selected by default for arranging child elements in a linear fashion.
  • Horizontal: Aligns child elements horizontally in a row
  • Vertical: Aligns child elements vertically in a column
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
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
  • 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
Sets the spacing between child elements, measured in pixels.

​
Hide and disable expressions

Configure dynamic visibility and interaction using JavaScript expressions:

​
Available expression types

  • Hide Condition
  • Disabled Condition
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:
  1. Select the UI component in the UI Designer
  2. Navigate to Settings → your desired platform → Overrides (+) → Expressions
  3. Configure Hide or Disabled conditions
  4. Add your JavaScript expression

​
Best practices for screen configuration

Follow these design principles to create efficient, user-friendly interfaces that perform well across all platforms.

​
Core design principles

Keep user tasks focused:
  • Design each user task with one clear purpose to avoid cognitive overload
  • Limit the number of UI components per screen to prevent overcrowding
  • Break complex processes into multiple, focused user tasks
  • Use progressive disclosure to reveal information when needed
Overcrowded screens with too many UI components can lead to poor user experience and potential performance issues during process execution.
Optimize container usage:
  • Avoid unnecessary nesting of containers whenever possible
  • Don’t nest containers solely for sizing or layout purposes
  • Prefer grid layout over nested containers for complex arrangements
  • Use linear layout and alignments for simpler positioning needs
Grid layout is your primary tool for creating complex layouts efficiently. It reduces nesting while providing powerful positioning capabilities.
Use hide expressions wisely:
  • Minimize the use of hide expressions to maintain performance
  • Consider using conditional styling instead of hiding elements when possible
  • Group related conditional elements to reduce expression complexity
  • Document complex conditional logic for maintainability
Overusing hide expressions can negatively impact performance and make interfaces harder to maintain.

​
Implementation recommendations

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
Effective Layout Strategy:
  • Prioritize grid layout for complex arrangements
  • Use linear layout for simple sequential content
  • Apply proper alignment settings instead of wrapper containers
  • 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
Maintain optimal performance:
  • Limit UI component density per screen
  • Reduce container nesting depth
  • Minimize complex hide expressions
  • Use efficient layout methods (grid over nested containers)
  • Test with realistic data volumes
Well-designed screens with proper layout structure and minimal nesting perform better and provide smoother user interactions.

​
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:
  • Generic Setting
  • Mobile Override
Title: “Complete Application Process”
This approach ensures your interfaces are optimized for each platform while maintaining consistency in functionality.