Hiding/revealing element based on user's privileges - Fliplet

Question

I need help figuring out how to make element either appear or hide, based on user status. Normal user = hide element, admin = show element.

I have to do this in Fliplet (unfortunately) and I know not everything can be done in this environment or at least, not easily. This little issue, I have been stuck on for a number of hours. My latest attempt at changing it looks like this (plus associated HTML and CSS):

JS

Fliplet.User.getCachedSession().then(function(session) {

var user = _.get(session, 'entries.saml2.user');
  var typeColumn = 'Admin'; //the name of the column in the data source

if (user === 'admin1(changed ofcourse)' || user === 'admin2(changed ofcourse)') {
    $('.adminlink').fadeIn(400, function() {
      document.getElementsByClassName("adminlink").style.display='block';
    }
      );
  } else {
    $('.adminlink').fadeOut(1, function() {
      document.getElementsByClassName("adminlink").style.display='none';
    }
      );
  }
});

CSS

.adminlink {
  display: none !important;
  width: 100%;
}

HTML

I have of course tried initially following guides and code snippets from Fliplet's own knowledge based but they just never worked.

I tried different JS approaches to this and even CSS changes, but nothing seems to work. The element, for some reason, doesn't want to respond, no matter how its called i.e. by id, class etc.

ANY ideas, will be appreciated!

Thank you Greg

EDIT: This approach uses office 365 integrated login (works fine), however initially there was a Fliplet's based login system (different code in JS) and while still was working fine, the hiding/showing of elements didn't work either.

user_11271927 · Answer

In case anyone else needs this in the future.

    Fliplet.User.getCachedSession().then(function(session) {
  var user = _.get(session, 'entries.saml2.user');
    
  var admin = 'admin@admin.com';
  var admin2 = 'admin2@admin.com';
  if (user.email === admin || user.email === admin2) {
    $('.panel-group').attr('style','display: block !important');
  }
});

CSS has to remain

.panel-group {
  display: none !important;
}

and the relevant links to the Fliplet's API documentation that helped me put this together. Yes it has been implemented in production and tested. Any qeustions? hit me

https://developers.fliplet.com/API/integrations/sso-saml2.html#exposing-data

https://developers.fliplet.com/API/components/form-builder.html#formloadfunction

Hiding/revealing element based on user's privileges - Fliplet

1 Answers