Navigation areas

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.

Stepper

Sequential workflow navigation with progress tracking. Maximum 2 levels supported.

Tab Bar

Multi-section navigation. Must be root component on mobile platforms.

Page

Full-screen content display with wizard or single-page form options.

Modal

Temporary overlay for focused tasks. Use sparingly on mobile.

Zone

Layout container with headers/footers. Web-only feature.

Parent Process Area

Subprocess hierarchy management and design organization.

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.

User task requirements

Critical Configuration Requirements: All user tasks in your process must be included within navigation areas structure. It is a misconfiguration to have user tasks that are not associated with the navigation areas hierarchy.

Key Requirements:

• Every user task must be assigned to a navigation area
• User tasks cannot be left empty - they must contain UI elements
• All user tasks must be organized within the proper navigation hierarchy

Failing to follow these requirements will result in runtime errors and poor user experience.

Platform-specific capabilities

Web platform capabilities

• Zone: Used for organizing parts of screen with headers and footers
• Zone/Page: Supports wizard navigation and single-page form layouts
• Tab Bar: Optional placement and full navigation hierarchy support
• Stepper: Maximum 2 levels supported
• Modal: Full functionality with flexible usage patterns
• Parent Process Area: Complete subprocess design support

Mobile platform capabilities

• Tab Bar: Must be positioned as first root navigation to define the entire application navigation structure
• Stepper: Maximum 2 levels supported
• Modal: Limited usage recommended (see recommendations below)
• Parent Process Area: Basic subprocess design support
• Zone: Not supported
• Page: Basic functionality only

Platform support matrix

Navigation Area	Web	Mobile	Platform-specific notes
Zone	✅	❌	Web only - used for organizing parts of screen
Tab Bar	✅	✅	Mobile: must be first root navigation for entire app structure
Page	✅	✅	Web: wizard navigation/single-page form support
Stepper	✅	✅	Maximum 2 levels across all platforms
Modal	✅	✅	Mobile: specific usage recommendations apply
Parent Process Area	✅	✅	Subprocess design and hierarchy management

Getting started

This section covers the essential tasks for working with navigation areas: creating, configuring, and managing them in FlowX.AI Designer.

Creating navigation areas

To create a new navigation area, follow these steps:

1. Access FlowX.AI Designer

   Open FlowX.AI Designer and either open an existing process definition or create a new one.

2. Open Navigation View

   Toggle the navigation areas menu by clicking on Navigation view.

3. Create New Area

   Select Create New Area to begin configuring your navigation structure.

   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.

Managing navigation areas

Once you’ve created a navigation area, you can manage it through the breadcrumbs menu, which provides these options:

Area settings

Use Area Settings to configure the following properties:

• Name - a name for the navigation area element that is visible in the Navigation menu

This does not represent the label for your navigation area (for example, for a step element) that would be visible in the process at runtime. To set the label for your element, use the UI Designer to edit it. To do that, trigger the Navigation View menu, then navigate to your element and click on the breadcrumbs. Afterward, click “UI Designer.”

• Alternative Flows - There might be cases when you want to include or exclude process nodes based on some information that is available as a start condition.

UI Designer

Use UI Designer to configure the following:

• Settings:
  • Generic: Properties available cross-platform (Web, Android and iOS), available for all platforms
  • Platform-specific configuration and styling: For components across Web, iOS, and Android.

Copy/Paste

The “Copy Navigation Areas” feature allows you to replicate navigation hierarchies and elements between different platforms.

The Copy/Paste Navigation Areas feature facilitates the duplication of navigation configurations within the same process definition and environment. It does not support copying across different process definitions or environments.

Delete an area

To delete a navigation area:

1. Access the Navigation view menu within the FlowX.AI Designer.
2. Choose the intended navigation area, then click on the breadcrumbs menu located on the right.
3. Select Delete Area.

Important: Deleting the navigation area will also remove any associated child areas. Additionally, any user tasks contained within will be unassigned and relocated to the User Tasks section within the Navigation view.

