Sorting Dashboard Course Cards

[James]

December 8, 2018 - No Longer Needed

Canvas has released their own solution for sorting the dashboard course cards. You should remove this script and use their solution. Things should continue to work until you do, but the effort is being duplicated. Any customization to the sort order will be lost when you remove this script.

I'm leaving the documentation and script out here for institutions that self-host and have not updated to the December 8, 2018, release.

Original Documentation

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.

•   (archived with 180 votes and a September 2016 note from Canvas)
• (archived with 177 votes and a January 2016 note from Canvas)
• How do I reorder the course tabs on my Dashboard?

There are probably others that I'm missing, but that's a quick list.

The script was written as a user script, meant to be used by Greasemonkey with Firefox or Tampermonkey with Chrome or Safari. However, the exact same code can also be used in the custom JavaScript file for an institution.

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.

Video

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.

Installation

As an institution for all users

If you are a Canvas Admin and would like to install this script in your Custom JavaScript file for the entire account, then obtain the source code from the Canvancement site.

The file is called dashcard_sorter.user.js. Normally, the *.user.js notation is reserved for user scripts, but in this case the code will work as either a user script or a custom JavaScript, so rather than create two identical files, I just used the one. You do not need to include the user script metadata (all the lines starting with //) at the top of the file.

Add this code to your existing custom JavaScript and re-upload it to your theme. Then save and apply the theme. I added it to the global JavaScript file as well as the global Mobile JavaScript file, although I'll admit I'm not clear on what the Mobile one does.

Of all the scripts I've written, this is actually the first one that we've installed in our custom JavaScript. It has been tested with the latest versions of Firefox, Chrome, Safari (Mac), and yes, even Internet Explorer and Edge.

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:

1. Install a browser add-on: Greasemonkey for Firefox or Tampermonkey for Chrome/Safari.
2. 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.

The first hurdle was waiting until the course cards were ready before acting on them. The course cards are available as an empty shell that is available as soon as the page is loaded, but all of the content of the cards is loaded after the initial load using JavaScript. That makes determining which course is associated with the card impossible until the cards are filled out. I guess that I could know the order of the cards based off the array that is included in the ENV.DASHBOARD_COURSES variable when the page is loaded, but I wasn't sure what else was going on behind the scenes so I decided not to risk manipulating it until Canvas had added the content. I used a MutationObserver to wait until the cards could be associated with a course and then begin the processing.

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.

The solution to that problem was to use the Canvas User Custom Data API. It stores the preferred sort order within Canvas so that it can follow users from machine to machine and browser to browser. If an institution doesn't install the script in their global JavaScript, the user will still need to load the user script on the machines, but then they won't have to reconfigure it each time.

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.
• While developing this as a user script, it worked fine, but when I went to the global custom JavaScript file, my data was getting returned with a while(1); followed by the JSON object. I've seen that before when typing an API call directly from the browser, so I knew what it was. The trick to get rid of it was to force the dataType to be json. That can also be done by using the jQuery.getJSON() method instead of the jQuery.get() method.

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.

[Stef_retired]

So incredibly easy to deploy,  @James ! I had to exit and restart Chrome in order for the script to do its magic--but once I did, presto! Dragging and dropping proceeds! Thanks!

Total time: Searching for and installing Tampermonkey extension on Chrome, 10 seconds (most of which involved reading); copying link to script from Firefox and pasting into Chrome, 3 seconds; running the script, less than a second; exiting and relaunching browser, 3 seconds. I can see how you were hard pressed to come up with a 15-second video.

[jbrady2]

 @James ​ Thanks for taking the time to create this fix. While my dashboard is not that cluttered, as of now, it will become that way in the near future as our department begins to offer FPD courses through Canvas.  This will be very helpful for keeping my pertinent courses near the top and placing the FPD offerings out-of-sight but still accessible through the dashboard.

[llane2]

James, this is great and so easy to use when I have no access to the install. I am developing a number of classes and I think of them in numerical order. This really helps speed up my workflow.

[schutt_j]

This is a great app! THANK YOU!

[sidiog]

Hi James et al.

 Sorry if you've already answered this but it looks like the script makes the following API calls:

1 delete and 1 PUT per card move

and

1 GET per dashboard load

 Is this correct? If so do these count towards any API call quota\limitation that Canvas may or may not enforce?

Thanks,

 Gandalf Sidio

Educational Technology

Missouri University of Science and Technology

[James]

 @sidiog ‌,

There should only be a DELETE if you completely wipe out the ordering. For each page load, there is 1 GET and for every drag, there is 1 PUT. If you add new courses, then there should be a GET followed by a PUT, but that should just be a single PUT.

Those would count against any quota, but it's not going to be an issue unless you're doing a bunch of really other bad stuff because they're spaced out (it probably averages at least a 1/2 second between drag/drops). I've ran scripts that pound it hard with 158 GETs back to back as quickly as it can (as soon as one finishes, the next begins) and never ran into issues. I've had other things that make 5 simultaneous requests for a while. The closest I ever got to a timeout or restriction turned out to be a browser issue instead of Canvas -- Chrome timed out after 5 minutes but Firefox continued to run for 15 with fetching a lot of data.

[sidiog]

Okay cool. Thanks James!

[jbrady2]

 @James ‌ I was wondering if you know if similar coding could be applied to the All Courses page to allow the order in which the courses are listed to be rearranged? In our department, faculty professional development, we have adopted Canvas Catalog to host FPD courses, which then means that my All Courses page now shows every FPD course that I am creating/teaching/testing, faculty courses in which I am enrolled as an instructional designer, and courses in which I am an adjunct. It would be great if I could add some of my own organization to the All Courses page in addition to the already provided Past and Future Enrollments. Ideally, I would be able to also add text headers to separate course depending upon my role. Would this be something better handled as a Feature Idea?

[James]

 @jbrady2 ,

I looked at that when I wrote the dashboard course card sorter and decided that it would not be a good fit with the courses menu item. I know you specifically asked about the "All Courses", but I'll give the background before getting to that. The data is loaded dynamically after clicking a link that is part of the global navigation, which means that I would have to watch every page within Canvas to see if the navigation link was clicked and the sort-order needed applied. Since the content was loaded dynamically, I would have to wait for the content to load, which meant installing a mutation observer.

You specifically talked about the All Courses page and that could be handled without installing a watcher on every single Canvas page. I was relying on that page to list all of the courses while the code I was writing at the time was dealing with just the dashboard course cards, which shows just the favorites.

The actual drag/drop to sort could be done by watching for the /courses page (All Courses) to be loaded, but I didn't see as much gain for people as the dashboard course cards. I also didn't have an easy way to reset the list other than to add a button to do so and there wasn't an existing menu to add it to.

So, could it be done? -- probably.  It might be easier as a feature request, but based off previous feature requests of this kind, it's unlikely to go anywhere.

Rant mode on:

That said, I've got a bigger issue. Canvas has decided they're going to deprecate the jQuery UI widgets at some point and that people should include their own code rather than relying on Canvas' internal libraries. The dashboard course card sorter uses the jQuery UI .sortable widget. Other things like the Rubric Importer use the jQuery UI dialog (because the official recommendation is to use React, but React isn't exposed). I haven't done any testing yet as I'm still trying to figure out how to do that, so I might have this wrong, but it sounds like a big mess -- much bigger than using the requirejs() deprecation was earlier this year.

