Has anyone been working on scripts for the new Beta UI?

[jblumberg]

There are some very common branding and UI scripts that a lot of institutions run that will need to be rewritten with the change of UI.  Most of these are pretty basic changes.

One in particular:

   A lot of schools have added extra pull down menus to the top navigation menu.  Our institution added "Library" and "Support" here.  We will need to move these to the left side navigation replacing the with icons.

   I know we got our code from our implementation manager from Instructure... the nice thing about this is that most institutions had similar code.  I wonder if there will be any sample code for this that we could base our implementation on.

Thanks,

Josh

[buellj]

Ditto - we have a link to the library and may soon need to add other links to the bookstore, etc.

[kenneth_larsen]

I just did some playing to create something to help here. Here are some thoughts about adding custom links:

1. The navigation section does not scroll, so any new links added may not appear on small resolution screens. Because of this I took the approach of making custom links with a small icon to the left of the text or no icon at all.
2. In the admin area, you can add custom links that appear when you click the help link in the bottom left so we will probably be adding our support links there. This is also nice because it can be targeted to users based on their roles.

Here is a function that will create basic links in the left menu:

function addMenuItem (linkText, linkhref, icon) {
  var iconHtml = '',
  itemHtml,
  linkId = linkText.split(' ').join('_');
  if (icon !== '') {
  iconHtml = '<i class="' + icon + '"></i> ';
  }
  itemHtml = '<li class="ic-app-header__menu-list-item ">' +
  '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' +
  ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' +
  '  </a>' +
  '</li>';
  $('#menu').append(itemHtml);
}

To add an item with an icon:

addMenuItem('Library', 'http://google.com', 'icon-educators');

To add an item without an icon:

addMenuItem('Support', 'http://google.com', '');

This will look like this:

So now I have a question. How much value is there in having a pop-out menu for items in the left navigation? I can make something like that, I am just wondering if I really should (from a user experience standpoint).

[buellj]

Given the constraints of adding multiple items using this method I can see a use case for having a pop-out menu when multiple links are needed (library, bookstore, writing center, etc.)

[kenneth_larsen]

Sounds good. I will work up a solution and see how well it works.

[tatiana_peisl]

Right now we would have to pause, because of Developer Key, that was requested and not-yet granted. I just wanted to go ahead and test for a single user, similar to API call. In theory, to authenticate access, user token should work. As you clarified, in USU tools context, it is not. That was my biggest confusion. thanks again for making it clear

Another thing: about encryption. If server where tools are located has SSL, so given HTTPS should be enough and then no need to go through all encryption/decryption process. Why not to add URL validation for HTTPS, if domain has it, no need to encrypt. Isn't is?

[kenneth_larsen]

I'm assuming this is a reply to Kennethware 2.0 test deployment - error. Even though the server is SSL, I encrypt the OAuth tokens stored in the database so that if for whatever reason someone gets into your database, it does not compromise the OAuth tokens. With one of those tokens, you can do anything that person can do in Canvas and it essentially appears that they did it. The additional encryption layer is for my own piece of mind.

[jblumberg]

Kenneth,

   Thanks for sharing your solution.  The pop-out would be really great!  It is the gui replacement for the pull down menus which I know we used, and probably lots of other places used as well.

We are holding off implementing the new UI until January out my institution.  We wanted time for the design to settle and we have lots of custom JS to redo.  Most of it looks easy but this is a busy time of the year.  Once I dive into things, I am happy to share what we learned back here.

Josh

[kenneth_larsen]

I noticed that Instructure has made the code for their slide out tray available on Github (instructure-react/react-tray · GitHub). If I can find some time I am going to figure out how to duplicate what they are doing with their other menu items with slide out menus. If someone else beats me to it, that would be awesome as well

[ephraimross1]

I would be VERY interested

[c1224994]

