Hide/Show content based on the user type

Code Library
1

Create custom views for different user types

PRE-REQUISITES
For the following code examples to work, the app needs a login and a column in the user data source which decides the user type.

You may wish to show certain content or a component to a certain type of user only. This is particularly useful if you want to display admin only content. First, you will need to create the content you want on the screen and then use HTML, CSS, and Javascript to determine which user type can see the content.

The example below will hide a text link for any user that is not an admin.

We need to identify our text link in the HTML and give it a class so that we can reference it in the CSS and JavaScript. For example, a text link in Fliplet may look like this:

HTML

<fl-text cid="4175306">
    <fl-inline-link cid="4175308"></fl-inline-link>
</fl-text>

We can choose any class name we wish as long as it’s unique. For this example we’ll choose a class called “adminlink” and add it into the text link by adding

and closing the div at the end with
See below:

HTML

  <div class="adminlink">
    <fl-text cid="4175306">
      <fl-inline-link cid="4175308"></fl-inline-link>
    </fl-text>
  </div>

Then switching over to the CSS panel we can hide our text link by using the class name. The example below hides any element with the class name of “adminlink”:

CSS

.adminlink {

display: none;

}

The final piece of JavaScript code will allow us to assess the user type and display the text link based on that. The below example is assessing whether the user has a yes in the admin column. If the user is defined as an admin the text link will display.

JavaScript

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

  if (!user) {
    return; // user is not logged in
  }
  
  //Admin is the name of the column in the data source and 'Yes' is the value in the Admin column
  if (user.Admin === 'Yes'){
     $('.adminMenu').fadeIn(500); 
  }

});