AnsweredAssumed Answered

Link Addition to the Global Navigation Menu

Question asked by Matt Watson on Aug 1, 2017
Latest reply on Aug 2, 2017 by Matt Watson

I'm attempting to use JavaScript (added through the Theme Editor) to put an additional item in the Global Navigation menu that appears only for users who are members of a certain user group. For this example, I'm using a group called Advisors (for teachers who are academic advisors to students). Because ENV doesn't contain information about a user's groups, I'm using an XMLHttpRequest to retrieve the groups.

 

I'm requesting guidance to see if what I've done is a good way to accomplish this task. It is working, but any advice on how I might streamline things would be much appreciated.

 

First, I have a function called addMenuItem.

// Adds a link to the bottom of the Gloabl navigation menu.
// text: text to appear within the link
// path: url for the link
// iconName: name of icon to pull from Canvas icon library
function addMenuItem (text, path, iconName) {
linkId = text.split(' ').join('_');
var itemHtml = '<li class="ic-app-header__menu-list-item ">'
+ '<a id="global_nav_' + linkId + '_link" href=' + path + ' class="ic-app-header__menu-list-link">'
+ ' <div class="menu-item-icon-container" aria-hidden="true" role="presentation">'
+ ' <i class="icon-' + iconName + '" style="display: block;"></i>'
+ ' </div>'
+ ' <div class="menu-item__text">' + text + '</div>'
+ '</a>'
+ '</li>';
$('#menu').append(itemHtml);
}

The current user's list of groups is checked for one named 'Advisors' with the following functions.

var accessToken = 'ACCESSTOKEN_ACCESSTOKEN_ACCESSTOKEN_ACCESSTOKEN_ACCESSTOKEN_ACCESSTOKEN'
     xmlhttp = new XMLHttpRequest(),
     method = 'GET',
     groupsEndPoint = 'https://myschool.instructure.com/api/v1/users/self/groups?access_token=' + accessToken;

// Check (Array) groups for one with named (String) groupName
function userIsInGroup(groupName, groups) {
     for (var i = 0; i < groups.length; i++) {
          if (groups[i].name === groupName) {
               return true;
          }
     }
}

// Make the API call, read the groups, check for group named (String) groupName,
// & return boolean indicating group membership.
function groupCheck(groupName) {
     var memberFlag = false;
     xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            memberFlag = userIsInGroup(groupName, JSON.parse(xmlhttp.responseText));
       }
     };
     xmlhttp.open(method, groupsEndPoint, false);
     xmlhttp.send(null);
     return memberFlag;
}

// If current user is the member of 'Advisor' group, then give them the link.
if (groupCheck('Advisors') === true) {
     addMenuItem('Advisor Resources', 'path-to-advisor-resources', 'paperclip', '_this');
}

I should note that I do recognize that users could just use the Groups fly out tray, but I'm kind of just practicing here.

 

Oh, a second question: should I be worried about the deprecated Synchronous XMLHttpRequest?

 

Thanks!

Outcomes