Add Admin only menu option

Get Help
1

Hi
I would like to add a Menu option(In the hamburger menu from menu options) that can only be viewed and opened by an admin. I don’t need an entire admin menu link since there is only one screen that needs to be admin secured. Is this possible? And if so how can I implement it.

thanks!

2

Hi Catalina,

The easiest way to do this is to add the admin link via Studio and then show it if the logged in user is an Admin. For an added layer of protection you can add a App security rule so that even if you were to show the menu item a non admin would not be able to access the screen.

The steps to achieve this should be as follows:

  1. Use the Menu configuration option on the right hand side bar in Studio to add the admin link and link to the relevant screen in studio.
  2. Add the following code to Global JS. This code will loop through the menu and check if the logged in user is an admin and then hide the menu option if the logged in user is not an admin.
Fliplet.User.getCachedSession().then(function(session) {
  var user = _.get(session, 'entries.dataSource.data');

  if (!user) {
    return; // user is not logged in
  }
  $('.linked.with-icon.focus-outline').each(function(index, value) {
    if (
      $(this)
        .text()
        .trim() === 'Admin'
    ) {
      //If the menu link is called "Admin"
      if (user.Admin !== 'Yes') {
        //If the logged in user is not an admin i.e. they do not have Admin = Yes in the Login DS
        $(this).hide();
      }
    }
  });
});
  1. For an extra layer of security you can add a custom app security rule that prevents unauthorised access. This rule needs to be added to the custom security rule section. Documentation: Securing your apps | Fliplet Developers Documentation 
var menuScreen = 123456; //Change to page id of menu/home screen
var hasSession = session && session.entries && session.entries.dataSource;
var isAdmin = hasSession && session.entries.dataSource.data['Admin'] === 'Yes';
var isAdminPage = page.title.indexOf('Admin') === 0;
var error = false;

if (isAdminPage && !isAdmin) {
  error = true;
}

if (isAdmin) {
  error = false;
}
if (error && page.id !== menuScreen) {
  navigate = { action: 'screen', page: menuScreen, transition: 'slide.left' };
}

Hope this helps,
Deb