Community

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

Custom JS to hide Import Course link for Teachers

Hello fellow Canvas users. I have a kind of unique question. My school is transitioning the majority of course courses from a previous LMS we have used to Canvas which we have had for a number of years. 

In this move we'd like to control who and what can be imported into a course so minimize the amount of cleanup our instructional design team needs to do so we would like to hide the Import Course Content button on the Course settings page.

I believe we can do this by adding a JS file to our theme but I'm not exactly sure what JS I should generate. I have found some samples on the forums but I'm a JS noob and I don't know very much. Any help would be most appreciated!

Original I found

$(document).ready(function(){
if($.inArray('admin',ENV['current_user_roles']) == -1) {
   $(".AddExternalToolButton").hide();

   console.log ('hide Add App button')

}
});

My guess as to my desired goal

$(document).ready(function(){
if($.inArray('admin',ENV['current_user_roles']) == -1) {
   $(".ImportcoursecontentButton").hide();

   console.log ('hide Add App button')

}
});

Tags (1)
4 Replies
James
Community Champion

 @hollands  

There is also an "Import Existing Content" on the course home page that you might need to watch out for.

This function will hide those two elements for anyone who is not an admin or root_admin. It relies on classnames to identify the content. It verifies the page that you're on before it attempts to do anything.

(function() {
'use strict';
if (!ENV.current_user_roles.some(e => ['admin','root_admin'].includes(e))) {
if (/^\/courses\/\d+\/?$/.test(window.location.pathname)) {
const el = document.querySelector('#course_show_secondary a > i.icon-import');
if (el) {
el.parentElement.style.display = 'none';
}
}
if (/^\/courses\/\d+\/settings?$/.test(window.location.pathname)) {
const el = document.querySelector('#right-side a.import_content');
if (el) {
el.style.display = 'none';
}
}
}
})();

Alternatively, here is a shorter block that relies on the href containing /content_migrations

(function() {
'use strict';
if (!ENV.current_user_roles.some(e => ['admin','root_admin'].includes(e))) {
if (/^\/courses\/\d+(\/settings)?\/?$/.test(window.location.pathname)) {
const el = document.querySelector('#right-side-wrapper a[href*="/content_migrations"]');
if (el) {
el.style.display = 'none';
}
}
}
})();

These are both pure JavaScript and don't rely on jQuery. There have been times when jQuery hasn't been ready loaded before your scripts are, although Canvas says that won't happen (it still sometimes does). Some people argue that you should never use $(document).ready() but it seems to be a hold-over from people who learned jQuery a long time ago.

James
Community Champion

After a few hours sleep, I realized that if you are using the short form of the script, it is more efficient to check the page before you check the roles. Checking the roles first was better for the first script since it had multiple page checks within it. Changing the code itself will probably put it in moderation again and make it unavailable for a while, so I'll leave it like it is.

xcotto
Community Contributor

Hello  @hollands ,

You can either use JS or CSS. In our case faculty doesn't import content so we hide the button at the Sub Account Level. 

JS (We use this code only in a specific account)

$(document).ready(function() {
$('a[href*="/content_migrations"]').hide();
});‍‍‍‍‍‍‍‍‍

CSS (We use this code only in a specific account)

/* Remove the "Import Content Button */
#right-side a[href$="/content_migrations"] {
display: none !important;
}‍‍‍‍‍‍‍‍

Another option falls on modifying the Teacher permissions but certainly, there will be an impact in other permissions areas besides the Import Content visibility.

I hope it helps!

Xavier

hollands
Community Contributor

Thanks everyone! I was able to meet up with one of our devs we have on staff and got this sorted out. Much appreciated!