cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Learner II

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
Highlighted

Hi Alan,

We're having the same problem.  Any chance you could share how you solved it?

Highlighted

Sure. Basically, our programmer pulled up the Canvas page we were having issues with and backtracked the inherited code by inspecting the page element. So he compared our CSS/Js code to that and found where to place our qualifiers so those items would not disappear. 

Highlighted

The custom tray code is pretty special, any way you'd be willing to share it to the community, or commit an update to the original repo?

Highlighted
Learner II

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.

Highlighted
Community Member

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

Highlighted

I know most of the people on this thread have already re-worked your javascript by now, but I thought this might be helpful to the conversation.

One thing that I've found helpful with custom Global Navigation items is to add them as a fake LTI tool so the item population in the Global Navigation is taken care of by Canvas. This has the benefit of removing the delay of the menu item being added on each page load. You can do this easily by adding a custom LTI by slightly modifying the below XML (adjust the urls to point to one of your institution's websites that will return a page with a 404 Not Found page incase Javascript overrides aren't working for the user). 

Note: The following XML adds a Global Nav icon like the image on the right. It is only visible to Admins and Teachers. Remove line 28 to let all users see the item. And if you want to change the icon, replace the SVG path on line 21. Also customize the navigation item text by editing lines 23 & 24

272504_pastedImage_2.png

<cartridge_basiclti_link xmlns="http://www.imsglobal.org/xsd/imslticc_v1p0" xmlns:blti="http://www.imsglobal.org/xsd/imsbasiclti_v1p0" xmlns:lticm="http://www.imsglobal.org/xsd/imslticm_v1p0" xmlns:lticp="http://www.imsglobal.org/xsd/imslticp_v1p0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsglobal.org/xsd/imslticc_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticc_v1p0.xsd http://www.imsglobal.org/xsd/imsbasiclti_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imsbasiclti_v1p0p1.xsd http://www.imsglobal.org/xsd/imslticm_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticm_v1p0.xsd http://www.imsglobal.org/xsd/imslticp_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticp_v1p0.xsd">
<blti:title>PD Catalog</blti:title>
<blti:description>
Add links to external web resources that show up as navigation items in course, user or account navigation. Whatever URL you specify is loaded within the content pane when users click the link.
</blti:description>
<blti:launch_url>https://yourUrlHere</blti:launch_url>
<blti:custom>
<lticm:property name="new_tab">1</lticm:property>
<lticm:property name="url">https://yourUrlHere</lticm:property>
</blti:custom>
<blti:extensions platform="canvas.instructure.com">
<lticm:property name="icon_url">
https://www.edu-apps.org/assets/lti_redirect_engine/redirect_icon.png
</lticm:property>
<lticm:property name="link_text"/>
<lticm:property name="privacy_level">anonymous</lticm:property>
<lticm:property name="tool_id">redirect</lticm:property>
<lticm:options name="global_navigation">
<lticm:property name="display_type">full_width</lticm:property>
<lticm:property name="icon_svg_path_64">
M23.5,58.83H5.5a4.48,4.48,0,0,1-4.4-4.54V5.53A4.47,4.47,0,0,1,5.5,1H51.32a4.48,4.48,0,0,1,4.4,4.54V24h-4.4V5.53L5.5,5.39v48.9l18,.14v4.4ZM11.84,11.68H42.79v4.4H11.84v-4.4Zm0,10.69H36.79v4.4H11.84Zm0,10.69H28.59v4.4H11.84Zm0,10.69H28.59v4.4H11.84ZM62.76,56.52,56.1,44.11a12.57,12.57,0,1,0-22.94,0L26.39,56.37A1.14,1.14,0,0,0,27.64,58l5.74-1.3,1.94,5.48a1.15,1.15,0,0,0,1,.76h.09a1.14,1.14,0,0,0,1-.6l5.92-10.93a11.63,11.63,0,0,0,1.25.13c.39,0,.76-.08,1.15-.11l6,11a1.12,1.12,0,0,0,1,.6h.09a1.15,1.15,0,0,0,1-.74l2-5.46,5.73,1.33a1.15,1.15,0,0,0,1.28-1.65ZM36.35,55l-.71-2a.56.56,0,0,0-.67-.37l-2.13.48,3-5.42A12.24,12.24,0,0,0,39.12,50Zm8.23-8a8,8,0,1,1,8.05-8A8,8,0,0,1,44.58,47Zm9.84,6.5a.68.68,0,0,0-.79.43l-.85,2.38-3.23-5.95a14.76,14.76,0,0,0,3.85-2.7l3.54,6.41Z" transform="translate(-1.1 -1)
</lticm:property>
<lticm:property name="text">PD Catalog</lticm:property>
<lticm:property name="label">PD Catalog</lticm:property>
<lticm:property name="url">
https://yourUrlHere
</lticm:property>
<lticm:property name="visibility">admins</lticm:property>
</lticm:options>
</blti:extensions>
</cartridge_basiclti_link>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I then use the following javascript to find it and replace the global nav code with whatever I want. I haven't done this with the slide out tray, but it should work and avoid you having to rely on element classes and id's of items in the global nav. Instead it just relies on the global launch url (which is less likely to change than an id or class).

