Hide tabs in the course settings (navigation and Integration tabs)

Jump to solution
martin_kabat
Community Participant

Hi all,

We would like to hide the "Navigation" and "Integration" tabs on the course setting page, from teachers. 

Anyone any ideas, please?

Thank you

0 Likes
3 Solutions
robotcars
Community Champion

Hi @martin_kabat,

2 options here, both require adding them to the Canvas Theme.

CSS will hide them whenever they load on the page, for Everyone, even Admin.

 

#course_details_tabs #navigation_tab,
#course_details_tabs #integrations_tab {
    display: none;
}

 

JavaScript can remove them for any non-admin user.

 

// remove these tabs for non-admin users
(function () {
  'use strict';

  if (/\/courses\/\d+\/(details|settings)/.test(window.location.pathname)) {
    if (!['admin'].some(a => ENV.current_user_roles.includes(a))) {
      document.getElementById('integrations_tab').remove();
      document.getElementById('navigation_tab').remove();
    }
  }
})();

 

View solution in original post

matthew_buckett
Community Contributor

Making changes to the Canvas UI through a theme isn't supported by Instructure, but if you want to make a change like this you can do it by putting this snippet in a file and then uploading it to the JavaScript file part of the theme:

/*
 * If the current user isn't an admin or root admin and we're on the course settings page hide the 
 * navigation and integrations tabs.
 */
$(function() {
    const isAdmin = ENV.current_user_roles.findIndex(role => role === 'admin' || role === 'root_admin') !== -1
    const isSettings = window.location.pathname.match(/\/courses\/.*\/settings/)
    
    if (isSettings && !isAdmin) {
        $('#navigation_tab').hide()
        $('#integrations_tab').hide()
    }
})

There's more details about how to upload JavaScript to a theme here: https://community.canvaslms.com/t5/Admin-Guide/How-do-I-upload-custom-JavaScript-and-CSS-files-to-an...

The solution isn't great because you probably will see them appear for a very short time before the JavaScript is run, but it should work well enough to avoid people modifying them.

 

View solution in original post

xcotto1
Community Participant

Hi @martin_kabat 

This JS script works for me when it comes to any href including the /details

$("a[href*='/details']").removeAttr("href");

 

adding my two cents here lol

-Xavier👾

View solution in original post