Showing/Hiding menu based on users details

Get Help
1

This guide is for people who are looking to hide or show menu options based on some data from the logged in users data.

The easiest way to manage this is to create separate menu blocks for each type of category you want to show or hide.

In my example I have used the List(no images) component. I have dropped 3 instances of that component each for 3 different types of users.

image
image349×778 17.1 KB

The first block is shown to all users all the time. The next 2 blocks are only shown if the logged in user is from the IT department or an Admin respectively.

This all depends on what data is set against each user in the data source. In this example I have the following details set but it can obviously be anything specific to your app.

image
image1051×78 3.98 KB

The following classes need to be added to the HTML so that it can be hidden. I added the standard-user, admin-user and IT-user classes.

<fl-simple-list cid="7737868" class="standard-user"></fl-simple-list>
<fl-simple-list cid="7739104" class="admin-user"></fl-simple-list>
<fl-simple-list cid="7739191" class="IT-user"></fl-simple-list>

Then use the following CSS to hide the relevant list blocks:

.fl-widget-instance.admin-user{
  display: none!important
}

.fl-widget-instance.IT-user{
  display: none!important
}

The following JS is need to show the elements based on the logged in users data:

Fliplet.User.getCachedSession().then(function (session) {
  var user = _.get(session, 'entries.dataSource.data');

  if (!user) {
    return; // user is not logged in
  }

  if (user.Department === 'IT'){
    $('.fl-widget-instance.IT-user').attr('style','display: block !important');
  }
  
  if (user.Admin === 'Yes'){
    $('.fl-widget-instance.admin-user').attr('style','display: block !important');
  }
});
2

My previous post was for list item style menu. That one is a little simpler to use. This following example is for Metro style grids. Showing/hiding this is a little more complex due to the dynamic sizing nature of this metro menu type. In order to achieve you will need the following:

First add all the metro grids to your screen as separate components intended for different groups of logged in users. Then wrap each metro grid in a div whose class name you can set relevant to what is being hidden for e.g. in my case there are 3 separate grids aimed for different departments.

This is my HTML

<div class="IT">
  <fl-metro cid="7975326"></fl-metro>
</div>

<div class="HR">
  <fl-metro cid="7975329"></fl-metro>
</div>

<div class="Marketing">
  <fl-metro cid="7975330"></fl-metro>
</div>

You need the following CSS:

//this will make the div's above invisible on load 
 .IT, .HR, .Marketing{
  opacity: 0;
}

//this will ensure that all grids are visible in edit mode in Fliplet Studio. 
 .mode-interact .IT, .mode-interact .HR, .mode-interact .Marketing{
  opacity: 1;
}

Then in the page JS you need to write IF statement’s as above to both set the desired div to visible and hide all the others.

Fliplet.User.getCachedSession().then(function(session) {
  var user = _.get(session, 'entries.dataSource.data');
  if (user.Department === 'IT') {
    //show IT menu
    $('.IT').css('opacity', 1);
    //hide all others
    $('.admin').hide();
    $('.HR').hide();
    $('.Marketing').hide();
  }

  if (user.Department === 'HR') {
    //show HR menu
    $('.HR').css('opacity', 1);
    //hide all others
    $('.admin').hide();
    $('.IT').hide();
    $('.Marketing').hide();
  }

  if (user.Department === 'Marketing') {
    //show marketing menu
    $('.Marketing').css('opacity', 1);
    //hide all others
    $('.admin').hide();
    $('.IT').hide();
    $('.HR').hide();
  }
  
});
1 Like
3

Can I ask, how would you use this approach while utilizing MS365 Sign on approach?

obviously using

wont work, however how should this be altered to enable showing content based on user’s login details? i tried doing this:

Fliplet.User.getCachedSession().then(function (session) {
var user = _.get(session, ‘entries.saml2.data’);

if (user === ‘xxx@xxx.com’){
$(‘.fl-widget-instance.IT-user’).attr(‘style’,‘display: block !important’);
}

});

but to no avail.
Any ideas?

thanks
Greg

P.S. how do i format code nicely on the forum?