Custom JavaScript/CSS Changes

Jump to solution
akinsey
Community Contributor

Hello all,

Question. Over the weekend there was a Canvas Production Release. In the notes, it mentions undocumented changes to the CSS/Javascript. It seems that those changes have broken our Resources Tab, specifically the slide out menu. We've tried rewriting the code, and even used the code found here as a basis: canvas-contrib/Branding/JS_and_CSS/react-tray-link at master · kajigga/canvas-contrib · GitHub 

Has anyone else had this issue or have any thoughts/ideas as to what has changed?

Thanks!

4 Solutions
ryan
Instructure Alumni
Instructure Alumni

Hey Everyone,


I'm an Engineer that works on canvas and I wanted to help clear up what changed and how to fix it going forward here so I made a quick screencast.

Basically the issue was that we used to use a JavaScript library we created called "ReactTray" which was a precursor to the one we officially added to InstructureUI. The latter is better because it fixes a bunch of bugs, has better screenreader and Right-to-Left language support and there was no point in loading 2 tray javascript libraries on the page since all of the other trays we use in canvas are all already using the InstructureUI one.

but the good news is that you really shouldn't have to use custom JavaScript or CSS to make custom help links,  or to change the help menu's name and icon.  those are all things that are officially supported right in the canvas UI. just click the "Customize this menu" link at the bottom of the tray when it pops open and it will take you to an account settings page where you can create as many custom links as you'd like (see screencast).

And even if you want to add some kind of custom JavaScript behavior when you click on one of those links you can use the officially supported way to add them and add something like this to your custom JavaScript file to handle clicking on them (also see screencast):

// this is not supported by Instructure, I'm just providing it as a reference in case it is helpful
// Replace "http://example.com/test" in the selector with whatever url you use in the link you want to add custom behavior to
$(document.body).on('click', '#help_tray a[href="http://example.com/test"]', function(event) {
event.preventDefault()
alert('do something special')
})‍‍‍‍‍‍‍

Hopefully that helps clear things up. If there is anything any of you are needing that is not possible ‍‍‍‍using the officially supported way of adding custom links, we'd be interested to hear what you are doing. The hope in creating that feature was that there wouldn't be an need to use custom JS for that anymore and that people could do the same thing in a way that was easier, less-brittle, and officially supported.

PS:  I just want to add another reminder to people that are using a Custom JavaScript override file that those modifications are not officially supported and that you should make sure to check beta before every release to make sure your stuff is going to work when it goes to production.

View solution in original post

Are you using an Instructure icon or a custom svg?

View solution in original post

0 Likes
qnguyen
Community Contributor

Hi,

I am using Instructure icon but need to be as big as others. I used the code you sent starting with icon-xxxx

  addMenuItem('Training Course', 'https://edu.instructure.com/courses/123', 'icon-certified', '_blank');

View solution in original post

0 Likes

I'm looking into it.

The icon in your screenshot isn't the icon-certified.

Are you loading any other custom css or javascript?

View solution in original post

0 Likes