cancel
Showing results for 
Search instead for 
Did you mean: 
jcole3
Community Member

Global Tray Link Subheadings?

Jump to solution


We have been using the resources_global_tray_link .js found here. We don't have a problem with the script - works great! But I was asked to find out if there is a way to add sub-headings within each role, in order for our instructors to know what resources are being offered to their students. For example:

The current script allows for:

Admin/Teacher RoleStudent Role
  • link 1
  • link 2
  • link 3
  • link 4
  • link 5
  • link 6

We are hoping to build a menu as follows (with a Student Resources subheading):

Admin/Teacher RoleStudent Role
  • link 1
  • link 2
  • link 3

Student Resources

  • link 4
  • link 5
  • link 6
  • link 4
  • link 5
  • link 6

Thanks for your help!

- Jeremy C.

Tags (1)
1 Solution

Accepted Solutions
cesbrandt
Lamplighter

Maybe it's just loading the script from the console, but it doesn't seem to work well with the original navigation. I'm finding that if I select the new addition to the menu while one of the original options is already expanded, the original expandable menu options seize to work.

For example, if you select the newly created Resources option while you have the Account menu expanded, should you close the Resources menu to go to the Course menu, it won't work.

Having said that, to accomplish what you're looking for requires modifying the code below where it says not to modify, and it's a fairly simple change that's needed. The displayLinks function is the key:

  function displayLinks(element, index, array) {

    displayVals += '<li>';

    displayVals += ((element.key != null) ? '<a target="_blank" href="' + element.key + '">' : '<strong>') + element.val + ((element.key != null) ? '</a>' : '</strong>'); //Remove target="_blank" if you do not want the links to open in a new tab.

    displayVals += '</li>';

  }

Note: The only line modified was the line that built the content of the list item.

How you would then use the script would be:

  var trayLinks = [

    {key: null, val: 'School Resources'},

    {key: 'http://www.example.com/your-library', val: 'Library'},

    {key: 'http://www.example.com/help-desk', val: 'Help Desk'},

    {key: null, val: 'Web Resources'},

    {key: 'http://www.google.com', val: 'Google'}

  ];

Simply use ​null​ instead of a URL to make the entry a text header.

View solution in original post

19 Replies
Stefanie
Community Team
Community Team

 @jcole3 , while I don't have an answer for your question, I wanted to let you know that I've shared it with the Canvas Developers​ and Canvas Admins​ groups to get the attention of those people who are most likely to have worked with scripts like this.

cesbrandt
Lamplighter

Maybe it's just loading the script from the console, but it doesn't seem to work well with the original navigation. I'm finding that if I select the new addition to the menu while one of the original options is already expanded, the original expandable menu options seize to work.

For example, if you select the newly created Resources option while you have the Account menu expanded, should you close the Resources menu to go to the Course menu, it won't work.

Having said that, to accomplish what you're looking for requires modifying the code below where it says not to modify, and it's a fairly simple change that's needed. The displayLinks function is the key:

  function displayLinks(element, index, array) {

    displayVals += '<li>';

    displayVals += ((element.key != null) ? '<a target="_blank" href="' + element.key + '">' : '<strong>') + element.val + ((element.key != null) ? '</a>' : '</strong>'); //Remove target="_blank" if you do not want the links to open in a new tab.

    displayVals += '</li>';

  }

Note: The only line modified was the line that built the content of the list item.

How you would then use the script would be:

  var trayLinks = [

    {key: null, val: 'School Resources'},

    {key: 'http://www.example.com/your-library', val: 'Library'},

    {key: 'http://www.example.com/help-desk', val: 'Help Desk'},

    {key: null, val: 'Web Resources'},

    {key: 'http://www.google.com', val: 'Google'}

  ];

Simply use ​null​ instead of a URL to make the entry a text header.

View solution in original post

jcole3
Community Member

That worked like a charm! Thank you so much for your help Christopher!

You can customize the appearance of them more by working with the same line I modified.

My version contains 2 ternary if statements that check if the value of the key is null. For simplicity, I just used a STRONG tag to give it the current appearance, since Canvas doesn't have "headers" in any of their menus to use as an example. Simply modify that tag to whatever you want to use for making it look the way you want it to.

jcole3
Community Member

The final product...thank you for handing me a win on a Friday afternoon.

Screen Shot 2016-07-08 at 1.22.15 PM.png

Glad I could help. Smiley Happy

palmarinich
Learner II

I had tried the resources_global_tray_link .js in the past, but never implemented it.  Now I'm getting back to testing and can't get anything to display in the global nav bar.  No icon, no text, nothing.  I'm using the current code on github, and have tried both the original and Christopher's suggested modifications.

The Help icon moved up the global nav bar recently, and I wondered if that might have broken something.  Can anyone can confirm that the resources_global_tray_link is still working for you, just to rule that out?

Thanks.

UPDATE:  Never mind.  I moved the tray portion of the JS up to the top, and it works correctly.  Order matters.

We had to trash it - the changes that were recently made created quite a few problems for us. We went ahead and used the Help menu's customization feature. But as of today, it can be a bit buggy if you add too many links. The biggest problem we experienced was that none of the links would stay in the right order.

Check this thread out for a little more info: New Help Menu

Yep, I'm finding the same.  Just kind of breaks the side nav menus.  I think the Library folks will just have to be content with their new home in the Help menu.  😉

I had kind of forgotten about the new Help item options.  Thanks for the prompt!