Note: This particular script only modifies the PD Catalog LTI Global Navigation item for Admins and Teachers as the LTI is managing the permissions for the tool. It takes users to Canvas Network.

  1. Remove lines 12 and 23 to make the script modify the LTI url for all users if you want.
  2. Replace the url on line 18 with the native global launch url from the LTI tool from your institution's Canvas site.
  3. Update the ID selector on lines 15, 16, and 20.
  4. Customize the code for the variable portal link on line 19. 
var fixGlobalNavURL = function() {
    function onElementRendered(selector, cb, _attempts) {
        var el = $(selector);
        _attempts = ++_attempts || 1;
        if (el.length) return cb(el);
        if (_attempts == 100) return;
        setTimeout(function () {
            onElementRendered(selector, cb, _attempts);
        }, 50);
    };

    if (ENV['current_user_roles'].indexOf('admin') > -1 || ENV['current_user_roles'].indexOf('teacher') > -1) {
        // START - Change URL of PD Catalog LTI

        onElementRendered('#context_external_tool_132_menu_item', function () {
            global_nav_link = document.querySelector("#context_external_tool_132_menu_item > a").href;

            if (global_nav_link === "https://jperkins.instructure.com/accounts/1/external_tools/132?launch_type=global_navigation") {
                var portal_link = $('<li id="context_external_tool_132_menu_item" class="menu-item ic-app-header__menu-list-item"> <a class="ic-app-header__menu-list-link" target="_blank" rel="noopener noreferrer" href="https://www.canvas.net"> <svg version="1.1" class="ic-icon-svg ic-icon-svg--lti menu-item__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"> <path d="M23.5,58.83H5.5a4.48,4.48,0,0,1-4.4-4.54V5.53A4.47,4.47,0,0,1,5.5,1H51.32a4.48,4.48,0,0,1,4.4,4.54V24h-4.4V5.53L5.5,5.39v48.9l18,.14v4.4ZM11.84,11.68H42.79v4.4H11.84v-4.4Zm0,10.69H36.79v4.4H11.84Zm0,10.69H28.59v4.4H11.84Zm0,10.69H28.59v4.4H11.84ZM62.76,56.52,56.1,44.11a12.57,12.57,0,1,0-22.94,0L26.39,56.37A1.14,1.14,0,0,0,27.64,58l5.74-1.3,1.94,5.48a1.15,1.15,0,0,0,1,.76h.09a1.14,1.14,0,0,0,1-.6l5.92-10.93a11.63,11.63,0,0,0,1.25.13c.39,0,.76-.08,1.15-.11l6,11a1.12,1.12,0,0,0,1,.6h.09a1.15,1.15,0,0,0,1-.74l2-5.46,5.73,1.33a1.15,1.15,0,0,0,1.28-1.65ZM36.35,55l-.71-2a.56.56,0,0,0-.67-.37l-2.13.48,3-5.42A12.24,12.24,0,0,0,39.12,50Zm8.23-8a8,8,0,1,1,8.05-8A8,8,0,0,1,44.58,47Zm9.84,6.5a.68.68,0,0,0-.79.43l-.85,2.38-3.23-5.95a14.76,14.76,0,0,0,3.85-2.7l3.54,6.41Z&quot; transform=&quot;translate(-1.1 -1)"></path> </svg> <div class="menu-item__text"> PD Catalog </div></a></li>');
                $('#context_external_tool_132_menu_item').replaceWith(portal_link); //
            };
        });
    };
};

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

Disclaimer: And like all custom javascript, THIS IS NOT SUPPORTED BY INSTRUCTURE. But if you want to use it at your own risk you may.

Highlighted

This seems to be affecting a lot of institutions, here's another thread...

https://community.canvaslms.com/thread/6105#comment-100241

Highlighted

Thanks for posting the global nav customization code, jperkins@instructure.com

This gives me food for thought on how to improve what we already have if we wanted to go outside the bounds of the instruction icon set. SVG is awesome!

I had a question about what line in your LTI XML config code is the "global launch url". Is it line 6 or line 9? 

Highlighted

I have the full destination url on lines 6, 9 and 26. Anywhere it says "https://yourUrlHere" in the xml file. Pretty sure it isn't necessary in all places to work, but I haven't spent the time to dig any deeper. 

Highlighted

Thanks jperkins@instructure.com for this. That's an interesting way to deal with this issue, and I'll have to file that away for later.