In the navigation panel, the navigation hierarchy should be displayed beneath platform tabs, which include options for both web and mobile platforms. The default tab selected upon opening should be the web platform.

​
Adding new areas

To create a new navigation area, follow these steps:
  1. Open FlowX Designer.
  2. Either open an existing process definition or create a new one.
  3. Toggle the navigation areas menu by clicking on Navigation view.
  4. Select Create New Area.
Navigation configurations made on one platform (for example, Web) are not automatically duplicated to the other platform by default. You must copy or recreate them.

​
Interacting with areas

Once you’ve added a new navigation area, you can interact with it through the breadcrumbs menu, which provides the following options:
You can create the following types of navigation areas:

Stepper

A stepper guides users through a sequence of logical and numbered steps, aiding in navigation.

Tab Bar

A user interface element presenting multiple tabs for navigation or organizing content. It allows users to switch between different sections or views within the application.

Page

This type displays basic full-page content for an immersive user experience.

Modal

A modal temporarily takes control of the user’s interaction within a process as an overlay, requiring user interaction before returning to the main application or website functionality.

Zone

A container-like element grouping specific navigation areas or user tasks, commonly used for organizing content such as headers and footers within a process definition.

Parent Process Area

Allows subprocess design under parent process hierarchy; ensures validation and design restrictions.

​
Stepper

A stepper breaks down progress into logical and numbered steps, making navigation intuitive.
You can also define a stepper in step structure with the possibility to track progress and also returning to a previously visited step (as you can see in the navigation areas in the example above).

​
Stepper in step example

​
Steps

Steps are individual elements within a stepper, simplifying complex processes.

​
Tab bar

The Tab Bar is a crucial component in user interfaces, facilitating seamless navigation and content organization.
Key Features and usage guidelines:

Parallel Zones

The navigation Tab Bar offers specialized support for parallel zones within the same user task. This feature allows users to navigate effortlessly between different sections or functionalities.

Multiple Tabs

Users can access multiple tabs within the tab bar, enabling quick switching between various views or tasks.
When setting up a tab bar zone in your BPMN diagram, ensure that you always initiate a parallel zone using Parallel Gateway nodes. This involves using one Parallel Gateway node to open the zone and another to close it, as demonstrated in the example above. This approach ensures clarity and consistency in your diagram structure, facilitating better understanding.
Mobile development considerations: when developing for mobile devices, ensure the tab bar is always positioned as a root component in the navigation. It should remain consistently visible, prioritizing ease of navigation.

​
Tabs

Tabs are clickable navigation elements within the Tab Bar that allow users to switch between different sections or functionalities within an application.
Each tab could contain a user task or multiple user tasks that can be rendered in parallel.
You can also use Start embedded subprocess nodes to render defined subprocesses as a tab. Check the Start embedded subprocess for more details.

​
Tab bars inside tabs

In addition to regular tab bars, you have the option to implement nested tab bars, allowing for the display of another set of tabs when accessing a specific tab.
To achieve this configuration, you’ll need to create an additional parallel zone inside the previously created one for the main tab bar. This section should encompass the child tabs of the primary tab bar in your diagram. Once these child tabs are defined, close the parallel zone accordingly.

​
Page

Page navigation involves user interaction, typically through clicking on links, buttons, or other interactive elements, to transition from one page to another.
A page could contain multiple user tasks displayed either in parallel (single page application) or one by one (wizard style).
This property is available starting with v4.1.0 platform release.
You have the possibility to add step-by-step or wizard-style navigation within a page (applicable when a page contains more than one User Task). This means users can navigate through the application in a guided manner, accessing each step within the designated area and page.
  • Single page form (default): The Web Renderer will display all User Tasks within the same page (in parallel).
For optimal navigation, we suggest utilizing cards to guide users through the content.
To maintain a clean UI while displaying user tasks on a single page, use cards as the root UI elements and apply accordions to them. This allows you to collapse each card after it is validated by an action.
Child areas will be rendered on the same page.
  • Wizard: For the Wizard option, the Web Renderer will display one user task at a time, allowing navigation using custom Next and Back buttons.
Child areas will be presented sequentially. It’s crucial to configure actions properly to ensure smooth user navigation.
Modals offer temporary control over user interaction within a process, typically appearing as pop-ups or overlays. They guide users through specific tasks before returning to the main functionality of the application or website.
Modal Example
To enable user interaction with a modal, you can configure it to be dismissable in two ways:
  • Dismiss on backdrop click
  • Display dismiss confirmation alert
