Hide component based on logged-in user value

App Development
1

I’m trying to hide a button based on whether a logged-in user has credits left. I know this can be done with a java script, but I’m unsure how to write it. Can someone help?

Here is what I’m trying to accomplish - in English"

If {loggedInUser.Free Promo Available} < 1, hide component_180.

Than you!

2 Likes
2

Hey @mdykstra

My JavaScript skills are not great but can you try this?

TB.render('component_XX', function(data) {
    if ('{loggedInUser.Free Promo Available}' < 1) {
        $('.component-custom-class').addClass('hidden');
    }
});

It works by assigning a custom CSS class to a component.

EDIT

This might actually work a bit better…

TB.render('component_XX', function(data) {    
  	fieldValue = {loggedInUser.Free Promo Available}
  	   if(fieldValue < 1){
  	       TB.hideComponent('component_XX');
  	   }
})
3

Thank you, but is appears there is something wrong with the syntax.

Screen Shot 2022-02-14 at 11.16.34 AM
Screen Shot 2022-02-14 at 11.16.34 AM876×206 34.1 KB

4

What do the errors and warning say?

5

Screen Shot 2022-02-14 at 11.25.10 AM
Screen Shot 2022-02-14 at 11.25.10 AM988×160 27.8 KB

Screen Shot 2022-02-14 at 11.25.16 AM

6

Can you try saving the JS tab and see if the errors go away? I’m not seeing any issues when I copy/paste the code.

7

That didn’t change anything. I got this to work. There seems to be an issue when using the {loggedInUser.XXX} and also the field value of <1. I changed it to look for the filed # and 0, which works.
Thank you for your help!

TB.render('component_182', function (data) {
    fieldValue = data.record.field_1291;
    if (fieldValue === 0) {
        TB.hideComponent('component_180');
    }
});
8

Can you try first creating a variable for that value:

var loggedInPromoAvailable = '{loggedInUser.Free Promo Available}';

TB.render('component_XX', function(data) {
    if (loggedInPromoAvailable < 1) {
        $('.component-custom-class').addClass('hidden');
    }
});
9

Hi all :wave:

Just wanted to add that if you wanted to be more granular with this, for example, hiding an Export button based on the Logged In User’s Role.

var loggedInRole = ‘{loggedInUser.Role}’;

TB.render('component_XX', function(data) {
    if (loggedInRole === "Client") {
        $('.t-export-button').addClass('hidden');
    }
});

Don’t forget to replace component_XX with your specific component_ID