Action Required: After deleting a navigation area, you must reassign any unassigned user tasks to proper navigation areas. Leaving user tasks unassigned is a misconfiguration that will cause runtime issues.

Navigation area types

Choose the right navigation area type based on your user interface needs and platform requirements.

Quick reference

Type	Use Case	Web Support	Mobile Support	Key Features
Stepper	Sequential workflows	✅	✅	Progress tracking, 2-level max
Tab Bar	Section switching	✅	✅ (root only)	Parallel content access
Page	Full-screen content	✅	✅	Wizard/single-page modes
Modal	Focused tasks	✅	✅	Temporary overlays
Zone	Layout structure	✅	❌	Headers/footers (web only)
Parent Process	Subprocess design	✅	✅	Hierarchy management

Available navigation types

You can create the following types of navigation areas:

Stepper

Sequential workflow navigation that breaks down complex processes into logical, numbered steps.

Key Features:

• Progress tracking with visual indicators
• Return to previously visited steps
• Maximum 2 levels of nesting supported

Stepper Recommendation: FlowX supports a maximum of 2 levels of stepper navigation across all platforms. Design your processes with this limit in mind to avoid navigation complexity. If you need more levels, consider breaking complex flows into separate processes.

If you need more levels, consider breaking complex flows into separate processes.

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

Multi-section navigation component that allows users to switch between different areas of content.

Key Features:

• Parallel zone support within user tasks
• Quick switching between sections
• Support for nested tab structures

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 Requirements: On mobile devices, tab bars must be positioned as the root component in navigation and 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

Full-screen content display that can contain multiple user tasks in parallel or sequential presentation.

A page could contain multiple user tasks displayed either in parallel (single page application) or one by one (wizard style).

Navigation type (only for Web)

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.

Modal

Temporary overlay that interrupts the main flow to present focused tasks or information.

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.

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.

2. In the UI Designer navigation panel, select the Settings tab, then choose Generic.

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

Web-only container for organizing layout with headers, footers, and structured content areas.

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.

Navigation type (only for Web)

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.

2. Introduce two new user tasks nodes within your process, designated to function as the header, respectively as footer.
3. Connect the first parallel gateway node to both of them.

4. Now connect the header and footer user tasks to the closing Parallel Gateway.

3. In the navigation areas menu, incorporate a new zone labeled “Header Zone” and a new zone “Footer Zone”.
4. 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.
5. 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.

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

Parent Process Area

Specialized container for managing subprocess design within parent process hierarchies.

Use Cases:

• Subprocess organization
• Hierarchy validation
• Design restriction enforcement

Warnings

If you do not assign a user task to a navigation area, the platform will display a warning indicating that there are user tasks not included in the navigation structure (applies to all platforms).

Best practices and recommendations

User task configuration requirements

Mandatory User Task Organization: Every user task in your process definition must be properly organized within navigation areas:

• Complete coverage: All user tasks must be assigned to navigation areas - unassigned user tasks indicate a misconfiguration
• Non-empty user tasks: User tasks must contain UI elements and cannot be left empty
• Proper hierarchy: Organize user tasks within the appropriate navigation area hierarchy based on your process flow

These requirements are essential for proper process execution and user experience.

Mobile platform recommendations

• Modal usage: FlowX strongly recommends the use of modals only when you need to temporarily interrupt the normal (root) flow of the app, to present a focused task or message to the user, requiring the user to interact with it before returning to the main flow.
• Important: If finishing a task in a modal leads to navigating to another screen, and not just dismissing the modal, then the modal should be a root navigation area.
• Tab bar implementation: On mobile, tab bars must be positioned as first root navigation to define the entire application navigation structure and remain consistently visible.

Cross-platform guidelines

• Stepper complexity: Maximum 2 levels supported across all platforms. Break complex flows into separate processes if more levels are needed.
• Design approach: Start with mobile constraints first, then enhance for web. Keep navigation structures simple and flat with clear visual indicators.
• Web-specific features: Leverage zones with headers and footers for comprehensive layouts. Use wizard navigation for complex processes and take advantage of larger screen real estate.

Advanced features

Demo and learning resources

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.