Admin Tray - Sub Account Menu

robotcars
Community Champion
64
10046

CHANGELOG

Sep 19, 2018 > Sep 21, 2018 12:28 PM

Jun 6, 2018

May 31, 2018

 

README

If you're a system administrator of a Canvas LMS instance with a deep organization of sub accounts you have inevitably found yourself in one of Dante's 9 Circles of Hell, repetitively clicking Sub Accounts at each and every level as you drill down to where you need to go. Here at CCSD we have over 8,000 sub accounts, and yet this only affects 5 people. So we will share this to help anyone else who is trapped.

The JavaScript and CSS files here add a directory style recursive HTML menu to the Canvas global navigation admin tray...

In Pictures

CollapsedExpandedSearch
Admin Tray CollapsedAdmin Tray ExpandedAdmin Tray Search

Configuration & Setup

Zero to little configuration is needed for admintray-subaccmenu.js, so I won't even bother explaining subacctray.cfg

Option 1

  1. Host the file admintray-subaccmenu.js on a secure server (https) or somewhere like Amazon S3
  2. Copy/append the contents of admintray-subaccmenu.inc.js to your Canvas Theme JavaScript file, point the URL to the hosted file.

Option 2 (Quick Start)

  1. Just copy the example snippet below that uses this repo's version and RawGit   to your Canvas Theme JavaScript file. However, please note that the RawGit URL points to the repo source and any changes to it may affect your usage later. I recommend hosting your own for stability, but this can get you started.

Once loaded the script will initialize an API call (to /api/v1/accounts/self/sub_accounts) and loop through x/100, collecting every sub account in your instance, compile a recursive HTML unordered list and store it your browser's localStorage.

Depending on the number of your sub accounts and internet speed, this will take a moment, be patient for the first load, open the tray and wait for it to show up. This takes us about 45-60 seconds on production. You will see a loading indicator in the Admin Tray while it compiles.

Features & Use

Instance Independent

There are some users (like Instructure Canvas Remote Admins) who may login to multiple Canvas Instances/institutions, so each menu will be stored in localStorage based on the uniqueness of x.instructure.com, including x.beta.instructure.com, x.test.instructure.com, and xyz.instructure.com.

For most users and institutions this will go mostly unnoticed unless you have different sub accounts between your Production, Test and Beta environments. I made this update to help those users it will affect. I also personally hate copying, pasting or replicating files just to change 1 line. This update allows 1 file to be hosted on a CDN like Amazon S3 and simply change the var show_results_parent value in admintray-subaccmenu.inc.js or leave it blank.

Therefore an already minified file has been provided in the repo.

Alphabetical Sorting

Yup! As far as I know, the Canvas API does not allow sorting API calls alphabetically during pagination. The entire stack of sub accounts is sorted prior to building the menu.

Localized Search

Using JavaScript/jQuery to search within the stored HTML, preventing further API calls. You can search the entire sub account menu by name.

Search Result - Prefix Parent Account (Skip-to-Depth Display)

I don't know what else to call it, so here is an explanation.

