Can someone help me add an admin only menu link?

Get Help
1

I have this app that has an admin menu, I need help adding some code to hide this menu item from non-admin users and ensure it looks good across the different menu types.

For context, my app is using the bottom menu. But I might need this in other apps with different menu styles.

Can someone help?

2

We have this code snippet that should be pasted into your Global JavaScript section:

function getUser() {
  return Fliplet.User.getCachedSession().then(function onSessionRetrieved(session) {
    if (session && session.entries) {
      if (session.entries.dataSource) {
        return _.get(session, 'entries.dataSource.data');
      }
      if (session.entries.saml2) {
        return _.get(session, 'entries.saml2.user');
      }
      if (session.entries.flipletLogin) {
        return _.get(session, 'entries.flipletLogin');
      }
    } else {
      return null;
    }
  });
}

//get user's details and if the user is an admin, append admin link to the menu options
getUser().then(function(user) {
  if (user) {
    console.log('Logged in user: ', user);
  }
  if (user && user.Admin && user.Admin === 'Yes') {
    addAdminLink();
  }
});

function addAdminLink() {
  var adminLinkHTML = '<li data-page-id="" class="linked admin-link focus-outline"><div class="fl-bottom-bar-icon-holder"><div class="fl-menu-icon"><i class="fa fa-lock"></i></div><div class="fl-menu-title"><span>Admin</span></div></div></li>';

  $('.fl-menu-body ul').append(adminLinkHTML);
  setAdminLinkVisibility();
  
  // Gets all pages and checks for the "Admin" page
  Fliplet.Pages.get().then(function(appPages) {
    let screenToRedirect = 'Admin Menu'; // CHANGE - 'Admin Menu' -> To the admin page title
    var adminPage = _.find(appPages, {
      title: screenToRedirect
    });
    if (adminPage) {
      var navigate = {
        page: adminPage.id,
        action: 'screen',
        transition: 'fade'
      };
      $('.admin-link').attr('data-page-id', adminPage.id);
      $('.admin-link').on('click', function() {
        $('.admin-link').addClass('active');
        Fliplet.Navigate.to(navigate);
      });
      if (adminPage.id === Fliplet.Env.get('pageId')) {
        $('.admin-link').addClass('active');
      }
      return;
    }
    throw new Error(`The screen with the name "${screenToRedirect}" doesn\'t exist.`);
  })
    .catch(function(error) {
    console.warn(error);
  });
  
  function setAdminLinkVisibility(){
    let mobileMenu = $('.fl-bottom-bar-menu-holder-mobile');
    let desktopMenu = $('.fl-bottom-bar-menu-holder-tablet');
    let menuElement = mobileMenu.css('display') !== 'none' ? mobileMenu : desktopMenu;
    let menuList = menuElement.find('ul');
    let menuMoreButtonExists = menuElement.find('[data-show-more]').length;

    if (!menuMoreButtonExists){ //if 'more' menu button doesn't exist -> show admin menu link
      let numberOfMenuItems = menuElement.find('li').length;
      let eachMenuItemWidth = (100/numberOfMenuItems).toFixed(1) + '%'; //for 8 menu items it has to be 12.5%

      menuList.css({
        '-ms-flex-wrap': 'nowrap',
        'flex-wrap': 'nowrap'
      });
    }
  }
}

To make it work you might need to change couple of variables, such as:

  1. Do not add admin menu link by default. It will be added to the menu dynamically if the user is logged in and an admin. For the rest of the users the link won’t be added
  2. user.Admin && user.Admin === 'Yes' - every user that has ‘Admin’ column with value equal to ‘Yes’ is considered an admin and will see the admin menu link
  3. let screenToRedirect = 'Admin Menu' - this is the name of the screen the user should be redirected to when clicking on the admin menu link
  4. var adminLinkHTML line of code should be replaced with the next HTML if you are using “Swipe” menu type
var adminLinkHTML = '<li data-page-id="" class="linked with-icon admin-link focus-outline" data-page-id=""><div class="fl-menu-icon"><i class="fa fa-lock fa-fw"></i></div><i class="fa fa-angle-right linked-icon" aria-hidden="true"></i><span class="internal-link buttonControl">Admin</span></li>';