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

# UI Designer best practices

> Best practices for creating effective user interfaces using FlowX.AI UI Designer, based on established design principles and platform capabilities.

## UI Designer best practices in FlowX.AI

When designing user interfaces with FlowX.AI UI Designer, following established best practices ensures consistent, usable, and effective user experiences.

## Design principles

Based on FlowX.AI documentation for creating user interfaces:

<CardGroup cols={2}>
  <Card title="Consistent Styling" icon="palette">
    **Use consistent styling across all screens** for a cohesive user experience.

    Use platform-specific overrides strategically while maintaining visual consistency.
  </Card>

  <Card title="Logical Grouping" icon="object-group">
    **Group related inputs within logical sections or cards**.

    Use Cards and Containers to organize content and create visual hierarchy.
  </Card>

  <Card title="Proper Validation" icon="check">
    **Implement proper validation** to prevent errors and guide users.

    Use available validators: required, custom, and conditional validation.
  </Card>

  <Card title="Clear Feedback" icon="message">
    **Provide clear feedback** on actions with success and error messages.

    Use event handlers to handle user interactions appropriately.
  </Card>
</CardGroup>

## Component usage guidelines

### Form elements best practices

<AccordionGroup>
  <Accordion title="Input Fields" icon="input-pipe">
    **Configuration**:

    * Use clear, descriptive labels
    * Implement appropriate validation (required, custom)
    * Configure hide/disable expressions for dynamic behavior
    * Add helper text for complex requirements

    **Available Properties**:

    * Label and placeholder text
    * Validation rules (required, custom)
    * Hide and disable expressions
    * Platform-specific overrides
  </Accordion>

  <Accordion title="Selection Components" icon="square-check">
    **Select Component**:

    * Use for dropdown menus and single selections
    * Configure options with proper labels and values
    * Implement CHANGE event handlers for dependent fields
    * Use disabled options feature for conditional availability

    **Radio Buttons**:

    * Best for 2-4 exclusive options
    * Use when all options need to be visible

    **Checkboxes**:

    * Use for multiple selections or single yes/no choices
    * Configure CHANGE events for dynamic interactions
  </Accordion>

  <Accordion title="Action Components" icon="hand-pointer">
    **Buttons**:

    * Use descriptive labels that indicate the action
    * Configure appropriate event handlers (Process Actions, Data Operations)
    * Consider platform-specific button styles

    **File Upload**:

    * Clearly indicate accepted file types
    * Provide appropriate feedback during upload process
    * Consider platform limitations for mobile devices
  </Accordion>
</AccordionGroup>

### Layout best practices

<Tabs>
  <Tab title="Linear Layout">
    **When to Use**: Simple, sequential content flow

    **Configuration**:

    * **Direction**: Choose Horizontal for row layout, Vertical for column layout
    * **Justify**: Control main axis alignment (Start, Center, End, Space Between, etc.)
    * **Align**: Control cross axis alignment (Start, Center, End, Stretch)
    * **Gap**: Set appropriate spacing between elements
    * **Wrap**: Enable for responsive behavior when needed

    **Best For**:

    * Form layouts
    * Content that flows in one direction
    * Mobile-first designs
  </Tab>

  <Tab title="Grid Layout">
    **When to Use**: Complex, multi-dimensional layouts

    **Benefits**:

    * Better control over 2D layouts
    * Responsive design capabilities
    * Suitable for dashboard-style interfaces

    **Considerations**:

    * More complex to configure than linear layouts
    * Test across platforms for consistent behavior
  </Tab>
</Tabs>

## Platform-specific best practices

### Web Platform

<Steps>
  <Step title="Navigation Design">
    **Navigation Types**:

    * Use **Single Page Form** for displaying all User Tasks on the same page
    * Use **Wizard** navigation for step-by-step processes
    * Configure actions properly for smooth navigation flow
  </Step>

  <Step title="Zone Configuration">
    **Web-Specific Features**:

    * Utilize zones with headers and footers (web-only feature)
    * Implement proper navigation hierarchy
    * Use cards to guide users through content on single-page forms
  </Step>

  <Step title="Layout Optimization">
    **Screen Real Estate**:

    * Take advantage of larger screen sizes
    * Use appropriate justify and align settings for content distribution
    * Consider horizontal layouts for better space utilization
  </Step>
</Steps>

### Mobile Platforms (iOS & Android)

<AccordionGroup>
  <Accordion title="Screen Configuration" icon="mobile">
    **Mobile-Specific Properties**:

    * Configure **Screen Title** for navigation bar display (Card component when used as root)
    * Set **Scrollable** property appropriately (iOS-specific)
    * Use platform overrides for shorter titles and mobile-optimized content

    **Limitations**:

    * Zones with headers and footers are not supported
    * Navigation features are more limited compared to web
  </Accordion>

  <Accordion title="Content Adaptation" icon="mobile-signal-out">
    **Content Strategy**:

    * Use shorter titles and labels for mobile displays
    * Consider touch interaction patterns
    * Ensure content fits within mobile screen constraints
    * Test with realistic content lengths
  </Accordion>