I haven't heard their side, but my reaction so far is that it's a bad idea (change is not necessarily bad, but change that breaks stuff is scary). Recent changes like going to WebPack and hiding all of the libraries, like I18n and React, are making it harder for me to do the things that I do to make it easier for other people to do the things they want to do.

Debugging has definitely gotten harder as things are now chunked due to WebPack and every function is named with a number rather than a useful name.

The style guide has not been updated to reflect what people should do without jQuery UI, in fact, it still says to use jQuery UI. so I need to figure out the "proper" way to do things without documentation, which is difficult since their deprecation notice says "you're using undocumented features". Rather than encouraging people to do things the way that Canvas does things, it ends up encouraging people to do things their own way. That means that Canvas loads a library and I have to turn around and load the same library a second time. And since Canvas is using WebPack and the names of the scripts change, I can't even load it from the same place that they load it from and benefit from the caching, I have to load it a second time and use up more network traffic (bad for those with data plans or slow connections).

If they're using React for things, then everyone will have to load their own React libraries. If I have to load jQuery and jQuery-UI, then some of my code, like the dashboard course card sorter that worked equally well as user script or inclusion in the global custom JavaScript file will needlessly be more difficult. Everyone who used tabs or accordions or made something sortable is going to have to start including custom JavaScript or lose that functionality.

