Hide Columns Based on User Role

Showcase Tips and Tricks
1

Hey Tadabase community! :slightly_smiling_face:

Here’s another solution that you may find useful. This solution involves hiding columns based on the role of the logged-in user. This may be useful if some roles do not need to view certain columns on your table component.

Snag_a9ba1f7
Snag_a9ba1f7860×530 41.2 KB

:warning: Please note that this solution simply hides the value from the page so it can still be accessed if a user has some HTML knowledge. If the column must be secured from view for a certain role, we recommend creating separate secure pages per role to ensure that your data remains appropriately secure. :warning:

For an explanation on how to set this up, please see this video. If you’re interested in seeing this in action first, please go to 0:26 in the video where I begin with a demo.

Here is the JavaScript code utilized in the video. Please be sure to replace “component_10” and “Default Role” accordingly. Add the CSS class “role-hide” to the column(s) you’d like to hide as well!

TB.render('component_10', function(data) {
    if(!"{loggedInUser.Role}".contains("Default Role")){
        $('.role-hide').hide();
    }
});
5 Likes
2

Is it possible to use “does not contain”? If so, what is that syntax.

Thanks!

1 Like
3

Yes! Right now the logic in the condition checks if the user does not contain the “Default Role” and will hide the column if the user does not have the role.
!"{loggedInUser.Role}".contains("Default Role")

You can change the logic by removing the exclamation point from the beginning which would result in the code hiding the column if the user does contain the given role.

For further explanation on the logic above including information on modifying it, please see the video I linked in my original post. :slightly_smiling_face:

2 Likes
4

This is a neat trick - thanks for sharing @Lee

It would be epic if this was able to be done via column display rules in the future. :slight_smile:

2 Likes
5

Hi @Lee
I find this tool to be really helpful. However, there is a flaw that allows users without the required roles to see the hidden columns. If I click the refresh icon to the right of the search box, the hidden fields are revealed (although the headers are misaligned). If I refresh the entire window, they are hidden again. Is there a way to hide the refresh icon?
image

6

@Henry

I think you can use this css to make the refresh button invisible:

.t-refresh-button {
    visibility:hidden;
}
1 Like
7

@Peter Excellent! That’s perfect. Thanks!