I've written a script that will allow users to sort their dashboard course cards by dragging and dropping the cards into the proper order.
This seems to have been a popular request that Canvas has repeatedly said will take too much effort to develop.
- Reorder Dashboard Boxes (archived with 180 votes and a September 2016 note from Canvas)
- Drag Courses on Dashboard (archived with 177 votes and a January 2016 note from Canvas)
- Reorder Class List
- BEING ABLE TO MOVE THE COURSES AROUND
- How do I reorder the course tabs on my Dashboard?
There are probably others that I'm missing, but that's a quick list.
What it does
The script runs on the dashboard for your Canvas installation. It checks to see if the user has sorted the course cards and arranges them in the order the user has specified.
If there is more than one course card, it allow the course cards to be sorted using a drag and drop capability. When cards are dragged to their new location, the current sort order is automatically saved.
If new courses are added to the favorites through the Courses navigation item, they are placed at the front of the existing course cards. The user will need to move them if they don't want them at the front.
The user's sort order can be removed and the ordering reset to the Canvas default by removing all but one course from the favorites and then loading the dashboard.
The process is so simple and straight forward that coming up with a video that demonstrates what it does was challenging. I managed to stretch it out to 15 seconds.
As an institution for all users
As an individual for yourself
If your institution won't install this for all users, you can still use it by installing it yourself. If your institution later installs the script for all users, you will want to remove the version you installed.
Note that you will need to install this script on every browser that you want the course cards sorted.
The quick installation instructions are:
- Install a browser add-on: Greasemonkey for Firefox or Tampermonkey for Chrome/Safari.
- Install the Dashboard Card Sorter script
If your Canvas site has a custom domain that does not match *.instructure.com, then you will need to modify the // @include line to specify your Canvas installation.
Canvas apps aren't supported
I have tested this in various browsers, including Safari on an iPhone. It has worked in all those browsers that I tested.
However, it did not work within the Canvas iOS app and I can only assume that it will not work in the Android app either, but I don't have access to test it.
I don't know if this can be remedied or if we're just out of luck. I'm happy to hear from someone who is more knowledgeable with the apps and can tell me how to make it work or who can confirm that it never will.
Behinds the scenes (technical -- optional)
The script uses the jQuery sortable method, which enables the drag and drop feature. jQuery is included on each page by Canvas, so no extra libraries were needed. I used the browser's console to quickly add a .sortable() to the dashboard cards as a proof-of-concept before starting the project in earnest. That part was quick and relatively painless.
I've done a lot of work with MutationObservers with other scripts, so this was not as difficult as it seems. You just need to watch for the right thing to happen. It turned out that the first change that was made to the dashboard cards was sufficient to start the process.
A second hurdle was saving the sort order. When I originally contemplated this project, I thought about saving it using the local storage for the browser. That would have worked for people who use the same machine and browser every time, but it would not work for people who move around between computers or change browsers.
This was the first time I've used the custom user data, so I had to learn how that works. Here is some advice for those considering it:
- You need a namespace to separate your applications data from possible conflicts. Canvas recommends a reverse domain name, but I don't have a domain name for my Canvancements, so I just used "canvancement" as the namespace.
- You also specify a scope, which is a way to have multiple values within your namespace. I chose "/dashboard/order". These are specified near the top of the source code and you are free to modify them to something else.
- The actual data is stored under the field "data" within the namespace and scope. So, if you're expecting a comma separated list of course IDs, you don't just get that, but you get a JSON object with a property called "data" that contains the comma separated list of course IDs. That's okay once you know that's what it's doing, but I was expecting it to work like a cookie. Once you understand it, it makes sense, but it either wasn't clear or I missed it in the documentation so I mention it here.
A third hurdle was the timing issue. AJAX calls are asynchronous and so I had no idea whether the call to load the custom sort order would be done before or after the MutationObserver had detected it was ready to start sorting. I ended up using a couple of scoped variables to check and when the custom sort order was done loading, it checked to see if the cards were ready. The call that happened when the cards were ready checked to see if the sort order had been loaded. By the way, the sort order may not ever be loaded and won't be the user has never sorted the cards.