Degraded AWS performance is currently impacting some Canvas users in the North American region. Check Canvas Status for updates.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
martin_kabat
Community Participant

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

Jump to solution

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 Kudos
3 Solutions

Accepted 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

7 Replies
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

martin_kabat
Community Participant

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

matthew_buckett
Community Contributor

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

@matthew_buckett please see the image bellow.

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

 

course settings in path.PNG

@martin_kabat 

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

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

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