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:

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 Designer.
2. Choose the intended navigation area, then click on the breadcrumbs menu located on the right.
3. Select Delete Area.

Note: 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.

​

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.

Use this UI configuration to display comprehensive full-page content.

​

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.

​

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

​

Parent process area

​

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

{"navigationFlow": "First Flow"}