And it may be that I'm just freaking out without reason. If anyone understands all this stuff and the best way to make it work, please contact me and share the wisdom.

[connerla]

So easy to do!  I love it.  Thank you for writing this script!

[dicksonl]

Thank you,  @James !

[bbaumgartner]

Thank you!

[lawd]

This is great! So I am curious about the ENV object. I have never seen this before, but after typing it into the console I am blown away by what is available within it. Does Canvas have any sort of documentation on this? How did you come across this?

[James]

 @lawd , it's been a while, but I imagine I discovered them in my search for the information needed to do what I need to do and found them by looking through the browser's developer tools and the console for anything that was available. ENV and INST objects are two things that Canvas exposes, and they used to expose some others, but have recently made efforts to only expose things that are absolutely necessary.

As far as what's documented, someone from Instructure / Canvas would have to comment on that one. Even then, it may not be a definitive source in a single document, though. Certain things appear on some pages and not others, so it's possible that there are some globals and then each area (quizzes, discussions, assignments, pages, calendar, etc) can use it as needed. I try not to use it if there's another way of getting the information. That might just be me, but I prefer documented things when possible.

[akinsey]

I'm so glad I found this today! Probably the easiest thing I've ever installed and done to help with personalizing Canvas. Thanks  @James ‌!

[nordelr]

Hey James,

So glad you wrote a script to solve this issue...so very helpful!

I installed both Tampermonkey and the script on both computers I regularly use. I've closed and restarted the Chrome browser on both computers, but Tampermonkey states "No script is running" even though your script display in the Tampermonkey dashboard. See screen shot  below.

Any suggestions? 

[nordelr]

Well, I spoke too soon. The script mysteriously began working, and I'm able sort the tiles on my Canvas Dashboard...which is AWESOME!!

Thank you James!!

R

[awarmar]

I'm having the exact same issue....so I'm crossing my fingers that the next time I try, mine will also magically be working! 

[James]

Two things come to mind.

The first is that I've seen some times where the script count on the Tampermonkey icon isn't correct but the scripts are still loading. I don't think that's the case, but it's not unheard of.

The second deals with you being from the University of Oklahoma. Did you catch the line that says ...

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.

OU uses canvas.ou.edu instead of something like ou.instructure.com and so the code won't there unless you edit the code to modify the line of where to run it.  To do that, click on the Tampermonkey icon, choose Dashboard, find the script, click on it, make the change in the heading, and then save it. 

Line 1 is what it comes with. Line 2 is what you should need for OU.

// @include     https://*.instructure.com/
// @include     https://canvas.ou.edu/‍‍

If OU is self-hosting, they may have done other things that keep it from working, but at least Tampermonkey should say it's running 1 script - maybe.

[awarmar]

 Thanks for getting back to me so quickly! Unfortunately, I did switch the @include    So far, still no luck. But I've not had much time to play with what else might be wrong yet today so hopefully, it will work yet! 

[pkemp]

The inability to arrange my dashboard in a way that flows and makes sense to me was absolutely maddening! Thank you for the time and effort you spent developing this script.  My work-life just got better.

[pkemp]

I have been having the same problem with Chrome, but it is working beautifully with Firefox.

[James]

I'm not sure what is happening and I am unable to duplicate the issue with Chrome. We have it loaded in our custom JavaScript for our entire Canvas instance and I just tested it and verified that it was working with Chrome.

If someone experiencing the trouble with Chrome has some technical skills (can modify the source code) and wants to help me debug the issue, please reach out to me by email (my address shows up when you mouse over my name).

[pkemp]

I wish I had those skills; trying to learn them. Again, thanks for all you do.

Sent via the Samsung Galaxy S8, an AT&T 4G LTE smartphone

[jtroupe]

