Skip to main content
Version: Next

Navigation Bars

Introduction​

A Navigation Bar is the main element that appears at the top of the web application. It groups several tabs providing access to different content: browsers, portals, or external URLs.

The navigation bar is customizable by user profile, allowing you to adapt the interface according to each user's roles and needs.

Anatomy of a Navigation Bar​

A navigation bar is composed of several elements:

"User Portal" Bar
├─ Tab 1 : "Home" (Type: Portal)
│   └─→ Portal page with widgets
│
├─ Tab 2 : "Document Management" (Type: Browser)
│   └─→ Browser with headers and views
│
├─ Tab 3 : "Quality" (Type: Browser)
│   └─→ Quality Browser
│
└─ Tab 4 : "Help" (Type: URL)
    └─→ External link to documentation

Constituent Elements​

ElementDescription
NameTechnical name of the bar (no spaces or special characters).
DescriptionHuman-readable description for designers.
CategoryClassifies the bar in a category (Users, Administration, etc.).
HeadersOrdered list of tabs displayed in the bar.
Associated profilesUser profiles having access to this bar.

Tab Types​

Each tab in the bar can have a different type:

Browser​

  • Description: Access to a browser with its headers and views.
  • Configuration:
    • Browser selection
    • Source application selection
    • Number of columns for hover display
  • Usage: Access to record lists and form creation.

Example:

"Claims" Tab → ClaimsClients Browser
  ├─ "Client Claims" Header
  │   ├─ "All" View
  │   └─ "In Progress" View
  └─ "Create" Button (Client Claim)

Portal​

  • Description: Customizable homepage with widgets.
  • Configuration:
    • Selection or creation of a portal page
  • Usage: Dashboard, homepage with indicators.

Example:

"Home" Tab → Portal
  └─ User-configurable widgets
      ├─ My pending tasks
      ├─ Monthly statistics
      └─ Creation shortcuts

📄 Learn more about Portals

External URL​

  • Description: Link to an external or internal web page.
  • Configuration:
    • Complete URL entry
    • Opening option (same window or new window)
  • Usage: Access to documentation, intranet, third-party applications.

Example:

"Documentation" Tab → External URL
  └─ https://docs.mycompany.fr

Profiles and Access Control​

Navigation bars are associated with user profiles. This allows you to:

  • Display different interfaces according to the user's role.
  • Restrict access to certain functionalities.
  • Adapt the user experience to business needs.

Profile Association​

ProfileNavigation BarContent
* (All)"User Portal"Home, My Documents
"Admin""Administration"Users, Settings, Tools
"Quality""QIM User"Quality Portal, Claims, NC
"Manager""Manager Dashboard"Indicators, Validation, Team

[!NOTE] The * (star) profile corresponds to all profiles. Use it to make a navigation bar accessible to everyone.

Number of Columns​

For Browser type tabs, you can define the number of columns for display when hovering over the tab.

The number of columns determines how many headers display side by side in the dropdown menu. The views associated with each header are listed vertically under it.

Splitting Principle​

Display splitting is done by header. If you have:

  • 6 headers and 3 columns → 2 headers per column
  • 4 headers and 2 columns → 2 headers per column
  • 7 headers and 1 column → 7 headers in a single column

Visual effect:

When the user hovers over the tab, headers and their views display in columns:

1 column:                  2 columns:                      3 columns:
┌─────────────┐            ┌──────────┬──────────┐         ┌──────┬───────┬───────┐
│ HEADER 1    │            │ HEADER 1 │ HEADER 2 │         │HDR 1 │HDR 2  │HDR 3  │
│  • View 1   │            │  • View 1│  • View 3│         │ •View1│ •View3│ •View5│
│  • View 2   │            │  • View 2│  • View 4│         │ •View2│ •View4│ •View6│
│ HEADER 2    │            │ HEADER 3 │ HEADER 4 │         │HDR 4 │HDR 5  │HDR 6  │
│  • View 3   │            │  • View 5│  • View 7│         │ •View7│ •View9│ •View11│
│  • View 4   │            │  • View 6│  • View 8│         │ •View8│ •View10│ •View12│
└─────────────┘            └──────────┴──────────┘         └──────┴───────┴───────┘

[!TIP] Adapt the number of columns to the number of headers for balanced display. For example, for 6 headers, choose 2 or 3 columns.

Multi-Tenant Applications​

Process Studio supports multiple applications. A navigation bar can display browsers from different installed applications.

Multi-Application Configuration​

Example:

"Global Portal" Bar
├─ "Home" Tab (Application: QualityApp)
│   └─→ QualityApp Portal
├─ "Claims" Tab (Application: QualityApp)
│   └─→ ClaimsClients Browser
└─ "Accounting" Tab (Application: FinanceApp)
    └─→ Invoices Browser

