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

# Creating a user interface

You can configure interfaces for both generated and custom screens in FlowX Designer.

Create a simple process:

<Steps>
  <Step>
    Go to **FlowX Designer** and navigate to the **Definitions** tab.
  </Step>

  <Step>
    Click on the **New Process** button, using the **breadcrumbs** in the top-right corner.
  </Step>

  <Step>
    Add a **Start Node**.
  </Step>

  <Step>
    Add two **User Tasks** that will represent the screens of the application.
  </Step>

  <Step>
    Finish your BPMN process with an **End Node**.

    <Frame>
      ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/create_ui.png)
    </Frame>
  </Step>

  <Step>
    Now create a **Navigation Area** (Page) where we will include our user tasks.

    <Frame>
      ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/create_ui1.gif)
    </Frame>

    <Tip>
      In the FlowX Designer, you can create the following navigation areas:

      * **Stepper**: Breaks progress into logical, numbered steps for intuitive navigation.
      * **Tab Bar**: Allows users to switch between different sections or views within the application.
      * **Page**: Displays full-page content for an immersive experience.
      * **Modal**: Overlays that require user interaction before returning to the main interface.
      * **Zone**: Groups specific navigation areas or tasks, like headers and footers.
      * **Parent Process Area**: Supports subprocess design under a parent hierarchy, ensuring validation and design consistency.
    </Tip>
  </Step>
</Steps>

## Configuring the UI

All visual properties of the UI elements and navigation areas are configured using the using the **FlowX UI Designer**.

<Frame>
  ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/where_ui1.png)
  ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/where_ui2.png)
</Frame>

### Navigation type

To begin, we need to define the type of navigation for our page application. The options are:

* Single page form
* Wizard

<Check>
  We will use the **Wizard** type for our example.
</Check>

<Frame>
  ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/create_ui3.png)
</Frame>

### Configuring the first screen (card)

<Steps>
  <Step>
    Open the **UI Designer** for your first **user task**. This will represent the **first card**.
  </Step>

  <Step>
    Add a **CARD** element to the UI.
  </Step>

  <Step>
    Add a **Form** to the card to group the inputs.
  </Step>

  <Step>
    Add an **input** field to the form.

    <Frame>
      ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/ui_card1.png)
    </Frame>
  </Step>

  <Step>
    Add a button with a save data action to advance to the next screen and save the input data.

    <Info>
      First, configure the action at the node level. The action, called when the button is clicked, should be **Manual** (not automatic because it is triggered by a user).
    </Info>

    <Frame>
      ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/create_ui_save_data.png)
    </Frame>
  </Step>
</Steps>

### Testing the first screen

<Steps>
  <Step>
    Start the process definition that you just configured.
  </Step>

  <Step>
    The card with the **Form** and the **Input** is displayed.
  </Step>

  <Step>
    Test the **Input**.
  </Step>
</Steps>

<Frame>
  ![Test the input](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/test_card_ui.gif)
</Frame>

## Configuring the second screen (card)

<Steps>
  <Step>
    Go to your second **user task** and add a new **CARD**.
  </Step>

  <Step>
    Add other UI elements of your choice.

    <Frame>
      ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/create_ui4.png)
    </Frame>
  </Step>
</Steps>

### Testing the final result

Start the process definition again to review the final result:

<Frame>
  ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/final_rez.gif)
</Frame>