Jump to content
  • 0

Navigation Menu that varies by user or user role?


AccessNerd
 Share

Question

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.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 1

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.  

 

 

 

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
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. 

Link to comment
Share on other sites

  • 0

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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...