Navigation areas

​

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.

​

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:

​

Navigation areas types

You can create the following types of navigation areas:

​

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:

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.

​

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.

​

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

​

Modal

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

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.

• Wizard: For the Wizard option, the Web Renderer will display one user task at a time, allowing navigation using custom Next and Back buttons.

​

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

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: The container 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

​

Navigation areas demo

For more information, you can also check the following demo on our Academy website:

​

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 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 which flow the process will be initiated for, using the “navigationFlow” parameter and the name of the alternative flow:

{"navigationFlow": "First Flow"}