Show columns based on the Users Role

Here’s a video on how to set this up: 03.16.2022-13.08.59

JavaScript

TB.render('component_ID', function(data) {
    if('{loggedInUser.Role}' === 'Management'){
        $('.management').removeClass('hide');
    } else if ('{loggedInUser.Role}' === 'Packaging'){
        $('.packaging').removeClass('hide');
    } else if ('{loggedInUser.Role}' === 'Shipping'){
        $('.shipping').removeClass('hide');
    } else if ('{loggedInUser.Role}' === 'Retail'){
        $('.retail').removeClass('hide');
    }
});

After recording the video above, I found a similar post. I’ll link it here for reference.

3 Likes

@Chem I tried to do this for 2 roles, I would like to give access, so I used the double pipe || for or. But I used the solution of Lee. Alas this only worked for the first role, but not for the second role. I am sure this has to do with my lack of understanding of NOT, AND and OR, but could you help here?

Why is this button only visible for “Directie” and not for “CRM-OM” role?

TB.render(‘component_3’, function(data) {
if(!"{loggedInUser.Role}".contains(“Directie”||“CRM-OM”)){
$(’.hideButton’).hide();
}
});

Hey @Peter,

I believe you want to do this.

 TB.render('component_ID', function(data) {
    if(!"{loggedInUser.Role}".contains('Directie') || !"{loggedInUser.Role}".contains('CRM-OM')){
        $('.hideButton').hide();
    }
});

@Chem The solution I was looking for is a bit different.
So the idea I followed was: hide the button for all roles.
Then show the button if the role is for “Directie” or for “CRM-OM”.
This is what came out:

TB.render('component_3', function(data) {
    $('.hideButton').hide();
    if("{loggedInUser.Role}".contains("Directie")||"{loggedInUser.Role}".contains("CRM-OM")){
        $('.hideButton').show();
    }
});

And this works as intended.

1 Like