Would anyone be able to tell me what I (a lowly graphic designer, responsible for doing things I don't know how to do) am doing wrong with our global nav js in the new UI? I am testing it in beta...and so far I cannot seem to get any changes to take affect.

// JavaScript Document

function addMenuItem (linkText, linkhref, icon) {

    'use strict';

    var iconHtml = '',

        itemHtml,

        linkId = linkText.split(' ').join('_');

    if (icon !== '') {

        iconHtml = '<i class=" + icon + "></i> ';

    }

    itemHtml = '<li class="ic-app-header__menu-list-item ">' +

        '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' +

        '       <div class="menu-item__text">' + iconHtml + linkText + '</div>' +

        '  </a>' +

        '</li>';

    $('#menu').append(itemHtml);

addMenuItem('MELO','http://msmelo.squarespace.com/', 'icon-off');

addMenuItem('Resources','http://msvcc.squarespace.com/msvccresources', 'icon-off');

addMenuItem('MyHinds','http://my.hindscc.edu/', 'icon-off');

}

[kenneth_larsen]

Hi  @c1224994 ​,

Congrats on opportunities to pick up something new. Two things with the code you pasted:

1. You are calling the function from inside the function. Move your addMenuItem() calls below the }
2. There is an issue with pasting code in the editor for the line of the code that sets the icon (I fixed this in the code I provided above). Change:
   • iconHtml = '<i class=" + icon + "></i> ';
   • To
   • iconHtml = '<i class="' + icon + '"></i> ';

In regard to icons, you can find additional icons in the Canvas Style Guide​. Just replace the 'icon-off' with the class for the icon you would like to use.

Make sure you check your new layout on multiple screens and devices because the left sidebar will not scroll if your icons are off the page and the links you are adding may be lost.

Good luck

[c1224994]

Thanks Kenneth. I am not sure if it is because I am testing in beta - but it will only work intermittently.

[kenneth_larsen]

That's strange, I have mine running in beta (the only place we have the new UI turned on) and I haven't noticed any issues, but that may just be because that is not where my attention is focused. Try wrapping the whole thing with a document ready function and see if that makes a difference:

$(document).ready(function() {
});

[c1224994]

I will give you an update after our beta instance is back up and running correctly. I started to notice that after I would upload a new js file in the theme editor, it was still holding on to the previous version.

Thanks for all your help.

[c1224994]

Working like a charm! Thanks so much for all your help!

[ephraimross1]

You'd think there would be a book or library icon in the canvas icon collection (of the style guide). The bookmark is the closest I can find that might work for a "Library" link from the global nav menu.

[Chris_Hofer]

Hi  @kenneth_larsen ​...

This would be of interest for my team.  We recently added to new menus to the top of our Canvas instance as shown in this image: "Toolbox" and "MPTC Help".  Each menu contains four items.  We've not enabled the new UI yet (probably not until this Summer).  It would be nice to retain the two menu items and the links within there in some capacity.  Otherwise, we're going to have to come up with some other method for our faculty to easily access the links in those menus.

[kenneth_larsen]

Are these links something that is only of use to faculty? If that is the case, when I figure this out, I will add an option of whether the links are for students, teachers, admins, or all of the above.

[Chris_Hofer]

Hi  @kenneth_larsen ​...

Yes, these are only links that our faculty and adjuncts see.  We, as admins, also see them.  Students do not.

[Chris_Hofer]

 @kenneth_larsen ...

