Jump to content

Hiding links in navigation based on the authentication


Recommended Posts

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.
Link to comment
Share on other sites

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:

admin view.png

user view.png

Link to comment
Share on other sites

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:

1284104222_reportadminview.thumb.png.c68e74024e66441982adf770543cf323.png

 

User view can see the table without Agent Name column:

1583659454_reportuserview.thumb.png.d1569f4609caa45b8945b82b77e4f056.png

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>

 

 

Link to comment
Share on other sites

  • 3 weeks later...

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
Reply to this topic...

×   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...