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

<Tabs>
  <Tab title="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>

  <Tab title="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.
  </Tab>
</Tabs>

### Configuring platform overrides

To override a general property for a specific platform:

<Steps>
  <Step title="Access UI Designer">
    Open the UI Designer and select a UI Element, such as a **Card**.
  </Step>

  <Step title="Access Platform-Specific Settings">
    From the UI Designer navigation panel, select the **Settings** tab, then select the **desired platform** (Web, iOS, or Android).
  </Step>

  <Step title="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.
  </Step>

  <Step title="Preview Changes">
    Preview your changes in the UI Designer by navigating from one platform to another or by comparing them.
  </Step>
</Steps>

<Tip>
  Settings overrides can always be imported/pushed from one platform to another for consistency across platforms.
</Tip>

<Info>
  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.
</Info>

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

<AccordionGroup>
  <Accordion title="Single Page Form (Default)" icon="file">
    **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>

  <Accordion title="Wizard Navigation" icon="arrow-right">
    **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.
    </Warning>
  </Accordion>
</AccordionGroup>

<Info>
  Navigation types are only available for **Web** platform configurations.
</Info>

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

## Layout configuration

Layout settings are available for all components that can group other types of elements (for example, **Containers** or **Cards**).

### Linear layout properties

<AccordionGroup>
  <Accordion title="Display Mode" icon="bars">
    **Linear**: Selected by default for arranging child elements in a linear fashion.
  </Accordion>

  <Accordion title="Direction" icon="arrows-up-down">
    * **Horizontal**: Aligns child elements horizontally in a row
    * **Vertical**: Aligns child elements vertically in a column
  </Accordion>

  <Accordion title="Justify" icon="align-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>

  <Accordion title="Align" icon="align-center">
    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>

  <Accordion title="Wrap" icon="sheet-plastic">
    * **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>

  <Accordion title="Gap" icon="arrows-left-right-to-line">
    Sets the spacing between child elements, measured in pixels.
  </Accordion>
</AccordionGroup>

## Hide and disable expressions

Configure dynamic visibility and interaction using JavaScript expressions:

### Available expression types

<Tabs>
  <Tab title="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>

  <Tab title="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.

    <Info>
      It's important to make sure that disabled fields have the same expression configured under the path expressions → hide.
    </Info>
  </Tab>
</Tabs>

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

<AccordionGroup>
  <Accordion title="Single Purpose User Tasks" icon="bullseye">
    **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.
    </Warning>
  </Accordion>

  <Accordion title="Efficient Layout Structure" icon="grid">
    **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.
    </Tip>
  </Accordion>

  <Accordion title="Conditional Styling Strategy" icon="eye">
    **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.
    </Warning>
  </Accordion>
</AccordionGroup>

### Implementation recommendations

<AccordionGroup>
  <Accordion title="Navigation Design" icon="sitemap">
    **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>

  <Accordion title="Platform Considerations" icon="laptop-mobile">
    **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>

  <Accordion title="Layout Best Practices" icon="table-layout">
    **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>

  <Accordion title="Performance Optimization" icon="bolt">
    **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

    <Check>
      Well-designed screens with proper layout structure and minimal nesting perform better and provide smoother user interactions.
    </Check>
  </Accordion>
</AccordionGroup>

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

<Tabs>
  <Tab title="Generic Setting">
    **Title**: "Complete Application Process"
  </Tab>

  <Tab title="Mobile Override">
    **Title**: "Complete App" (shorter for mobile displays)
  </Tab>
</Tabs>

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