</AccordionGroup>

## Dynamic behavior best practices

### Hide and Disable Expressions

<Tabs>
  <Tab title="Hide Expressions">
    **Purpose**: Control element visibility based on conditions

    **Implementation**:

    * Use JavaScript expressions that evaluate to true/false
    * Reference process data store keys for dynamic evaluations
    * Configure in Settings → Platform → Overrides → Expressions → Hide

    **Common Use Cases**:

    * Show/hide fields based on user selections
    * Display different content for different user roles
    * Adapt interface based on process state
  </Tab>

  <Tab title="Disable Expressions">
    **Purpose**: Make elements non-interactive while keeping them visible

    **Best Practice**: Ensure disabled fields have the same expression configured under hide expressions for consistency.

    **Usage**: Disable form fields based on validation state or user permissions
  </Tab>
</Tabs>

### Conditional Styling

**Available For**: Text, Link, and Container elements

<Steps>
  <Step title="Configuration">
    1. Select a **Text**, **Link**, or **Container** element
    2. Navigate to the **Styles** tab
    3. Locate the **Conditional Styling** section
    4. Click the **➕** icon to add expressions and effects
    5. Use the **JS Editor** to configure expressions
  </Step>

  <Step title="Structure">
    **Condition**: String expression evaluated similarly to hide/disable expressions
    **Overrides**: Key-value map defining property-value pairs to apply
  </Step>

  <Step title="Best Practices">
    * Use real-time data evaluation for responsive UI updates
    * Handle conflict resolution (latest condition takes precedence)
    * Combine with data-driven expressions for adaptable designs
  </Step>
</Steps>

## Validation best practices

### Available Validators

<AccordionGroup>
  <Accordion title="Required Validator" icon="asterisk">
    **Usage**: Ensure essential fields are completed before form submission

    **Application**: Apply to critical form elements like name, email, or selection fields
  </Accordion>

  <Accordion title="Custom Validator" icon="code">
    **Usage**: Implement complex business logic validation

    **Benefits**: Flexible validation rules specific to your business requirements

    **Configuration**: Use JavaScript expressions for validation logic
  </Accordion>

  <Accordion title="Conditional Validation" icon="badge-check">
    **Usage**: Apply validation based on other field values or process state

    **Examples**: Validate fields only when certain conditions are met
  </Accordion>
</AccordionGroup>

## Event handlers best practices

### Event Configuration

**Common Events**:

* **CHANGE**: Triggered when form element values change
* Use for updating dependent fields, triggering calculations, showing/hiding related content

**Action Types**:

* **Process Actions**: Advance workflow based on user interactions
* **Data Operations**: Update form fields and process data
* **UI Updates**: Show/hide elements dynamically
* **External Calls**: Integrate with external systems

<Tip>
  Configure event handlers to provide immediate feedback and create responsive user experiences.
</Tip>

## Testing and quality assurance

### Platform Testing

<Steps>
  <Step title="Multi-Platform Preview">
    Use the UI Designer's platform switching to preview designs across Web, iOS, and Android platforms.
  </Step>

  <Step title="Responsive Testing">
    Test layouts with different content lengths and screen orientations.
  </Step>

  <Step title="Expression Validation">
    Test hide/disable expressions and conditional styling with various data scenarios.
  </Step>

  <Step title="Navigation Flow">
    Verify wizard navigation and single-page form behaviors work as expected.
  </Step>
</Steps>

### Content Considerations

<CardGroup cols={2}>
  <Card title="Accessibility" icon="universal-access" href="../../platform-deep-dive/accessibility">
    **Design Considerations**:

    * Use proper labels for form elements
    * Ensure sufficient color contrast
    * Test with assistive technologies
    * Provide alternative text for images

    For details on WCAG 2.1 compliance, keyboard navigation, and screen reader support, see the [Accessibility guide](../../platform-deep-dive/accessibility).
  </Card>

  <Card title="Responsive Design" icon="arrows-rotate">
    **Test Strategy**:

    * Verify layouts work on different screen sizes
    * Test navigation on both mobile and web
    * Ensure content remains readable across platforms
    * Check platform-specific overrides function correctly
  </Card>
</CardGroup>

## Common patterns and solutions

### Navigation areas management

**Copy Navigation Areas**: Use the copy/paste feature to replicate navigation hierarchies between platforms (within the same process definition and environment).

**Area Deletion**: When deleting navigation areas, remember that child areas are also removed, and user tasks are relocated to the User Tasks section.

### Theme and styling management

**Theme Overrides**:

* Customize component appearance to differ from theme settings
* Import/export theme overrides between platforms for consistency
* Use contextual menu options for efficient style management

**Style Copying**: Use copy/paste functionality for styles between compatible components and across platforms.

<Info>
  These best practices are based on actual FlowX.AI capabilities and documentation. Always refer to the latest documentation for the most current features and recommendations.
</Info>