Custom JS to hide Import Course link for Teachers

[hollands]

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

}
});

[James]

 @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]

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]

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

[RobertaBain]

I know this is an old post, but I am currently trying to remove the Import Content capability from our teacher role, how do you do this in certain accounts as you indicated?

[James]

@RobertaBain 

You can add custom JavaScript or CSS to a specific subaccount using Themes. If you don't want it to apply to every account, then make sure that you're in a subaccount before selecting Themes.

If you need to add the custom CSS or JavaScript to multiple subaccounts at the same level in the account hierarchy, you would need to apply it to each subaccount individually. If they are all subaccounts of another account, then you can apply it at the highest level it applies.

[hollands]

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

[casey_eubank]

I would like to hide the import content AND export content options on the course home page and also on the Course settings page for faculty and also any custom account admin roles I have created.  What Java Script would I need to use to do this?