cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
akinsey
Community Contributor

Custom JavaScript/CSS Changes

Jump to solution

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!

56 Replies
mzucal
Community Contributor

I'm sure your code was helpful to many but there are those of us who do not have the XML, LTI, or JavaScript skills needed or available to us.  So... my resources global nav is still not working.

And I agree that this is a change that should have been documented in the release notes.

That is AWESOME!!! Love your work  @jperkins ‌!

syeo
Community Participant

We would like to reach out to any institutions who are using EvalutionKit (EK) as an LTI tool in Canvas.  The latest Canvas production release causes our EK item to be hidden from the Navigation.

We appreciate any inputs.

dgrobani
Community Champion

Thanks for your post. We just checked and seem to be having this issue as well. We just emailed our EK rep to see what's up.

syeo
Community Participant

I have touch base with them since April 6th....Not much progress!

syeo
Community Participant

You may add this code (highlighted in red color) after the URL to see the EK link in the Navigation

https://~~~~~~/courses/id#/settings?global_includes=0

themidiman
Community Champion

2 Questions:

  1. Is the EK integration broken as in the Navigation on the left hand side of courses won't show tabs for student surveys? This is pretty huge as we're in the middle of running our regular end of semester evaluations soon if not now.
  2. Is this only happening if your institution makes use of custom JS to extend a custom slide out menu as the original poster of this question was asking?
syeo
Community Participant
  1. Is the EK integration broken as in the Navigation on the left hand side of courses won't show tabs for student surveys? This is pretty huge as we're in the middle of running our regular end of semester evaluations soon if not now. Ans: Yes, the EK link is missing from the Navigation.
  2. Is this only happening if your institution makes use of custom JS to extend a custom slide out menu as the original poster of this question was asking?
    Ans: No, we have removed the Resources menu from the Navigation, that was previously a custom slide out menu. We decided that the customize Resources menu has caused too much issues from the Canvas Release on April 4th. Therefore, we migrated our links into the HELP menu.
syeo
Community Participant

A big relief!  Our LTI-EK is functioning now.  Thanks to EK team and their effort. The issue was caused by the script.

ryan
Instructure
Instructure

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