Customizing the Navigation Menu Based on User Roles

2 minutes to read

You can adjust your navigation menu depending on the roles of your users. For example, for a real estate listing application, you can configure different navigation bars for administrators and agents, making agent management menu available to admins only.

Sample navigation menu with customized options limited to only those available for agents.

Agent view

Sample navigation menu with customized options for admins.

Admin view

Steps:

In your application, create an app parameter for each role that needs a separate navigation menu:
1. From the Type dropdown, select Long Text.
2. In the Value field, perform one of the following actions:
  - Create your navigation menu.
  - Clear the Enable HTML editor checkbox and paste your navigation menu code.
    If your pasted code has line breaks, tab characters, or double spaces, revise it using an HTML compression tool (like textfixer.com) and paste the compressed code again.
3. Save the changes by clicking Apply.
Repeat step 1 to create app parameters for all the roles that need a navigation menu.
In our example, we are customizing the navigation for Admin and Agent roles.
Create or edit an existing DataPage. Add Header & Footer.
In the header, disable the HTML editor and paste the following code:

Note: In this example, the style of the navigation menu is configured in the header for consistent styling. You can optionally customize styles in the app parameters to implement style differences.
Save the DataPage.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support, or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<div id="menu"></div>

<script>
document.addEventListener('DataPageReady', function (event) {
if("[@authfield:Role]" == "Admin"){
document.getElementById('menu').innerHTML = `[@app:Admin]`;
}
else if ("[@authfield:Role]" == "Agent"){
document.getElementById('menu').innerHTML =  `[@app:Agent]`;
}
});
</script>