Navigation Menu that varies by user or user role?

[AccessNerd]

Hi All,

Noob here. Is there any way to create a navigation menu using the app parameters method that can change by the user role?

For example a standard user may have "Add New | Reporting" where as an admin may have "Add New | Reporting | Users | Advanced Tools" etc.

I'm open to other ideas, but the app parameters is such an easy implementation. I'm a Caspio noob so any assistance is greatly appreciated.

Thanks.

[Barbie]

Hi @AccessNerd,

You may want to check this article: https://howto.caspio.com/authentications-and-connections/authentication/record-level-security/restrict-access-to-data-by-user-or-role/

Also, you need to add multiple app parameters base on what you want to display. 

I hope this helps. 

- Barbie

[CoopperBackpack]

Hello @AccessNerd,

As Barbie mentioned above first of all you need to have a Role field in your Users table that is the data source for your Authentication. 

Then you need to create 2 different app parameters. Here is the tutorial video that can be helpful: Adding a Navigation Menu to Caspio DataPages https://www.youtube.com/watch?v=XCxGl1aUixk

And the last step is to add the JavaScript code to the Header section of the DataPage.

<div id='navMenuConditional'></div>

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    
     if ('[@authfield:role]' == 'Admin') {
          document.querySelector('#navMenuConditional').innerHTML = '[@app:Nav_menu_admin]'
       } else if ('[@authfield:role]' == 'Agent') { 
         document.querySelector('#navMenuConditional').innerHTML  = '[@app:Nav_menu_agent]'
       }

});
</script>

Please replace the field name ([@authfield:role]), roles names (Admin, Manager), app parameters names with your local names.

Feel free to update this thread if you have any questions.  

 

 

 

[Barbie]

Hi @AccessNerd,

In addition to what I mentioned above, you may consider using Rules as well which will check what is the role if the user who's logged in then you can configure which section you want to hide. But Rules is only applicable in Submission and Details DataPage. Please refer to this article: 
https://howto.caspio.com/datapages/forms/conditional-forms/

- Barbie

[AccessNerd]

thanks to both of you, I'll give this a try. 

[AccessNerd]

On 10/29/2020 at 4:27 AM, CoopperBackpack said:

Hello @AccessNerd,

As Barbie mentioned above first of all you need to have a Role field in your Users table that is the data source for your Authentication. 

Then you need to create 2 different app parameters. Here is the tutorial video that can be helpful: Adding a Navigation Menu to Caspio DataPages https://www.youtube.com/watch?v=XCxGl1aUixk

And the last step is to add the JavaScript code to the Header section of the DataPage.

<div id='navMenuConditional'></div>

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    
     if ('[@authfield:role]' == 'Admin') {
          document.querySelector('#navMenuConditional').innerHTML = '[@app:Nav_menu_admin]'
       } else if ('[@authfield:role]' == 'Agent') { 
         document.querySelector('#navMenuConditional').innerHTML  = '[@app:Nav_menu_agent]'
       }

});
</script>

Please replace the field name ([@authfield:role]), roles names (Admin, Manager), app parameters names with your local names.

Feel free to update this thread if you have any questions.  

 

 

 

The code above looks pretty spot on. I'll have to see if I can make that work. Thanks for that. 

[PDSRQ]

I ammended it below, but it doesn't work.   Does anyone have any ideas?  The table name is Sarasota_Users_1 and the filed is Role.  Different types of roles listed are :  Finance, Cost Center, Admin.  Thanks for any help you can provide as I am trying to add this to the header.  (Also, does anyone know if you could take the script below and make it an App?)

<div id='navMenuConditional'></div>

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    
     if ('[@authfield:Sarasota_Users_1_Role]' == 'Finance') {
          document.querySelector('#navMenuConditional').innerHTML = '[@app:FiscalNavigation2022]'
       } else if ('[@authfield:Sarasota_Users_1_Role]' == 'Cost Center') { 
         document.querySelector('#navMenuConditional').innerHTML  = '[@app:CostCenterNavigation2022]'
       }

});
</script>

[ParkLoey]

Hiyaa! Just wanted to add this thread I found. I think it's the same use case so you can use it as extra reference:

 

[Meekeee]

Hi - sharing this new post! 

 

[Meekeee]

Hi @PDSRQ- you can check this recent post: 

 

[autonumber]

Hello! Just to update this post, I had a similar workflow where I have navigation menu on my app parameter and used the script provided here however, it didn't work. After several testing, I noticed that if your navigation menu on the app parameter has style on it or <style> tag, the .innerHTML wil not render the app parameter. You will need to remove the styles on the app parameter and instead place it on the header of the DataPage. 

Hope this helps!