Navigation Menu Bar Settings

The Navigation Menu Bar offers users convenient access to the various pages of your application, enabling smooth and efficient navigation across different sections.

It automatically displays all regular pages that are added through the Page Manager, helping users explore the application’s functionality with ease. Note that side panels and dialog pages are not included in the navigation bar, as these are typically accessed via specific UI elements such as buttons or other interactive triggers within a page.

By default, only pages from the Main Project are included in the Navigation Menu Bar. With the introduction of support for WebUI pages in libraries starting from WebUI 25.3, it is now more common to include pages from libraries in your application’s Navigation Menu Bar.

The options under the Menu Bar Settings tab of the Application Settings are explained below.

Menu Bar

As described earlier, the Navigation Menu Bar in WebUI, by default, displays only the pages from the Main Project. If this option is left empty, the default behavior remains in effect, and only the pages from the Main Project are shown.

However, this option allows for full customization of the Navigation Menu Bar. You can specify which pages to include, whether they are from the Main Project or from integrated libraries. Additionally, you can control the state of each menu item, such as whether it should appear as active, inactive, or be conditionally displayed based on application logic.

This option accepts a string parameter that is indexed by the ExtensionOrder set with the index indexWorkflowOrder and by the MenuBarSpecification set with the index indexMenuBarSpec, such as NavigationMenuBar(webui::indexWorkflowOrder, webui::indexMenuBarSpec). This string parameter defines the items to be displayed in the Navigation Menu Bar, including the display text, page link, nesting structure, state, and other details as outlined in the MenuBarSpecification.

MenuBarSpecification attributes are as follows:

• displayText - The link text shown for the item in the Navigation Menu Bar. This attribute is mandatory, each menu item must have a displayText defined. If it is missing, a validation error will occur.

• pageId - This represents the unique Id of the WebUI page that will be navigated to when the menu item is clicked. The pageId is case-sensitive. You can identify the unique Id’s of the existing WebUI pages by accessing webui::AllRegularPages identifier data. Just like displayText, this is a required field for each menu item.

• tooltip - The tooltip text that appears when the user hovers over the menu item. If not specified, no tooltip will be shown.

• parentPageId - Enables creation of nested menu structures by linking child items under a common parent. To define a child menu item, specify the pageId of its parent as the value of parentPageId.

• state - Controls the visibility and interactivity of the link: Active (visible and clickable), Inactive (visible but not clickable, greyed out), or Hidden (not shown, default). If this attribute is not specified or contains an invalid value, the item defaults to Hidden.

Important

• It’s important not to confuse the name of the page with the page’s unique Id.

• Regardless of the Page Visibility option, it does not determine whether a page appears in the Navigation Menu Bar. Only the State attribute from the MenuBarSpecification is used for this purpose.

Note

The Navigation Menu Bar is automatically closed whenever the data of its associated identifier is updated.

Configuration Validation and Error Messages

The Navigation Menu Bar configuration now includes improved validation, starting from the moment the WebUI initializes. During startup, the system checks the validity of all defined menu items.

If any menu item is incorrectly configured, the Navigation Menu Bar will not be displayed. Instead, WebUI will present a clear error message describing the issue. When multiple errors are found, the system displays the first error in detail, along with an indication of the total number of additional errors.

This validation mechanism is designed to help App developers quickly identify and resolve issues by providing clear and actionable feedback.

Below are examples of configuration issues and the corresponding error messages generated by WebUI:

• Missing both displayText and pageId:

  “Both Name and PageId must be specified for a menu item.”

• Missing displayText:

  “The Display text field is empty for the menu item with PageId ‘{menu-item-pageId}’.”

• Missing pageId:

  “The PageId field is empty for the menu item with Name ‘{menu-item-displayText}’.”

• Invalid pageId or parentPageId (not referencing a valid page type):

  “The PageId ‘{menu-item-pageId}’ is not a valid type. Only ‘page’ or ‘page-v2-grid’ are valid page types for a menu item.”

  “The ParentPageId ‘{menu-item-ParentPageId }’ is not a valid type. Only ‘page’ or ‘page-v2-grid’ are valid page types for a menu item.”

• Duplicate pageId values across menu items:

  “The PageId ‘{menu-item-pageId}’ is duplicated.”

• Invalid parentPageId (not defined as a menu item):

  “The ParentPageId ‘{menu-item-ParentPageId}’ is not defined as a menu item in the list.”

• Circular nesting caused by parentPageId:

  “The ParentPageId ‘{menu-item-ParentPageId}’ results in an infinite loop.”

General Guidelines

To ensure a user-friendly and intuitive experience, it’s recommended to keep the Navigation Menu Bar simple and well-structured:

• Avoid overcrowding the menu with too many page links. Include only the most relevant and frequently accessed pages.

• Use nested menu items sparingly. Deep nesting can make navigation harder to follow and may overwhelm users.

• Group related pages logically under clear, concise parent items.

• Ensure that menu labels are meaningful and consistent with the content of the linked pages.

A clean and focused menu structure enhances usability and makes it easier for users to find what they need quickly.

Menu Hidden

By default, the Navigation Menu Bar is always visible in the WebUI to allow easy access to application pages. However, in some cases, such as when using a workflow-driven interface or aiming for a simplified user experience, you may want to hide it.

This option provides control over whether the Navigation Menu Bar is shown or hidden.

It accepts a scalar binary parameter or a literal True / False value, which can be set using the provided toggle switch.

• When the value evaluates to true, the Navigation Menu Bar is hidden.

• When the value is false, the menu bar remains visible.