Designing an Interactive and Dynamic Menu Bar in Qodly application

In this week’s blog, we take a look at navigation. Navigation is a key element of any web application. A well-structured navigation system enables users to quickly find what they need and enhances their overall experience.

With 4D Qodly Pro, managing navigation is both simple and flexible. Using the Page Loader component, you can dynamically load pages based on user actions.

In this article, we will explore how to set up an efficient navigation bar using 4D Qodly Pro. We will use our Performance Review application as an example, which you can download from GitHub (link to be added). We will cover its design, interactions, and permission management to create a seamless experience tailored to each user role.

Performance Review Application

Loading Pages with the Page Loader

Loading a page with 4D Qodly Pro is intuitive. Simply drag and drop the Page Loader component onto your interface and associate it with a text-based datasource.

The Page Loader automatically loads the page corresponding to the value stored in the datasource. By updating this value, users can navigate seamlessly between different pages in the application.

Choosing the Right Navigation Type

Now that we understand how to load pages using the Page Loader, we need to determine how to dynamically modify this datasource to facilitate smooth and intuitive navigation.

There are three primary types of navigation:

• Menu bar: A traditional, always-visible navigation bar ideal for quick access.
• Hamburger menu: A collapsible menu accessed via an icon, perfect for mobile applications.
• Sidebar menu: Positioned on the side, suitable for complex applications with multiple sections.

 

The navigation type should be chosen based on the specific needs of your application and target users. A well-designed navigation system improves user experience and ensures easy access to key functionalities.

For the Performance Review application, we opted for a classic menu bar. This approach allows quick access to different sections while ensuring a smooth experience on both desktop and tablet devices.

Creating a Navigation Bar

Our navigation bar is designed to be simple, efficient, and user-friendly. Here are its main features:

• A fixed-height navigation bar with a sticky option to remain visible at the top.
• The application’s icon and name.
• A Human Resources dropdown menu containing:
  • Collaborator
  • Review
  • Training
• A Manager button.
• A Collaborator button.
• The name of the logged-in user.
• A Logout button.

 

 

Creating the top Bar

The navigation bar is displayed at the top of the screen at all times. To achieve this, we create a style box with a sticky property:

• position: sticky ensures the bar remains visible during scrolling.
  
• top: 0 and left: 0 position the bar at the top-left of the page.

 

 

Adding the Application Icon and Title

We use a style box with Flexbox to align elements and maintain responsiveness across various screen sizes.

Inside this box:

• An Image component for the icon.
• A Text component to display the application name.

Creating the menus

A second style box (using Flexbox) is added to contain both the dropdown menu and the two navigation buttons.

Creating the “Human Resources” Dropdown Menu

To create the dropdown menu, we use a custom component called Popover. You can download this component from GitHub.

• Drag and drop the Popover component onto your page.
• In the menu section, add a static text titled Human Resources.
• In the overlay section, insert three buttons labeled Collaborator, Reviews, and Trainings.

For more details on custom components, refer to our previous blog post: “Extend our Qodly application with custom components”

Adding the Manager and Collaborator button

Simply add two separate buttons labeled “Manager” and “Collaborator.”

Creating the logged info area

A third style box (using Flexbox) is used to display the logged-in user’s name and provide a logout action.

• A Text component, bound to the username datasource, displays the logged-in user’s name on the right side of the navigation bar.

• The Logout button allows users to quickly sign out. On the button’s onClick event, assign the standard authentication logout action.

For more details on authentification, check out this previous blog post: Integrating user authentication in your Qodly applications.

Implementing Navigation Interactions

Navigation is managed through a variable called pageName, which acts as the datasource for the Page Loader.

• Each menu element is associated with an action that updates the pageName value.
• When the user clicks a button, the corresponding page is dynamically loaded.
• For each button, we apply the Set Datasource action on the onClick event:
  • pageName = “CollaboratorPage” to display the Collaborator page.
  • pageName = “ManagerPage” to display the Manager page.
  • And so on…

This approach ensures a smooth and fast navigation experience without reloading the application.

Managing Permissions

Not all menu buttons are visible to every user. Their visibility depends on user roles:

• Collaborator: Access only to the Collaborator page.
• Manager: Access to Manager and Collaborator pages.
• HR: Access to all pages.

We use state management to dynamically control which options are visible based on the logged-in user’s role.

Handling Multiple Roles

A Manager has a dual role:

• As a Collaborator, they complete their own performance review.
• As a Manager, they review and validate the performance reviews of their team members.

To handle this, we define two datasources:

• userInfo.maxRole: Represents the highest role assigned to the user.
• userInfo.role: Represents the currently active role the user is using.

 

Populating the Datasources:

During authentication, using the ds.authentify() function, user information is stored in session storage:

var $obj : Object
$obj:=Session.storage

If ($obj.Employee=Null)
  Use ($obj)
   $obj.Employee:=New shared object
  End use
End if

Use ($obj.Employee)
  $obj.Employee.ID:=$employee.ID
  $obj.Employee.name:=$employee.Firstname+" "+$employee.Lastname
  $obj.Employee.role:="Collaborator"
  $obj.Employee.maxRole:="Collaborator"
End Use

A helper function getUserInfo() is provided to retrieve user details within Web page:

exposed Function getUserInfo : Object
  If (Session=Null)
   return Storage.Employee
  Else
   return Session.storage.Employee
  End if

On the login button’s onClick event, both functions are called:

• ds.authentify()
• ds.getUserInfo()

 

Creating and Configuring States:

• Click on the “+” button, to add states.

 

 

• Create a maxManager state, where the Human Resources menu is hidden (display: none).

 

 

• Create a maxCollaborator state, where Human Resources, Manager, and Collaborator options are hidden. Since a Collaborator only has access to one page, the navigation menu becomes unnecessary.

 

 

Define conditional display rules:

We want:

• If userInfo.maxRole = “hr”, display the default state.
• If userInfo.maxRole = “manager”, display the Manager state.
• If userInfo.maxRole = “collaborator”, display the Collaborator state.

These rules are easily implemented using Qodly Studio’s conditional state configuration editor. 

For more details on state management, check out our previous blog post: Make your Qodly applications dynamic and interactive with states.

Other states exist to manage the menu, the login window, or the selected menu item. It’s up to you to explore how it is configured, and feel free to join us on the forum if you have any questions.

Optimizing for Different Screen Sizes

Our application is designed for both desktop and tablet usage. To ensure an optimal user experience, the navigation bar is fully responsive.

• Hiding certain elements when the screen is too small (e.g., application name and logged-in user’s name).
• Rearranging the menu into a column layout on smaller screens to maximize space.

 

Dynamic hiding of elements is managed via CSS media queries (e.g., using max-width), while Flexbox with the Wrap option ensures the menu automatically adjusts based on available space.

• Large screen

• Medium screen

• Small screen

For further insights into CSS customization in Qodly Studio, refer to our previous post: Customize your Qodly interfaces with CSS.

Next Steps

You now have the essential elements to create an interactive and dynamic navigation bar with 4D Qodly Pro.

We encourage you to share your implementations and ask questions on the 4D Forum to continue engaging with the community.