Suppose your directory structure looks something like the following, where (#) is the depth of the account.

  • High Schools (1)
    • George Washington HS (2)
      • Course Shells (3)
      • SIS Courses (3)
        • English (4)
        • Math (4)
        • Science (4)
  • Middle Schools (1)
    • Betsy Ross MS (2)
      • Course Shells (3)
      • SIS Courses (3)
        • English (4)
        • Math (4)
        • Science (4)

When we search for Science and get multiple sub accounts of 'Science', we can't identify which one we want to choose.

  1. Science
  2. Science

So if we map the results depth of 4 to it's parent depth at 2 (instead of 3, SIS Courses) we can get a result like:

  1. George Washington HS > Science
  2. Betsy Ross MS > Science

And both are links to their respective account.

Examples

// one skip
show_results_parent = { 4:2 }
// expected result:
// George Washington HS > Science

// or multiple skips, must be unique
show_results_parent = { 4:2, 3:2 }
// expected results:
// (4:2) George Washington HS > Science
// (3:2) George Washington HS > SIS Courses‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note: If you don't define the skip, it will not display a parent

Reload

The ↻ button at the bottom right of the menu will clear the menu from localStorage and recompile it for the current Canvas instance. Use this when you or other admins have added or removed sub accounts.

User Impact

As mentioned above, CCSD has 5 system admins, with 40,000 Employees and over 300,000 Students. Be kind to your users, use the snippet below to reduce the impact of your admin-only tools. This is included in the repo as admintray-subaccmenu.inc.js

if (ccsd.util.hasAnyRole('admin','root_admin')) {
// used for search results, result:parent, see documentation for more details
var show_results_parent = {}
// async load the sub account menu script
$.ajax({
url: 'https://cdn.rawgit.com/robert-carroll/ccsd-canvas/master/admintray-subaccmenu/admintray-subaccmenu.m...',
dataType: 'script',
cache: true,
data: {skipd: JSON.stringify(show_results_parent)}
})
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

User Script

At the suggestion and some coaching by  @James , I have created a User Script version. This is useful for those admins that can't or don't want to install this script in their Canvas Theme/Global JavaScript. This script is identical to the global JavaScript file, except that the CSS will be added to the DOM by the script and has the various userscript requirements at the top for Tampermonkey.

  1. You will need to install and enable the Tampermonkey browser extension
  2. Install the UserScript version of admintray-subaccmenu.user.js

Known Issues

If you are not a root admin of your Canvas Instance, you will need to set (1) sub account in the root setting. At this time you cannot add multiple sub accounts. I am planning to fix this.

Code repo here...

ccsd-canvas/admintray-subaccmenu at master · robert-carroll/ccsd-canvas · GitHub

Credits for Blog Post Banner Image

Public domain

Chart of Hell
File:Sandro Botticelli - La Carte de l'Enfer.jpg - Wikimedia Commons
 

Botticelli : de Laurent le Magnifique à Savonarole : catalogue de l'exposition à Paris, Musée du Luxembourg, du 1er octobre 2003 au 22 février 2004 et à Florence, Palazzo Strozzi, du 10 mars au 11 juillet 2004. Milan : Skira editore, Paris : Musée du Luxembourg, 2003. ISBN 9788884915641

{{PD-US}}
This media file is in the public domain in the United States. This applies to U.S. works where the copyright has expired, often because its first publication occurred prior to January 1, 1923. See this page for further explanation.

64 Comments
robotcars
Community Champion

Hi Mike,

My browsers do not like your domains, not sure if that'll be an issue here.

Your includes being...

// @include https://lms.au.af.edu/*

// @include https://lms.stag.af.edu/*

The fact that you are seeing the loading indicator is a good sign everything is ready to go.

Are you seeing NaN continuously? (I usually see this at init() and then its 1, 2...)

If you open the Network Tab in the browser Developer Tools do you see any API requests to sub_accounts?

291593_Screen Shot 2018-09-21 at 9.30.49 AM.png

canvas18
Community Member

Sorry about the certificates thing.  Even though Canvas is available via the open internet, DoD PKI certificates are still required to access our site freely.  If you want them, they are available to students & the public here:  (That said, not sure what you would see....)

The only thing I see in the network monitor is an unread_count.  No calls for sub_accounts.

And, yes, NaN appears continuously.

I don't have ROOT admin permissions, just to the subaccounts I manage.  Could that be part of the problem?

canvas18
Community Member

Ah ha!  Just refreshed the page and found this.  So it is probably a permissions issue.  Now I just need to figure out which one.

  1. {status: "unauthorized", errors: [{message: "user not authorized to perform that action"}]}
    1. errors[{message: "user not authorized to perform that action"}]
      1. 0{message: "user not authorized to perform that action"}
        1. message"user not authorized to perform that action"
    2. status"unauthorized"
robotcars
Community Champion

Masquerading as a different user, who is an admin of a sub account. I see that error too.

OK! I've made an error getting confident with 'self' and not expecting non root admins to use this.

 

Committed change for all 3 versions, pretty, minified, and user script.

robert-carroll/ccsd-canvas@62e3c58 · GitHub

This allows a user who is not a root admin, to set the sub account id they are an admin of in the script's settings. It does not currently handle a potential issue if the user (wanting to use the script) is an admin of multiple sub accounts and would need navigation for each. That will require some additional code.

Thanks for the feedback  @canvas18 

canvas18
Community Member

Robert,

The updates work like a charm -- I can now see all our sub-accounts in the tray.  As it so happens, I am admin for two different sub-accounts, but only one of those uses nested sub-sub accounts... so this is great!

Thanks for all the effort on your first userscript!

v/r
 MJH

robotcars
Community Champion

That's great Mike!

Allowing an array of sub accounts the user has access to is now on my short list for the project.

I'd like to automate this for the user so there's no leg work in finding the account ids, unless required.

I find that if I use the following api endpoint with a non-root admin, I get a list of accounts the user has access too.

Can you confirm?

// jquery with a little es6 output to the console
$.getJSON('/api/v1/accounts', r => console.log(r) );
canvas18
Community Member

Get this when run (which I didn't know I could do with ctrl-shft-J!):

0: {id: "394", name: "AU Teaching and Learning Center", workflow_state: "active", parent_account_id: "146", root_account_id: "1", …}
1: {id: "394", name: "AU Teaching and Learning Center", workflow_state: "active", parent_account_id: "146", root_account_id: "1", …}
2: {id: "160", name: "eSchool of Graduate PME", workflow_state: "active", parent_account_id: "150", root_account_id: "1", …}

And yes, that matches the number of subaccounts in my list....

robotcars
Community Champion

Thanks for the confirmation Mike! I can start working on using that to automate this for you and others.

I use cmd+opt+j to open in Chrome on Mac.

This is why I usually tell new users just to Right Click and Choose Inspect

Shar
Community Champion

Hi Robert Carroll,

I ended up going through this whole thread (clicking on non-existent github links) just to get to this juicy bit about the completed User Script version. I encourage you to promote that block to the top of the page.

Also, I ended up installing it by copy from your github and then paste into Tampermonkey New User Script window. Is that the way I do it? Because now I'm getting a little notification on Tampermonkey that I've never seen before.I'm using Chrome.

Tampermonkey notification in chrome browser

And finally a huge thank-you for making this script in the first place, I'm new to an admin role and anything to save me from the subaccount click trail is good magic. And thanks to  @James ‌ encouraging the development of the user script. Smiley Happy

Cheers - Shar

canvas18
Community Member

Shar,

That simply means that there is 1 script running on the page you are viewing.  Normal status.

We love this script!  It has made navigating all of my sub-accounts effortless.

vr

 MJH

robotcars
Community Champion

Hi ishar-uw,

You're welcome, glad it's useful for you. Thank you for the feedback!

Sorry about some of those GitHub links, they were 'gists' which were temporary and removed when I committed the current version to the actual repository, I'll try to get those cleaned up. I do need to update the original post with the user script information. I was planning to, but have just been busy.

Mike is correct, the flag on Tampermonkey is showing how many scripts are enabled/running on the current page.

 @canvas18 ,

I'm still working on getting this updated so it will handle multiple sub accounts for those admins that are not root. I was tinkered with it, and found that the JavaScript needed Promises to handle the creation correctly, and then went down a rabbit whole of analyzing all my options for JavaScript AJAX  requests with jQuery, XHR, and FetchAPI. I've also had less time to tinker with code at home lately.

canvas18
Community Member

Robert,

I'm simply pleased that you got it working with my largest subaccount!  There is a brute force way around this (which I haven't tried yet)...separate userscripts with different includes (one script per highest-level subaccount).  I'll give that a try this weekend. 

Again, thanks for all you do.  I'm formulating my next big project for you now...(insert evil laugh).

v/r

 MJH

robotcars
Community Champion

HAHA. :smileygrin:

I believe you would need to adjust the instance keys for the local storage if you do that.

You're welcome Mike! Bring it on, time is getting limited... but may find some too, if the forces permit.

I'm still working on releasing theSyllabus Without Assignments hack, it's almost done.

robotcars
Community Champion

Is anyone interested in beta testing a new version of this?

  • Global and Responsive Menu placement
  • No jQuery
  • Searches a JSON object vs HTML (better loading for large lists)
  • Consortium Support (sub accounts across multiple trust instances)