Another issue we are currently running into with the placement of our "Toolbox" and "MPTC Help" menus (as shown above) in the current UI interface is that when instructors go to "Courses" >> "View All or Customize", their course list aligns to the middle of the screen just under "Courses".  Basically, what is happening is that the white "MPTC Help" menu text is moving to the next line under "Courses" (but you can't see it on a white background).  This makes seeing the course title and term the course is in more difficult to see in "View All or Customize".  It's not moving on the Dashboard screen you see when you first sign in to Canvas or when you navigate to a course...just on the "View All or Customize" screen.  We're not sure how to keep our "MPTC Help" menu with the blue area of Canvas no matter which screen you are on.  We're using custom JS code in our global file.

[kenneth_larsen]

That sounds like fun. Everybody else wants unreadable links breaking their interface, they are just afraid to admit it.  If you want to share your custom JS code with me, I would be happy to take a look. Also, it looks like you probably have some overrides in your custom CSS to account for a wide logo, if you are willing to share what you have tweaked in your CSS, that would help as well. And one more thing, if you have a publicly visible course that I can look at, it may also be of benefit.

[Chris_Hofer]

Thanks...I'll PM you.

[kenneth_larsen]

For any who might experience a similar issue, it turns out there was a height set for the #menu in the custom CSS that was not enough to hold the contents on that page and also caused issues when the extra navigation links dropped to a new line. Removing that set height allowed the header to grow with the content. Chris may choose to do some fine tuning, but that was the heart of the problem.

[kenneth_larsen]

Hey  @Chris_Hofer ​, Jeremy,  @buellj ​,  @jblumberg , and any others interested in this topic. I have not had time to figure out how to recreate a slide-out panel for the left hand navigation and thought we should see if we can get Canvas to add this as a feature. I have created a feature request. I will add another comment when it opens for voting. Please feel free to share and add in your two cents.

[jblumberg]

Thanks Kenneth.

I am going to look into the slide out tray tomorrow with our web programmer and determine what is involved.

Josh

[kenneth_larsen]

Just thought I would let anyone interested know that the feature request is now open for voting.

[bgibson]

I think it would be nice to add the following items to the slide out "Admin" menu:  Show Courses from the Term, Find a Course, Find a User, Add a  New Course, Add a New User, and Open Theme Editor.  All the right-side menu items, that now only show after you have clicked on the  primary account link.  That would save a click, plus the time & effort to scroll across the page to click on any of the above functions.  Not much time or effort when you do it once, but as a Admin, you repeat these small tasks repeatedly each day -- week -- month -- year.  Click on Admin, and the above functions are immediately to the right of your mouse pointer.

[awilliams]

Totally agreed. In fact, in the comments of my feature idea that is now "Under Development," I mentioned that very thing. You may want to head over to and add your feedback there. I had done a mock-up of how it would look to move those items out of the sidebar and into the Admin fly-out panel, but it has disappeared and I haven't redone it.

[harker]

We have made the plunge. I will admit I do not have the same ninja skills as Kenneth Larsen​, but thought this will help.

In our old UI we had a customized button to access our Canvas tutorial courses. This was the last button appended to the identification bar. Interestingly enough, I was able to figure out how to create a psuedo hack, it will show up in this location on every page (sans the dashboard) that has content in the #right-side column.

Here is the (blunt instrument hack) JS override code 😕

//* Orientation Choices #right-side, .ic-sidebar-logo, .ic-sidebar-logo_image (append)

$('#right-side').prepend('<div class="al-dropdown_container"><a class="al-trigger Button Button--block" role="button" href="#" style="background: #0099e0; color: #fff">How to use Canvas <i class="icon-mini-arrow-down"></i></a><ul class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false"><li><a href="https://suu.instructure.com/courses/166813" target="_parent" tabindex="-1" role="menuitem">Student Walkthrough</a></li><li><a href="https://suu.instructure.com/courses/151520" target="_parent" tabindex="-1" role="menuitem">Faculty Walkthrough</a></li></ul></div><br />');

Another little hack we have is to have a link to our University calendar on the Calendar page in Canvas. This is what it looks like... (Yes you can also see our above hack here too.)

This is another addition to our JS override script

//* Calendar Customization === This is where a link to the SUU Academic Calendar is located top right on Calendar page.//

$('#calendar-feed').parent().prepend('<i class="icon-calendar-month"></i> <a href="http://www.google.com/calendar/embed?src=suu.edu_tjl05mhr4lldjqhph0lasfmqk8@group.calendar.google.co...google.com/calendar/embed?src=suu.edu_tjl05mhr4lldjqhph0lasfmqk8@group.calendar.google.com&ctz=America/Denver&gsessionid=_lJiWMqvVSpfkVl1KVgY3w/" target="_new">SUU Academic Calendar</a>');

So hopefully these little tricks may give you additional options.

[kenneth_larsen]

Due to a request by  @kenneth_rogers ​ (great name by the way), I have made an updated version of the code for individual navigation links (without slide out panel) to address the issue of the item disappearing when the menu is collapsed down to just the icons that will be going into production this weekend. You can find the new code atHelp With Custom Menu Icons and Script.

[jnuckles]

For anyone trying to figure out the side menu tray. This is what instructure is using. I haven't figured out how to use it but atleast it gives us some clues.

instructure-react/react-tray-example · GitHub

Jeff

[tdelillo]

Canvas Community saves my bacon yet again. My JavaScript skills are nil, and the person who wrote the script to add a custom menu to our global nav in the current (old) UI is long gone. Because of this thread, I'll at least be able to add individual custom links to the global nav when we go live with the new UI next week.

Thanks  @kenneth_larsen ​ and the rest of the gang!

[powellj]

Has anyone gotten the GitHub script working in their Canvas environment yet? We really need the slide-out menu since we have several links that need to be added like we have in the old UI. I can get  @kenneth_larsen 's code to work fine, but nothing happens when I load the GH code. jnuckles​, were you able to figure it out?

[tdelillo]

I'll be following this thread eagerly, hoping someone does figure out the menus. In the meantime, I'm also wondering if anyone has tweaked the code above to make the links open in a new tab/window? I just realized that our old global nav custom links DO open a new tab/window, and the ones I put together for the new UI don't.

[kenneth_larsen]

 @tdelillo ​,

I have revised the function to include the ability to have the new link open in a new tab. Here is the new function:

function addMenuItem (linkText, linkhref, icon, target) {  
  var iconHtml = '',  
  itemHtml,  
  linkId = linkText.split(' ').join('_'),
  newTab = '';
  if (typeof target !== 'undefined') {
    newTab = 'target="' + target + '"';
  }
  if (icon !== '') {  
  iconHtml = '<i class="' + icon + '"></i> ';  
  }  
  itemHtml = '<li class="ic-app-header__menu-list-item ">' +  
  '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link" ' + newTab + '>' +  
  ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' +  
  '  </a>' +  
  '</li>';  
  $('#menu').append(itemHtml);  
}  

To create a link that opens in the current window, use the following (same as original):

addMenuItem('Library', 'http://mylibrarylink.edu', 'icon-educators');

To create a link that opens in a new window, add an additional parameter to the end:

addMenuItem('Library', 'http://mylibrarylink.edu', 'icon-educators', '_blank');

Just in case this is not common knowledge to those reading this response, adding target="_blank" to an anchor tag will cause that link to open in a new window.

I fixed the part of the code that pasting into this reply usually breaks and I didn't see any new breaks, but let me know if there are any issues.

[tdelillo]

 @kenneth_larsen ​- You are a Canvas panda rock star.

I thought about trying to use my old friend "_blank", but without your other tweaks to the function it would have been useless. Thank you sooooooooo much!

[james_vlisides]

This is great help, thank you! I am also a noob in this script, but I am learning a lot by trying out the things you all share.

Do you know a way to write it so that the icon will position above the text rather than on the left side of it?

All I could come up with was calling the function twice, once with an icon and no text, and another underneath with text/no icon, but the spacing is off and it doesn't look good (and seems to double the number of actual links I need there)

$(document).ready(function() {

function addMenuItem (linkText, linkhref, icon, target) {  

  var iconHtml = '',  

  itemHtml,  

  linkId = linkText.split(' ').join('_'),

  newTab = '';

  if (typeof target !== 'undefined') {

    newTab = 'target="' + target + '"';

  }

  if (icon !== '') {  

  iconHtml = '<i class=" + icon + "></i> ';  

  }  

  itemHtml = '<li class="ic-app-header__menu-list-item ">' +  

  '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link" ' + newTab + '>' +  

  ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' +  

  '  </a>' +  

  '</li>';  

  $('#menu').append(itemHtml);  

}  

addMenuItem('', 'http://students.westernsem.edu','icon-educators');

addMenuItem('Student Portal', 'http://students.westernsem.edu','');

});

[kenneth_larsen]

It seems like I posted this somewhere, but I don't know where. The icon to the left was intentional because (at the time I wrote it) the menu would not scroll if it was too long for the screen. If you want the icon to be centered, try this function instead:

function addMenuItem (linkText, linkhref, icon) {
    'use strict';
    var iconHtml = '',
        itemHtml,
        linkId = linkText.split(' ').join('_');
    if (icon !== '') {
        iconHtml = '<i class="' + icon + '" style="display: block; width: 100%; height: 25px;"></i> ';
    }
    itemHtml = '<li class="ic-app-header__menu-list-item ">' +
        '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' +
        '       <div class="menu-item__text">' + iconHtml + linkText + '</div>' +
        '  </a>' +
        '</li>';
    $('#menu').append(itemHtml);
}
addMenuItem('Logout', '/logout', 'icon-off');

The only real difference is the style attribute for the icon.

[joseph_allen]

I think I know the answer to this, but just want to validate with others.... any custom menu item you build in the new UI or the old UI for that matter is not visible on the mobile app.  Correct?    Assuming yes, is there any way to add items to the mobile app?  I have used the LTI redirect and that works.  But the global JS doesn't work.  I've seen a js for mobile in the new UI interface.  Is that a possibility?

Thanks,

Joe