> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Screen configuration guide

> Learn how to configure screens effectively using FlowX.AI UI Designer with platform-specific settings and navigation areas.

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

> [tab] Generic 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.

> [tab] Platform-Specific Overrides
>
> **Platform-Specific Configuration**: Override generic settings for specific platforms.
>
> For example, on Android, you might want to change the Card title to a shorter one to better fit mobile screens.

### 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.

> [!TIP]
>
> Settings overrides can always be imported/pushed from one platform to another for consistency across platforms.

> [!NOTE]
>
> 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)

> [accordion] 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
>
> **Child Areas**: Rendered on the same page

> [accordion] Wizard Navigation
>
> **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
>
> > [!WARNING]
> >
> > It's crucial to configure actions properly to ensure smooth user navigation in wizard mode.

> [!NOTE]
>
> Navigation types 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

> [!WARNING]
>
> 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

> [accordion] Display Mode
>
> **Linear**: Selected by default for arranging child elements in a linear fashion.

> [accordion] Direction
>
> * **Horizontal**: Aligns child elements horizontally in a row
> * **Vertical**: Aligns child elements vertically in a column

> [accordion] 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

> [accordion] 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

> [accordion] 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

> [accordion] 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

> [tab] Hide 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.

> [tab] Disabled Condition
>
> **Purpose**: A JavaScript expression that disables the UI element when it returns a truthy value.
>
> **Usage**: Make elements non-interactive while keeping them visible.
>
> > [!NOTE]
> >
> > It's important to make sure that disabled fields have the same expression configured under the path expressions → hide.

### 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

> [accordion] Single Purpose User Tasks
>
> **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
>
> > [!WARNING]
> >
> > Overcrowded screens with too many UI components can lead to poor user experience and potential performance issues during process execution.

> [accordion] Efficient Layout Structure
>
> **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
>
> > [!TIP]
> >
> > Grid layout is your primary tool for creating complex layouts efficiently. It reduces nesting while providing flexible positioning capabilities.

> [accordion] Conditional Styling Strategy
>
> **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
>
> > [!WARNING]
> >
> > Overusing hide expressions can negatively impact performance and make interfaces harder to maintain.

### Implementation recommendations

> [accordion] Navigation Design
>
> **For optimal navigation**:
>
> * Use **Cards** to guide users through content on single-page forms
> * Apply **Accordions** to collapse validated sections
> * Configure actions properly for wizard-style navigation
> * Consider platform limitations (mobile vs web features)

> [accordion] 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

> [accordion] Layout Best Practices
>
> **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

> [accordion] Performance Optimization
>
> **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
>
> > [!TIP]
> >
> > 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:

> [tab] Generic Setting
>
> **Title**: "Complete Application Process"

> [tab] Mobile Override
>
> **Title**: "Complete App" (shorter for mobile displays)

This approach ensures your interfaces are optimized for each platform while maintaining consistency in functionality.


## Related topics

- [UI Designer](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
- [UI Designer best practices](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/best-practices.md)
- [Platform-specific considerations](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/platform-considerations.md)
- [Configuration and migration guide](https://docs.flowx.ai/release-notes/v4.x/v4.6.x/v4.6.0-january-2025/migrating-from-v4.1.x-to-v4.6.0/process-configuration.md)
- [Layout configuration](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/layout-configuration.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.