When I installed the script at the installation level on my beta site all of my colors changed.  Have you ever heard of this before?

[James]

No, I haven't. In theory, it shouldn't touch any of that, it waits for the information to be sent to the DOM and then it sorts it. But it is possible that the colors are being assigned after the sorting happens if Canvas has changed the way things are updated. When I wrote it, there was one massive update to the 'div#DashboardCard_Container' element and so I just checked for the first update and then made my changes. It may be that I need to wait for something else to happen now.

Are you per-chance using images with those course cards? I didn't test it with those. I don't think that's the issue you're experiencing, but I'm throwing out possibilities to try and narrow something down.

To confirm, is the change only cosmetic on the dashboard. If you go into the Calendar, the colors are still correct?

[helfco]

Hi James. Our Admin installed this within Canvas and it was working fine last week. This week I've noticed that the browser doesn't save the order of the cards anymore. Still lets you drag and drop, but when you log out and back in the cards aren't where you left them. Tested in Chrome and Firefox. Not sure if this is due to a Canvas update or something our admin might have changed in the script. Thought I'd report it in case anyone else is seeing this behavior or if it's just me. 

Thanks!

[James]

 @helfco ,

A constant fear when you apply customizations is that Canvas will come along and change something that will break it -- and there was a new Canvas release over the weekend, so it would be a prime time to break. That said, it's still working for me inside Firefox. To test it in Chrome would mean I would have to stop writing this message.

Since there was an update, the first thing to try is clearing your brower's cache (Ctrl-F5 may do this and reload the page) to make sure you're getting the latest of everything and there's nothing stale left around. It's probably worked itself out by now, but that's a good first rule of debugging anything. If that doesn't fix the issue when you reload the page, then move on.

You can do some sleuth work yourself or you can talk to your Canvas Admin and see if something changed.

For sleuthing, here's what I did (in Firefox, but it's similar in Chrome).

