Custom JavaScript/CSS Changes

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!

Find more posts tagged with

Accepted answers

ryan

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):

<SPAN class="comment token">// this is not supported by Instructure, I'm just providing it as a reference in case it is helpful</SPAN><BR /><SPAN class="comment token"><SPAN>// Replace "</SPAN><A class="jive-link-external-small" href="http://example.com/test" rel="nofollow noopener noreferrer">http://example.com/test</A><SPAN>" in the selector with whatever url you use in the link you want to add custom behavior to</SPAN></SPAN><BR /><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN>body<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token"><SPAN>'#help_tray a[href="</SPAN><A class="jive-link-external-small" href="http://example.com/test" rel="nofollow noopener noreferrer">http://example.com/test</A><SPAN>"]'</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> event<SPAN class="punctuation token">.</SPAN><SPAN class="token function">preventDefault</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><BR /> <SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'do something special'</SPAN><SPAN class="punctuation token">)</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.

All comments

robotcars

I took a stab at the linked code, it seems on line 105 .ReactTrayPortal no longer exists.

<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.ReactTrayPortal div'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN>trayHtml<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

$('.ReactTrayPortal').length // result = 0

Changing it to the following, allowed the slider to show me the list of links.

<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#menu'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN>trayHtml<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Not sure if it's a complete solution, but it might get you started.

I have some code that appends content after .ic-NavMenu__link-list, when I came in yesterday it's now ._2j92CzO._17Ovwhm._1eZWDls :smileyconfused:

akinsey

So. After a lot of blood, sweat, and tears, we've figured it out. The "undocumented changes" that occurred in the latest production release seems to have changed the inheritance of the code. Things that were not connected previously became connected. Because of this, we've had to change the following issues today:

Student grades became hidden because we hide the To-Do List
Videos recorded inside of Canvas became invisible because we hide the To-Do List
The slide out tray for a customized button was removed, as well as all the inherent links within it.

We've drastically changed the CSS/Js code, so here's hoping no more of these pushes will break our Canvas experience.

akinsey

Well, we weren't able to fix the custom tray, unfortunately. We shifted some things around to make what we're doing "work" without breaking other parts of Canvas. I'll see if we can get the code posted today.

jill_delcambre

We are having the same issue. Any help someone can provide would be helpful.

unknown

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.

ryan

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.

<SPAN class="comment token">// this is not supported by Instructure, I'm just providing it as a reference in case it is helpful</SPAN><BR /><SPAN class="comment token"><SPAN>// Replace "</SPAN><A class="jive-link-external-small" href="http://example.com/test" rel="nofollow noopener noreferrer">http://example.com/test</A><SPAN>" in the selector with whatever url you use in the link you want to add custom behavior to</SPAN></SPAN><BR /><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN>body<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token"><SPAN>'#help_tray a[href="</SPAN><A class="jive-link-external-small" href="http://example.com/test" rel="nofollow noopener noreferrer">http://example.com/test</A><SPAN>"]'</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> event<SPAN class="punctuation token">.</SPAN><SPAN class="token function">preventDefault</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><BR /> <SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'do something special'</SPAN><SPAN class="punctuation token">)</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

MAJ18

Deactivated user‌ Thanks for taking the time to respond out here in the community. We really appreciate all that you canvas developers do. However I think that some of our issues are not with adding to Help menu but to adding our own Resource links for our users. Similar to what @JACOBSEN_C ‌ mentioned in his comment above. the help menu will get awfully crowded if we add the 15 or so links to campus resources such as libraries, disability support, etc. to that option which would, IMHO make it harder for students to distinguish how to actually get to help when they need it.

Again I think this is helpful information and maybe someone can still work to find a solution for these additional options that many seem to use.

robotcars

I've continued taking periodic 'stabs' at this and started a new thread...

https://community.canvaslms.com/message/101582-global-nav-custom-tray

unknown

Hi, I'm having an issue trying to have a custom JS to work on Catalog Homepage sometimes it loads for the first time, then if I reload it doesn't work. Maybe you have some idea as to what could be happening i'm not sure if it's a security issues since I'm trying to load some images from another server.

Thanks

Unanswered Questions

Falling SSL handshake when calling Canvas API
Hello, We use PeopleSoft and developed an integration for retrieving grades from the Canvas API. It was working fine in dev and production but has since broken. The SSL handshake is failing according to this stack trace from the server : Apparently this can happen if the required certificates are missing, can anyone tell…
UI for weekly progression idea
UI for weekly progression idea that rest in the Schedule tab of the **K-12 UI** of Canvas it's incomplete and I really would not take it and push it into instance but I am going to post it here because in the past people like @James && @robotcars || @Steve_25 have had terrific input in the past... maybe w/their eyes and…
add `desc` or `asc` to a few api calls that are already sorted by date\time\index such as `due_at`
A case for this argument: I live in thee K-12 realm which means we have way too many assignments... which means that at times a simple last 10 assignments of a course question(last 10 date wise) will take us 300 assignments to answer Solution for this example in particular: I would love to make this modified version of an…
Integrate a React App (Not Canvas) to be Canvas LMS SSO.
Hey Community: I want to ask first if Canvas LMS as a Identity provider is only supported with SAML? What other protocols are supported? My use case is that I have a React App hosted on cloud provider (AWS) and SpringBoot as a backend (Service provider). I want to integrate Canvas SSO as a Identity provider (IdP). I…
Why are instructions and quiz_settings null in the New Quizzes API?
I make requests to this endpoint: GET /api/quiz/v1/courses/:course_id/quizzes In the list I get back, sometimes instructions and quiz_settings are null. Why? How do I prevent this? Here is an example where quiz #3 does not have instructions nor settings: [ { "id": "2893842", "title": "In Class Exercise #2", "instructions":…