Global Nav Menu - Custom Tray

[robotcars]

Hello,

A recent Canvas update left a lot of institutions without the ability to add additional resources to their Canvas Global Navigation. Previous discussions include:

Custom JavaScript/CSS Changes Adding custom menu items https://community.canvaslms.com/ideas/4034-custom-menu-items-for-new-ui 

Source Code: https://github.com/robert-carroll/ccsd-canvas/tree/main/global-nav-custom-tray

README

This JavaScript will spawn and style (with CSS) DOM elements that mimic the Canvas global navigation tray, with animated easing for opening and closing the tray, and other interactions with the global navigation.

Features

• Custom tray name with tooltip
• SVG navigation icon included, or provide your own
• Links with optional description
• Footer text optional

Icon Size

Use the SVG element's width and height to set the icon size for the navigation tray icon.

26px is about the default. see #comment-157915

Role Based Conditions

Tray Limited To Role(s)

To create a tray that only shows up for certain roles, wrap the tray in an if condition that checks for role.

2 role example

if(ENV.current_user_roles.indexOf('teacher') >= 0 || ENV.current_user_roles.indexOf('admin') >= 0) { 
     // tray source here
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

1 role example

if(ENV.current_user_roles.indexOf('student') >= 0){
    $(document).ready(function() {
        ///* set tray title, icon, links and footer here *///
        ///*  for user role based conditions see README  *///
        var title   = 'Resources',
            svg     = '/pin-gregor-cresnar.svg',
            trayLinks = [
                { href: 'http://www.example.com/your-library', title: 'Library', desc:'Optional text description' },
                { href: 'http://www.google.com', title: 'Google' },
                { href: 'http://www.example.com/help-desk', title: 'Help Desk', desc:'Optional  text description' }
            ],
            footer  = 'Optional footer text, put whatever you want here, or leave it blank.';
            
        ///* options are above for convenience, continue if you like *///
        // tray source here
    });
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Tray for everyone, links by role

You can also create a tray that will appear for all users, but provide links (or even the tray name, icon, and footer), specific to the user role.

var title   = 'Resources',
    svg     = '/pin-gregor-cresnar.svg',
    // default links for all users
    trayLinks = [
        { href: 'http://www.example.com/your-library', title: 'Library', desc:'Optional text description' },
        { href: 'http://www.google.com', title: 'Google' },
        { href: 'http://www.example.com/help-desk', title: 'Help Desk', desc:'Optional  text description' }
    ],
    footer  = 'Default footer for all users';
    
// these links are appended to the tray by user role
if(ENV.current_user_roles.indexOf('teacher') >= 0 || ENV.current_user_roles.indexOf('admin') >= 0){
    trayLinks.push({ href: 'http://www.example.com/your-library', title: 'Teacher Library', desc:'Optional text description' })
    trayLinks.push({ href: 'http://www.google.com', title: 'Google' })
    footer  = 'Teacher/Admin Footer overwrites default';
} else if (ENV.current_user_roles.indexOf('student') >= 0) {
    trayLinks.push({ href: 'http://www.example.com/your-library', title: 'Student Library', desc:'Optional text description' })
    trayLinks.push({ href: 'http://www.google.com', title: 'Google' })
    footer  = 'Student Footer overwrites default';
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Credits for the included navigation tray icon - Pin

Pin by Gregor Cresnar from The Noun Project

https://creativecommons.org/licenses/by/3.0/

[robotcars]

Just one more step for clarification. I actually had this request last week too...

You want to be able to place the svg/path/code inline with the script, instead of hosting the file externally and pointing to it?

[martin_kabat]

Yes that is the idea.

I haven't had a chance to look for reliable server to host the images.I know that we had an issue with hosting in the past. Just out of interest, is there a reliable server for hosting that you would recommend?

[dbrace]

 @martin_kabat , I am not nearly as advanced as others are on this topic but I believe that you should not have any problems with where the image is stored as long as it is on a secure (https) host.  If the image is stored at an insecure (not-https) location, there will be problems with mixed content not displaying.

From other posts in the Canvas Community, I believe that admins have successfully stored images on their own instance of Amazon Web Services (which is the same host as Canvas) and not experienced any problems.

[robotcars]

I took some time to address a few requests and issues with this script:

• I've added support to allow SVG images to be used inline instead of externally
  - requested by  @millerjm ‌ and  @martin_kabat ‌, and probably others
• I've added the ability to use Instructure UI icons
  - requested by  @JACOBSEN_C 

        - thanks to  @dbrace ‌ for the example he posted

• I've made it possible to run multiple trays from the same code, to prevent copy/pasting the whole thing for additional trays. The tray is now a function, which can take options allowing for multiple separately configured trays.

See new documentation.

ccsd-canvas/global-nav-custom-tray-multi-config.md at master · robert-carroll/ccsd-canvas · GitHub 

Ready to use file, compressed, with config setup.

ccsd-canvas/global-nav-custom-tray-multi.min.js at master · robert-carroll/ccsd-canvas · GitHub 

[martin_kabat]

Thank you very much Robert for sharing the solutions.

[martin_kabat]

Hi Robert

How to avoid using the tray and link the icon directly to a course?

[robotcars]

 @dbrace ‌ has an example here #comment-143027 

[martin_kabat]

Hi Robert, I hope you are well. I would like to ask about role assignment to trays and  buttons. If our teachers are enrolled to some courses as students, will they have buttons assigned to students for the global navigation?

Thank you

[robotcars]

Yes.

ENV.current_user_roles is globally inclusive of all the user's roles, including sub accounts.

Some conditions would allow more specific targeting.

For instance, the following would apply links to anyone who isn't a teacher, admin, or root_admin.

// if the user is not a teacher, admin, or root_admin; (user,student) only
if(!['teacher','admin','root_admin'].some(a => ENV.current_user_roles.includes(a))) {

}‍‍‍‍‍‍‍

This would include the links for the observer role as well.

  @James ‌, does that look right to you?

[James]

carroll-ccsd,

ENV.current_user_roles contains all of the primary roles that someone is enrolled in anywhere in the Canvas instance. That is, custom roles do not show up here. We have an "advisor" custom role, but that does not show up in ENV.current_user_roles.

Observers are not a custom role, and the ENV.current_user_roles = ["user", "observer"] for someone who is only an observer. That means that your JavaScript triggers on observers as well.

The built_in roles are Student, Designer, Observer, Account Admin, Teacher, and TA. There is also an AccountMembership role that is a base_role_type that are used for sub-accounts and Canvas services (outcomes, quizzes.next)

That would make you think that all of those would show up in the ENV.current_user_roles, but designer and TA show up as teacher.

As far as I can tell, that leaves us with user, student, observer, teacher, admin, and root_admin.

[martin_kabat]

Than you. Is there a way that teachers will not get the students tray (always will be teachers)even they are enrolled to a course as students?

[robotcars]

From the example above, an else, would provide links to teachers, admins, root_admins.

// if the user is not a teacher, admin, or root_admin; (user,student) only
if (!['teacher', 'admin', 'root_admin'].some(a => ENV.current_user_roles.includes(a))) {
  // links for user, student, observer
} else {
  // links for teacher, admin, root_admin
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[James]

Alternatively, you could drop the negation ! and make the first block for teachers, admins, and root_admins and the else be for everyone else. It works either way, but if you're starting fresh, it would be easier to read without the double negative. When people start getting complicated rules, it may take more than a single if then else to handle.

[martin_kabat]

Hi,

In my request I didn't explained our setting. On our Canvas we host our CPD courses as well, where teachers are taking a student role, When they are students they are getting all student buttons and links on the Canvas global navigation. This is an issue for us as at the moment teachers have all students buttons which makes global navigation bit busy.

Any advice?

Thank you 

[James]

 @martin_kabat  

Your setting is not that different from the rest of us. We have a faculty training course, so all of our faculty are also students. This is what Robert was trying to address with the post a week ago. Rather than checking to see if they are students, check to see if they are teacher, admin, or root_admin. If they are not one of those things, then they should probably get the stuff for students.

Remember, though, that the ENV.current_user_roles lists all of the roles they have anywhere in Canvas, which is appropriate for a Global Navigation. Student and Teacher are course level roles, so if you want to check that they are a student or a teacher in a specific course, then that really shouldn't go into the Global Navigation because it's not global. That would be better in the course navigation menu.

Adding any buttons to the global navigation menu makes it busy, too, and we've purposefully avoided putting people's pet projects into the global navigation. When we surveyed our students about Canvas, they wanted it for their coursework, not for everything else on campus.

[robotcars]

We don't even use this for similar reasons. We edit a help link for 2 sub accounts and have stuck our Resource course for employees in the global nav.

[qnguyen]

Hi,

I am a newbie to custom JS for the Global Menu items. Can someone help me with how to add another item to the Global Menu, and simply linked to a training Course?

Here is what I saw what we have right now under JS file. Thanks

$(document).ready(function(){
// set timeout
var tid = setTimeout(mycode, 250);
function mycode() {
  //Hide Report a Problem Link from everyone regardless of role
  $('#help-dialog-options a[href=#create_ticket]').parent() .hide();
   tid = setTimeout(mycode, 250); // repeat myself
}
});

[robotcars]

Responded here, #comment-186179 

[mmccarthy3]

Dude. This snippet is AWESOME. Thank you so much for offering this!

Is it possible to reorder the additional links / trays to be above the existing global nav items?

Thanks again!

[robotcars]

Thanks  @mmccarthy3 

Note, that in a comment above I quietly released a newer version. There's a minified copy too.

ccsd-canvas/global-nav-custom-tray-multi-config.md at master · robert-carroll/ccsd-canvas · GitHub 

I'll reference this code.

Line#98 can be changed to menu.prepend(icon);

To do that in the minified version, just do a find replace for

o.append(c)

to

o.prepend(c)

This will place the icon above the users avatar and profile tray.

Hope that helps.

[mmccarthy3]

This worked! Fantastic. Thank you.

But a follow-up: is it possible to have it sit below Dashboard, rather than above the whole array?

[robotcars]

I think this will do for either version.

$('#global_nav_dashboard_link').parent().after(icon)

[mmccarthy3]

That worked perfectly! And I was on the right track to solve it myself too!

Thank you so much.

[dan_wright]

We have this installed in our test environment to get everything setup and everything seems to be working well aside from having to click the X to close. Is there a way to mimic the behavior of the other fly-out menus and close if a user clicks outside of the menu?

Thanks in advance!

Dan

[JACOBSEN_C]

Is there a chance a recent code deployment changed the behavior of this custom tool/tray - forcing a color change to the "Studio" integration Global Navigation placement to 'selected'?  Image below to illustrate.  If so... what would be a fix to this?

-Thanks! -c

[robotcars]

Hi @JACOBSEN_C 

I'm not seeing Studio icon to show up like that with the custom tray.

[JACOBSEN_C]

Ok, thanks.  It stopped doing *it* here too.  Weird...

[martin_kabat]

Hi all, are there any posts for mobile app global navigation modifications?

[JACOBSEN_C]

Hi,

Hey, how would you shoehorn a link in the "People" feature that only the Teacher course role would see?  Right now, with the code below, both students and students see the link(s) - where in the adjacent "Grades" lines there is differentiation (two different pages, Teacher Grades and Student Grades, we know... People seems to be the same page just with a couple of buttons dropped in there for Teacher). -Thanks!

--

[martin_kabat]

@robotcars and @JACOBSEN_C

I am trying to use a different theme for a subaccount, however, when I apply a script with a single item for the subaccount I get all items from the global navigation and in addition the icon from the new script applied in the subaccount theme.

Is there a way around this?

Thank you

[robotcars]

@martin_kabat,

Can you ensure that the code you are moving to the second level sub account doesn't contain the buttons for the global?

[martin_kabat]

@robotcars 

I have removed all items in the global navigation but kept only one.

I have removed all items from the global navigation of the main account except one that I need for a sub-account in question

Is it possible to add one of the buttons from the main account global navigation to a sub-account global navigation?

[robotcars]

The source/repo for this was updated with a patch from Christopher Casey @chriscas 

[chriscas]

Hi @JustineEvansUM,

You've just minimized the global nav (any user can choose to do this for their own view of the menu).  If you click the righthand arrow that should be at the bottom, you should get the full expanded global nav with text back.

-Chris

[JustineEvansUM · Accepted solution]

Hi, @chriscas 

Oh my God, how embarrassing. That's what I get for jumping into dev mode without having completed a getting-started guide. Well, I suppose my idiocy is good news. I really appreciate your help. Was desperately looking for a cache clear or something.

Best,
Justine