Hiding links in navigation based on the authentication

[Inscriptor]

How can I hide some links in navigation menu (I was using App Parameters for this), and also in datapage based on authentication?
 

If the user is not flagged as administrator, I don't want to show all options that administrator has.
I don't want to make two separate datapages for both regular users and administrators, can it be done in one datapage?
Would appreciate your suggestions.

[KlisaN137]

What you can do, if you want to use only one DataPage and show different navbars for users, is to have the "Users" table  with the  Yes/No field called Admin to check if user is Administrator, and to use Authentication based on the table.

Then, make a  Navbar in App Parameter like this:

<p class="admin-navbar">
  <a href="YOUR-URL">OPTION 1</a>
  <a href="YOUR-URL">OPTION 2</a>
  <a href="YOUR-URL">OPTION 3</a>
  <a href="YOUR-URL">OPTION 4 JUST FOR ADMIN</a>
  <a href="YOUR-URL">OPTION 5 JUST FOR ADMIN</a>
</p>

<p class="user-navbar">
  <a href="YOUR-URL">OPTION 1</a>
  <a href="YOUR-URL">OPTION 2</a>
  <a href="YOUR-URL">OPTION 3</a>
</p>

We are making two Navbars, and we will filter out based on current user's field "Admin" which of these to show. So make a Footer in App Parameters with the following code:

<script>
  
document.addEventListener('DataPageReady', function (event) {
     /* We are selecting both navbars */
          let navAdmin = document.querySelector('.admin-navbar');
          let navUser = document.querySelector('.user-navbar');
     /* We need to remove one only if both are present, this is to prevent console errors if reloading the page */
          if(navAdmin && navUser){
                     let navParent = navAdmin.parentElement;
                     '[@authfield:Admin^]'=== 'Yes' ? navParent.removeChild(navUser) : navParent.removeChild(navAdmin)
          }
});

</script>

Now just insert Navbar from App Parameters in DataPage Header section, and Footer from App Parameters into DataPage Footer section, and you'll see either admin-navbar or user-navbar based on the user authentication.

Here is the result:

[KlisaN137]

If we want to show some column in the Tabular Report just for the user who is also Administrator, but for the regular Users we want to hide it, below is the example (note that this is one Report DataPage - Tabular Report):

Admin view can see the Agent Name column:

 

User view can see the table without Agent Name column:

In order to achieve this functionality, we need to add the following code to the DataPage Result page footer section:

<script>
document.addEventListener('DataPageReady', function (event) {
  
    /* If user is not Admin, we will remove the column */
        if('[@authfield:Admin^]'==='No'){
                     /* We need to select Parent node of the Table Label and remove the desired child element (nth-child(2)) */
                     let agentLabelParent = document.querySelector('tr[data-cb-name="header"]');
                     let agentLabel = document.querySelector('tr[data-cb-name="header"] th:nth-child(2)');
                     agentLabelParent.removeChild(agentLabel);
                     
                     /* There can be multiple rows in the Tabular Report, so we need to select them all */
                     let agentNameParents = document.querySelectorAll('tr[data-cb-name="data"]');
                 
                     /* Using the loop to pass through each row, and remove the entry (nth-child(2)) we don't need */
                     agentNameParents.forEach(parent => {
                              let agentName = parent.querySelector('tr[data-cb-name="data"] td:nth-child(2)');
                              parent.removeChild(agentName);
                     });
         }                
});

</script>

 

 

[Inscriptor]

Thanks a lot. 
Let me try these steps.

[Inscriptor]

Thanks a lot, KlisaN137!
This worked for my app. 

Have you any idea if  it is possible to change the navbar orientation from horizontal to vertical? 

[ParkLoey]

Hi @Inscriptor maybe you can use the samples here as reference  

https://www.w3schools.com/css/css_navbar_vertical.asp

[RuisiHansamu]

Hi there, just wanted to share this forum post as well and it may help others out:

https://forums.caspio.com/topic/16540-navigation-menu-that-varies-by-user-or-user-role/