Hide Edit Button in Table Based on Connected Filed of User

App Development
1

Greetings TB Community-

I am attempting to hide an table “edit” button based on a field in the table that connected to the logged in user. However, when I attempt to use a display rule, there is no option to available to choose for when X is connected to Logged In User Field.

2023-06-12_15-43-13
2023-06-12_15-43-131208×444 132 KB

I’ll take any suggestions but would prefer something a bit more secure than JS (since it could be changed in the browser).

Any ideas?
Adam

2

Display rules seem to work based on fields that are in the tadabase table and in the display table. You can include the connection field you your users table in the display table ( and hide it with CSS).
Table rules can then run on this connection field and hide the update/edit button.

Of course someone could easily {display} the connection field, but that might not be a problem.

I have used this in my app. I know that the actual edit/update page is accessible to specific users anyway, so all I am in danger of exposing is the link.

3

@SafetyUniversity you can do this with JavaScript.

  1. Add a custom class to that edit column in the table.

    image
    image1920×937 96.4 KB

  2. In the Javascript, add a new varaible to get the value of the logged in user from that field. In my example, I’ll just get the emali address:

var myRole = "{loggedInUser.Email}";

Next, you check that value and if it matches a specific result, have it hide the column:

TB.render("component_3",  function(data) {
    if(myRole == "moe@tadabase.io") {
        $('.myEditColumn').hide();
    }
});

image
image1008×279 13.5 KB

4

Logged-in users can only edit records associated with their own account.

TB.render('component_3', function(data) {
    setTimeout(function(){
        let currentUserEmail = '{loggedInUser.Email}';
        let userConnectedFieldSlug = "YOUR TABLE CONNECTION FIELD SLUG";

        jQuery.each( data.records, function( i, record ) {
            if(record.hasOwnProperty("raw") && record["raw"].hasOwnProperty(userConnectedFieldSlug) && record["raw"][userConnectedFieldSlug].hasOwnProperty("email")){
                let emails = record["raw"][userConnectedFieldSlug]["email"];
                if(typeof emails === 'object' && emails !== null && Object.values(emails).indexOf(currentUserEmail) < 0) {
                    data.ele.find("tr:eq("+(i+1)+") .edit-button a").remove();
                }
            }
        }); 
    });
});

image
image1262×826 28.7 KB

2 Likes
7

Thank you @moe and @christopher93!

Although my needs were not quite aligned with your examples (due to my initial post not being clearly written), @kruizf201 helped out with some great JS scripting.

TB.render(‘component_94’, function(data) {

var userAssociatedLocations = "{loggedInUser.Associated Locations}";

var incidentAffectedLocations = Object.values(data.record.field_62);

var userContainsAffectedLocations = incidentAffectedLocations.some(function(value) {
  return userAssociatedLocations.includes(value);
});

if (userContainsAffectedLocations) {
    console.log("The User Contains Affected Locations");
    setInterval(function(){
        $(".user-based-view").show();
    });
} else {
    console.log("The User Does Not Contains Affected Locations");
    setInterval(function(){
      $(".user-based-view").hide();
  });
}

});

Details for anyone that is looking to adapt to your application:

  • component_94 is the component where the “Associated Locations” field is located on the page.

  • field_62 is the field slug for the Associated Locations in the Users table

  • user-based-view is the CSS class to hide the column in the desired table

Hope this helps,
Adam

1 Like