1. Press F12 to pull up the Developer Tools.
2. Switch to the Network tab and make sure the XHR button is selected (others can be as well, but XHR is what we're after)
   
3. Reload the Dashboard and look at what gets loaded. You should see something like this:
   
   
   • The first GET is the name of the global custom JavaScript file that I uploaded to Canvas, so it's highly unlikely that your name will be the same as yours. However, if you don't see something, then there's a good chance you are not using a global custom JavaScript file, which could explain why it's not working.'
   • The second highlighted GET is from my code. It's going out and looking for the Custom User Data where I stored the list the last time you changed it. If that's not showing up, then my code isn't being executed or you Canvas Admin changed it.
4. Now drag something around on the Dashboard and then check the network traffic again. This time, you should see something like (I removed the other lines to save space)
   
   
   

If any of the items with the red highlights aren't happening, or the second GET has some code other than 200 (success) or 304 (not modified) or the PUT has a code other than 200, then that provides a clue as to where things are going wrong.

It could be something as simple as the Canvas Admin applied it to the test instance and then that got reset with the new production instance, so it's gone. Be sure to involve your local Canvas Admin in any discussions.

This is a script that a user can run on their own if their Canvas Admin doesn't want to install it globally.

[helfco]

Thanks for the detailed response. I dug deeper today and figured out what's happening. The good news is that there's nothing wrong due to the code or Canvas update.

The issue was that I had a class on my dashboard from a different Canvas instance. It was a CCC Online Ed course. I hid that course from my dashboard and the tool was working again. My guess from one of your previous responses is that because the javascript didn't have a line to include the CCC Online Ed domain, that particular course on my dashboard didn't want to behave. 

This may be a factor if the sorting tool is installed globally on one school's account, but the teacher has their Canvas account linked to multiple Canvas instances from different schools.

Can I have our admin add a line in the code to include multiple domains?

Thanks again.

[James]

 @helfco ,

Can I have our admin add a line in the code to include multiple domains?

It's probably not as easy as just adding a line and I have no way of testing it since I only have the single instance of Canvas.  The call to fetch information is made to the host that you're running on (your school's instance) and it would not know about the CCC Online Ed course. I don't know if that information is contained anywhere else in the dashboard card. I didn't know to look for it at the time I wrote it since I only have the one instance to play with.

That said, there doesn't appear to be anything in the code that checks for the instance. But I did make an assumption that there is only one block of dashboard cards and it's probably grabbing the first one if there is more than one. How does it appear when you have multiple instances -- are they all ran together or is it separated somehow? If separated somehow, then I might be able to just modify one line in the CSS selector.

[helfco]

It looks like the cards are all run together. I made a screencast video to show what is going on:

[tdionne]

 @akadenic ‌ This will be good to know - I'm sure there will be such requests next fall. 

[gibsonjb]

This was a great script!  But it has stopped working with the latest Firefox update (version 57)... at least for me. 

[James]

 @gibsonjb , sorry I missed this for a month.

It is an issue with changes to Firefox 57 and the way they handle extensions that caused a rewrite of Greasemonkey and the combination of the two do not currently play nice together. I detailed this on the main Canvancements - Canvas Enhancements‌ page so that I wouldn't have to explain it on every separate document and blog, but there's no way to know that unless you go looking. The recommendation for now is to stop using Greasemonkey and start using Tampermonkey. I'm sad as well, but the changes that Greasemonkey made break one of the main reasons I liked it in the first place. I'm not a fan of the new Greasemonkey, especially the part about it doesn't work.

[kmclean]

Have the latest changes to Canvas, Chrome, and/or Firefox keep your script from working anymore?  I've tried to follow the installation instructions, but I have noticed no remedy.  I also get the indication that "No script is running."  Perhaps I missed a step, too. Was I supposed to make any changes to the default settings of Tampermonkey or Dashboard Card Sorter?

[James]

Sorry for the short response - I have to be 20 minutes away in 24 minutes. We are running it at the institutional level through the custom global JavaScript and it still works. If you are running it through a user script then make sure you're using Tampermonkey and not Greasemonkey.

[probinson1]

Yes. It ran and now it does not. Very frustrating (and not frustrated at all with James, I'm certain it's an update issue).

The super odd thing is that on my Mac it's all good. On the work PC it all worked yesterday...until it didn't.

I'm going to submit this script thing to our campus admins to see if they'll do this at the user account level. I'm not the only one here who wants to do this.

Polly

[jbrady2]

I have found that after an update to Firefox or Chrome, it often quits working for me, and I have had to reinstall the script to get it working again. I know it is not ideal to have to do this after every update, but it might help fix the issue.

[James]

Interesting -- and weird. I've not heard of having to reinstall it, but most people who can't get something to work never say anything, they just ignore it.

We put ours in the global custom JavaScript, so I don't run it through Tampermonkey or Greasemonkey. Greasemonkey should have major problems right now since it doesn't expose the libraries on the page like jQuery anymore, so make sure people are using Tampermonkey.

The only issue I'm aware of seems to be with people using the browser on their phones. I've had 2 students in 1.5 years that can't click on anything, it only drags. I'm looking for the common thread, but a sample size of 2 is kind of small. It might be that they're using Samsung phones and there's a jQuery issue with them??? It's one of those things that you don't know how big the problem is and they can click on courses and then get to their courses, so it's not been a high priority for me.

[probinson1]

Okay, Tampermonkey works now. I pulled UserScript from a thing that was working (hid the annoying "Coming Up" list) and did this:

Replaced James' original UserScript:

// ==UserScript==
// @name Dashboard Card Sorter
// @namespace https://github.com/jamesjonesmath/canvancement
// @description Sort dashboard course cards using drag and drop
// @include https://*.instructure.com/
// @version 1
// @grant none
// ==/UserScript==

with THIS UserScript:
// ==UserScript==
// @name Dashboard Card Sorter
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Rearrange Cards on Dashboard
// @author James Jones
// @namespace https://github.com/jamesjonesmath/canvancement
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @include https://*.instructure.com/*
// @grant none
// ==/UserScript==

And now it works just great!

ETA: The above is most likely an ugly solution, but it is a solution.

[James]

That shouldn't have any impact at all and might cause problems (I'm not sure how the multiple entries for namespace work) and including scripts (waitForKeyElements.js) that aren't needed won't necessarily cause problems but it certainly is not a good fix. It's most likely just the case that Jeffrey mentioned about reinstalling it.

[jenna_townsend]

Such a great idea. Our district names classes for teachers, so often times the most used courses end up a bit buried. While giving nicknames and removing some courses from the dashboard helps, this is really the best option--thanks!

[pbishop]

Thanks for sharing this resource! I implemented the script in Chrome via Tampermonkey about a month ago.  It stopped working after I cleared my browsing data and cookies.  I had to go back into the script and re-enter my school's custom domain site.  The second time it stopped working, I'm assuming was related to a chrome update, so I just reinstalled the script and it's working again.  Just fyi in case anyone else runs into these issues.

[geralyn_stephen]

Hi James:  Unfortunately, I am experiencing trouble with this.  I used Chrome.  I  added Tampermonkey. Dashboard Card Sorter is installed and enabled.  However, it will not work.  I closed Chrome and reopened.  I also tried Firefox.  I added Greasemonkey. Dashboard Card Sorter is installed and enabled.  However, it will not work.  Unfortunately, I'm am unable to move any of my Canvas Dashboard cards.  I have not cleared any data/cookies.  To the best of my knowledge, we are not self-hosted.  Please share what else I might try. 

[James]

 @geralyn_stephen ,

It looks like you're using a custom domain for Canvas. It looks like canvas.wayne.edu rather than something like wayne.instructure.com. If so, you need to edit the source code and modify the // @include line to change from *.instructure.com to canvas.wayne.edu.

I seriously doubt that Greasemonkey will work. They made major changes last year that broke compatibility.

Don't have this script installed using both Greasemonkey and Tampermonkey at the same time.

[geralyn_stephen]

James:  I made the Tampermonkey change as follows:

// ==UserScript==
// @name Dashboard Card Sorter
// @namespace https://github.com/jamesjonesmath/canvancement
// @description Sort dashboard course cards using drag and drop
// @include https://canvas.wayne.edu
// @version 1
// @grant none
// ==/UserScript==

I also closed and restarted Chrome.  Unfortunately, I remain unable to move the Canvas Dashboard Cards.   Greasemonkey is not installed within Chrome.  It was only installed within Firefox.   Please share what else I might try.   As always, the gift of your time is appreciated!  -Geralyn

[James]

 @geralyn_stephen  

Try adding a / to the end of canvas.wayne.edu to get canvas.wayne.edu/

According to the documentation for the @match command, which is essentially the same as @include, it needs the / to be there.

If that doesn't work, the next thing to do is check and see if the script is even running on the page. To do this, look at the Tampermonkey icon and see if there is a red badge with the number of scripts being executed. If it's not there, then it's an issue recognizing the page. Until you get that 1 showing, it's a matter of making sure the script is enabled and the // @include line is right. The code will not execute without that.

If it's there, like the 1 showing in my picture, then there is 1 script running on the page. If you have more than one script and you're not sure what it is, then you can click on the icon and it will show which scripts are running.

If the badge is there and the script is running, then perhaps something is wrong with the code, but until we get to that point, it's not even running to have something wrong.

[geralyn_stephen]

Good Morning, James:  

YOU ARE MY HERO!!!!!!!  By simply adding the " / " -- the script WORKED !!    Your patience and the detailed explanation are appreciated.  We are new to Canvas and I am unfamiliar with such coding, however, your help is making our transition less painful!  Please enjoy your day~  Geralyn

[James]

This particular script was tested in the Custom Global JavaScript for an account and it is the only one that we have in our custom JavaScript. All of our browser-based users get that functionality and don't even know it's not part of Canvas. The userscript version is for people who can't get it installed at the global level and want to take things into their own hands.

It doesn't support mobile and every now and then we have some students who have issues with their smart phones and it not being clickable, it just tries to drag. The fix for that has been deprecated by jQuery UI, but for most of the students, it works well. It's not accessible in the sense that it doesn't add drag handles and doesn't work with a keyboard. That may be part of the reason that Canvas hasn't implemented it themselves. I know at one time they started working on it.

[geralyn_stephen]

Unfortunately, our Admin has already shared that they will not add this at the global level.....    They may reconsider when they are more comfortable with their new Canvas duties.  KEEPING HOPE ALIVE !!