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

Find more posts tagged with

Accepted answers

robotcars

Hi,

@PamelaPatterson, has pointed out that UI changes have required this to be updated. Here is a modified version that should handle the use cases requested in this thread.

/* css removes these options for all users, even admin */
#course_settings_tabs_mount [id^="tab-navigation"],
#course_settings_tabs_mount [id^="tab-integrations"] {
    display: none;
}

// remove these tabs for non-admin users
// also removes the mounted panel ui if the user navigates from history/bookmark
(function () {
  'use strict';

  if (/\/courses\/\d+\/(details|settings)/.test(window.location.pathname)) {
    if (!['root_admin','admin'].some(a => ENV.current_user_roles.includes(a))) {
      [...document.querySelectorAll('[id^="tab-navigation"]')].forEach(e => e.remove());
      [...document.querySelectorAll('[id^="tab-integrations"]')].forEach(e => e.remove());
    }
  }
})();

All comments

robotcars

--- JS in this post is deprecated, please see solution from July '25

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

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-account/ta-p/253

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.

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

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

Thank you again for your help.

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.

robotcars

Hi,

@PamelaPatterson, has pointed out that UI changes have required this to be updated. Here is a modified version that should handle the use cases requested in this thread.

/* css removes these options for all users, even admin */
#course_settings_tabs_mount [id^="tab-navigation"],
#course_settings_tabs_mount [id^="tab-integrations"] {
    display: none;
}

// remove these tabs for non-admin users
// also removes the mounted panel ui if the user navigates from history/bookmark
(function () {
  'use strict';

  if (/\/courses\/\d+\/(details|settings)/.test(window.location.pathname)) {
    if (!['root_admin','admin'].some(a => ENV.current_user_roles.includes(a))) {
      [...document.querySelectorAll('[id^="tab-navigation"]')].forEach(e => e.remove());
      [...document.querySelectorAll('[id^="tab-integrations"]')].forEach(e => e.remove());
    }
  }
})();

Unanswered Questions

GraphQL - Is there a way to check if a course was cross listed, combined or merged?
Hello, I am trying to query a course ID to check if it was cross listed. Do you know what is the data field to get this information or what query or API endpoint to use? I tried to use nonxlist_course_id, but received error 'doesn't exist on type course'.
UI for weekly progression idea
UI for weekly progression idea that rest in the Schedule tab of the **K-12 UI** of Canvas it's incomplete and I really would not take it and push it into instance but I am going to post it here because in the past people like @James && @robotcars || @Steve_25 have had terrific input in the past... maybe w/their eyes and…
add `desc` or `asc` to a few api calls that are already sorted by date\time\index such as `due_at`
A case for this argument: I live in thee K-12 realm which means we have way too many assignments... which means that at times a simple last 10 assignments of a course question(last 10 date wise) will take us 300 assignments to answer Solution for this example in particular: I would love to make this modified version of an…
Integrate a React App (Not Canvas) to be Canvas LMS SSO.
Hey Community: I want to ask first if Canvas LMS as a Identity provider is only supported with SAML? What other protocols are supported? My use case is that I have a React App hosted on cloud provider (AWS) and SpringBoot as a backend (Service provider). I want to integrate Canvas SSO as a Identity provider (IdP). I…
Donot have valid data to test certain APIs
Hi , I’m working on validating the API test cases for CANVAS Api and need suitable test data to verify the 200 OK status code responses. I am using free for teachers version account. PFA Ecel sheet about the end points I am checking for.