Advantages:

  • Centralized access from a single bar.
  • Smooth navigation between applications.
  • Unified management for the user.

Creating a Navigation Bar​

To create a navigation bar in Process Studio, follow the dedicated guide:

📄 Complete Guide: Creating a Navigation Bar

This guide details the 5 creation steps:

  1. Interface access
  2. General properties (Name, Description, Category)
  3. Adding tabs (Browser, Portal, URL)
  4. Profile association
  5. Save

Use Cases​

Case 1: Standard User Bar​

Objective: Simple interface for all users.

Configuration:

  • Name: UserPortal
  • Profile: * (all)
  • Tabs:
    • "Home" (Portal)
    • "Documents" (Browser)

Result: Homepage + document access.

Case 2: Manager Bar​

Objective: Dedicated interface for managers with indicators.

Configuration:

  • Name: ManagerDashboard
  • Profile: "Manager"
  • Tabs:
    • "Indicators" (Portal with statistical widgets)
    • "My Team" (Browser for team documents)

Case 4: Multi-Application Bar​

Objective: Centralized access to multiple applications.

Configuration:

  • Name: GlobalPortal
  • Profile: *
  • Tabs:
    • "Home" (Portal - App: Default)
    • "Quality" (Browser - App: QualityApp)
    • "Finance" (Browser - App: FinanceApp)
    • "HR" (Browser - App: HRApp)

Difference between Browser and Navigation Bar​

Common confusion: Some designers confuse browser and navigation bar.

ElementDescriptionWhere to createWhere to use
BrowserContainer of headers and views.Process Studio → Navigation → Browsers → New BrowserIntegrated into a navigation bar as a tab.
Navigation BarAssembly of tabs (browsers or portals).Process Studio → Navigation → Browsers → New Navigation BarAssociated with user profiles, displayed at the top of the web application.

Analogy:

  • Browser = Book chapter (contains sections/views).
  • Navigation Bar = Table of contents (list of accessible chapters/tabs).

Best Practices​

Naming​

  • Technical name: No spaces, PascalCase (e.g., UserPortal).
  • Description: Complete explanatory sentence.
  • Tab titles: Short and clear ("Home", "Documents", "Administration").

Number of Tabs​

  • Limit to 5-7 tabs to avoid overloading the bar.
  • Group: Use browsers with folders rather than multiplying tabs.

Tab Order​

  • First tab: Homepage (Portal) recommended.
  • Frequent tabs: First (quick access).
  • Administration: Last.

Example of optimal order:

1. Home (Portal)
2. My Documents (Browser)
3. Quality (Browser)
4. Reporting (Portal)
5. Administration (Browser - Admin Profile only)

Profiles​

  • Create dedicated bars per profile rather than a single overloaded bar.
  • * Profile: Minimal bar for everyone.
  • Specific profiles: Enhanced bars according to roles.

Test with Different Users​

Log in with different profile accounts to verify:

  • Each profile sees the correct bar.
  • Tabs display correctly.
  • Rights are respected.

Troubleshooting​

Problem: Navigation bar doesn't appear​

Solutions:

  1. Check association to user profile.
  2. Check that the user has this profile (Organization → Users).
  3. Log out and log back in (refresh cache).

Problem: A tab is empty​

Solutions:

  1. Browser Type: Check that the selected browser exists and contains views.
  2. Portal Type: Check that the portal page exists.
  3. URL Type: Check that the URL is correct and accessible.

Problem: Tabs are not in the right order​

Solutions:

  1. Open the bar in Process Studio.
  2. Use the ⬆️ and ⬇️ buttons to reorganize the tabs.
  3. Save.

Problem: A user sees multiple bars​

Solutions:

  1. Check the user's profiles (Organization → Users).
  2. If the user has multiple profiles, they may have access to multiple bars.
  3. Process Studio generally displays the first available bar by default.

Frequently Asked Questions​

Q: How many navigation bars can be created?
A: There is technically no limit. However, it's recommended to create one bar per profile or user group (5-10 bars per application).

Q: Can you have multiple bars for the same profile?
A: Yes, but the user will only see the first bar associated with their profile. It's better to have one bar per profile.

Q: How to change a user's default bar?
A: The default bar is the first bar associated with the user's main profile. Modify the order of navigation bars.

Q: Can you hide a tab for certain users?
A: Not directly in the bar. Instead, create different bars for each profile with the appropriate tabs.

Q: Are bars synchronized between applications?
A: Yes, if you use multi-application mode. A bar can display browsers from different applications.

See also: