Skip to main content
Version: Next

Creating a Navigation Bar

Introduction​

This guide details step by step how to create a navigation bar in Process Studio. A navigation bar is the main element displayed at the top of the web application, grouping several tabs that provide access to different content.

Prerequisites:

  • Have created at least one navigator (see Creating Navigators).
  • Know the user profiles to target.

Step 1: Access​

  1. Open Process Studio.
  2. Go to Navigation → Navigators.
  3. Click on New → New navigation bar (not "New Navigator").

Step 2: General Properties​

Fill in the description fields:

FieldDescriptionExample
NameTechnical name of the bar (no spaces or special characters).UserPortal, Administration, QIM
DescriptionHuman-readable description for designers."Navigation bar for standard users"
CategoryClassifies the bar in a category (facilitates search)."Users", "Administration", "Quality"

[!TIP] Create a new category by simply typing its name in the "Category" field. It will be automatically created.

Step 3: Adding Tabs​

The tabs are the clickable elements displayed in the navigation bar at the top of the web application.

Add a Tab​

  1. In the Headers section, click on the Add button (Add header).
  2. Configure the tab according to its type.

Type 1: Navigator Tab​

Displays a navigator with its headers and views.

Configuration:

FieldDescriptionExample
TitleName displayed in the tab"My Documents", "Claims", "Quality"
Content typeSelect NavigatorNavigator
IconSelect an icon representative of the navigator.fa-solid fa-file
ApplicationSource application of the navigator"default" (current application)
NavigatorSelect the navigator to displayClientClaims, QualityDocuments
Nb columnsNumber of columns for hover display1 to n

Example:

Title: "Claims"
Type: Navigator
Application: default
Navigator: ClientClaims
Nb columns: 2

Result: The user clicks on "Claims" → The navigator displays with its headers and views.

Type 2: Portal Tab​

Displays a customizable portal page with widgets.

Configuration:

FieldDescriptionExample
TitleName displayed in the tab"Home", "Dashboard", "Indicators"
Content typeSelect PortalPortal
IconSelect an icon representative of the portal.fa-solid fa-house
PageSelect or create a portal page"Home", "QualityPortal"

Example:

Title: "Home"
Type: Portal
Page: Home

Result: The user clicks on "Home" → The portal page displays with its widgets.

📄 Learn more about Portals

Type 3: External URL Tab​

Displays an external web page or a custom link.

Configuration:

FieldDescriptionExample
TitleName displayed in the tab"Documentation", "Intranet", "Help"
Content typeSelect URLURL
IconSelect an icon representative of the portal.fa-solid fa-house
URLComplete web addresshttps://docs.mycompany.com

Example:

Title: "Documentation"
Type: URL
URL: https://support.processstudio.com
Target: New window

Result: The user clicks on "Documentation" → The link opens in a new window.

Organize Tabs​

The order of tabs in Process Studio corresponds to the display order in the web application.

  • Move Up (⬆️): Moves the tab up in the list (to the left in the bar).
  • Move Down (⬇️): Moves the tab down in the list (to the right in the bar).
  • Delete (❌): Removes the tab from the bar.

[!TIP] Place the Home Portal as the first tab so that the user arrives directly on it when connecting.

Step 4: Profile Association​

The Associated profiles section defines which users will have access to this navigation bar.

Configuration​

  1. In the Associated profiles section, select one or more profiles.
  2. Use * to make the bar accessible to all profiles.

Examples:

Associated profilesWho sees the barUsage
*All usersStandard bar for everyone
"Admin"Administrators onlyAdministration bar
"Quality"Users with Quality profileSpecialized Quality bar
"Admin", "Manager"Administrators AND ManagersManagement bar

[!NOTE] If a user has multiple profiles, they will see the first navigation bar associated with their primary profile.

Step 5: Save​

Click on Save (💾).

The navigation bar is now created and accessible to users with the associated profiles.

Verification​

To verify that the bar works:

  1. Connect to the web application with a user account having the associated profile.
  2. Verify that the navigation bar displays at the top of the page.
  3. Test each tab:
    • Navigator: Do the headers and views display?
    • Portal: Does the portal page load?
    • URL: Does the link open correctly?

Best Practices​

1. Tab Order​

Recommendation:

  1. Home portal (if you have one) first.
  2. Specialized tabs (Documents, Quality, Finance, etc.).
  3. Administration tabs last.

Example:

1. Home (Portal)
2. My Documents (Navigator)
3. Quality (Navigator)
4. Administration (Navigator - visible to Admin only)

2. Number of Tabs​

  • Limit to 5-7 tabs maximum to avoid overload.

3. Naming​

  • Short titles: "Home", "Documents", "Quality" (not "Application home page").
  • Consistency: Use the same conventions everywhere.

4. Profiles​

  • One bar per profile: Create dedicated bars rather than one overloaded bar visible to all.
  • Profile *: Minimal bar for everyone.
  • Specific profiles: Enhanced bars according to roles.

5. Test​

  • Connect with different user accounts.
  • Verify that each profile sees the right bar.
  • Test all tabs.

Complete Workflow: From View to Bar​

To create complete navigation from A to Z:

Step 1: Create Views​

  1. Navigation → Views → New.
  2. Configure views (Selection, Columns).
  3. Examples: "All", "In Progress", "Validated".

📄 Guide: Creating Views

Step 2: Create Navigator​

  1. Navigation → Navigators → New Navigator.
  2. Add headers.
  3. Add views to headers.
  4. Check available forms.

📄 Guide: Creating Navigators

Step 3: Create Navigation Bar​

  1. Navigation → Navigators → New Navigation Bar.
  2. Add tabs (Navigators, Portals, URLs).
  3. Organize tab order.

📄 You are here!

Step 4: Associate to Profiles​

  1. Select user profiles.
  2. Save.

Step 5: Test​

  1. Connect to the web application.
  2. Verify that the bar displays.
  3. Test all tabs.

See also: