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

[martin_kabat]

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

[robotcars · Accepted solution]

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();
    }
  }
})();

[matthew_buckett · Accepted solution]

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.

[robotcars · Accepted solution]

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();
    }
  }
})();

[matthew_buckett · Accepted solution]

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.

[martin_kabat]

@robotcars and @matthew_buckett Thank you very much for your responses, great help.

When tested we found that when you click on the "Settings" next to the course title on top of the course window or change "settings" in url path to "details", the tabs that we removed are appearing. in both JavaScript "details" path needs to be added.

 1.

if (/\/courses\/\d+\/settings/.test(window.location.pathname) || /\/courses\/\d+\/details/.test(window.location.pathname))

2.

const isSettings = window.location.pathname.match(/\/courses\/.*\/settings/)
const isDetails = window.location.pathname.match(/\/courses\/.*\/details/)

Thank you again for your help.

[robotcars]

@martin_kabat 

Good catch, I didn't know that was a route.

I've updated my example above to accept details or settings.

[matthew_buckett]

@martin_kabat Glad you got it working, I wasn't aware about the details URL. Out of interest where is the "Settings" that you are clicking on to get /details in the URL? I don't see anything next to the course title.

[martin_kabat]

@matthew_buckett please see the image bellow.

By the chance, would you have any ideas how we can hide "inbox" from global navigation?

[xcotto1 · Accepted solution]

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👾