Here’s how to configure these options:
  1. Navigate to your configured modal and access the UI Designer.
Modal UI Designer
  1. In the UI Designer navigation panel, select the Settings tab, then choose Generic.
  2. Check the box labeled “dismissable.” If you also want to display a dismiss confirmation alert, configure the:
    • Title
    • Message
    • Confirm button label
    • Cancel button label
By configuring these options, you can customize the behavior of your modals to enhance user experience and guide them effectively through tasks.

​
Zone

A Zone serves as a container designed to govern UI navigation by grouping specific elements together. Its optimal application is in scenarios involving processes featuring both a header and footer. You have the possibility to add step-by-step or wizard-style navigation within a specific zone (applicable when a zone contains more than one User Task). This means users can navigate through the application in a guided manner, accessing each step within the designated area and page.
  • Single page form (default): The Web Renderer will display all User Tasks within the same zone.
For optimal navigation, we suggest utilizing cards to guide users through the content.
Child areas will be rendered on the same page.
  • Wizard: For the Wizard option, the Web Renderer will display one user task at a time, allowing navigation using custom Next and Back buttons.
Child areas will be presented sequentially. It’s crucial to configure actions properly to ensure smooth user navigation.
Zones with headers and footers are exclusively accessible in web configurations. They are not supported as navigation areas for mobile development.

​
How to Create a Header/Footer Zone

To establish a header/footer zone, follow these steps:
  1. Begin by opening a new parallel zone and ensure to close it where you want the header/footer zone to end.
  1. Introduce two new user tasks nodes within your process, designated to function as the header, respectively as footer.
  2. Connect the first parallel gateway node to both of them.
  1. Now connect the header and footer user tasks to the closing Parallel Gateway.
  1. In the navigation areas menu, incorporate a new zone labeled “Header Zone” and a new zone “Footer Zone”.
  2. Position the header at the top of your navigation structure or at the top within your primary navigation element and the footer at the bottom.
  3. Assign the user tasks to the “Header Zone” and to the “Footer Zone”.
When working with containers directly within navigation zones, you have the flexibility to set the sticky/static property directly on your specific navigation zone using the UI Designer, without having to add specific user tasks. However, determining the best practice depends on the specific use case you’re aiming to implement. For instance, if you’re looking to incorporate footers containing actions or buttons such as “Cancel application” or “Continue,” it’s advisable to include user tasks, allowing you to configure node actions effectively.
On the other hand, if your goal is to integrate static headers and footers featuring branding assets and external URLs, it’s simpler to directly add them to the navigation areas. In this scenario, you can effortlessly incorporate images or text with external URLs on your containers styling.
  1. Proceed to customize the user tasks UI according to your preferences.

​
Styling options

To customize the appearance of headers and footers, you need to utilize containers as the root UI elements for user tasks or navigation areas.
You have two styling options available for these containers:
  • Static: This style remains fixed and does not scroll along with the page content.
  • Sticky: When the sticky property is enabled, the container maintains its position even during scrolling.
    • Layout: You have the option to specify minimum distances between the container and its parent element while scrolling. At runtime, sticky containers will keep their position on scroll relative to top/ bottom/ right/ left margin of the parent element
In mobile configurations, the right and left properties for sticky layout are ignored by the mobile renderer.
For more information, you can also check the following demo on our Academy website:

FlowX.AI Navigation view

​
Alternative flows

There might be cases when you want to include or exclude process nodes based on some information that is available at start.
For example, in case of a bank onboarding process, you might want a few extra BPMN nodes in the process in case the person trying to onboard is a minor.
For these cases, we have added the possibility of defining alternative flows. For each navigation area or node, you can choose to set if they are only available in certain cases. In the example below, we will create two alternative flows in which we will include two different steppers and one modal without being part of an alternative flow.
When starting a process, you must mention for the which flow the process will be initiated using the “navigationFlow” parameter and the name of the alternative flow: 
{"navigationFlow": "First Flow"}
If a node is not assigned to an alternative flow, this means the node will be included in all possible flows.
A node could also be a part of multiple flow names.
When configuring alternative flows in the main process, remember that they will also be applied in any embedded subprocesses with identical names.