cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Surveyor

Custom JavaScript for Admin/Courses Page

Jump to solution

Hello all,

I'm looking for help with some custom JavaScript on the Admin/Courses page.  We have a large number of courses and we would like to add a direct link to "People" and "Files" as shown in the graphic below to streamline our workflow.

Any thoughts on how I could implement this in our custom JS theme file?

276198_Improved Courses Page.png

Thanks

v/r

 MJH

1 Solution

Accepted Solutions
Highlighted

I'm adding both contributions to this reply, so the answer is easy to find at the top.

Both provide the same solution and the user should be able to run either one.

User Script by james@richland.edu

James' version of the solution is up on the Canvancement GitHub site: Admin Course Links

It is a user script that should work without modification as a global JavaScript file.

Global - Canvas Theme Editor by carroll-ccsd

My version is also available on Github: ccsd-canvas/admin-course-links

It is intended to be used in the Canvas Theme Editor, along with any other global changes you make there.

Good times!

View solution in original post

66 Replies
Highlighted
Instructure
Instructure

canvas@mikehower.me‌,

I'd recommend that you turn on the new "Account Course and User Search" feature option. It lets you add users directly from the account page and a couple other features that might meet your needs. It has all the buttons you are looking for there except for files. And since that'll be the new default screen eventually, I'd recommend adding customizations to it.

Highlighted

Jeremy,

Thanks!  I was unaware of this new feature option.  Unfortunately, we are on self-hosted Canvas and about 6 months behind.  Eventually we should be able to get this (perhaps by Christmas).  Until then, we'd really like to mod the Courses page.

Highlighted

Mike,

This should work for you. To keep it simple I didn't resort the list of links. I also added Analytics... you can add/remove links pretty easily.

// edit: the code that was here no longer works, there are now two options available

// see #comment-113056

Highlighted

Robert,

This is perfect!  Already tested and implemented.  My LMS and student services folks are incredibly pleased.

This is why I love this community.

v/r

 MJH

276231_sample look and feel.png

Highlighted

Mike Hower wrote:

...This is why I love this community...

Yep!

TIL: V/R = Very Respectfully

Highlighted
Learner II

This is really cool. I can't wait to test this in our system.

Highlighted
Surveyor

This has been an amazing tweak to the system for the last 3 months, but we've now moved to the new Course and People search page.  Our folks who grew used to the shortcuts from the Admin...Courses page now lament its loss.

I've looked at the code to see if I could implement a change in theme-level JS, but it now appears to be built with React (which makes my head hurt even more).

Would anybody have an idea how to recode the above to do something like the below?  (While I like the icon mockup on line 1, my student services team would prefer the text-based mockups on line 2 so that they don't have to change their procedures).

mockup option...new course search page.

Any thoughts?

Highlighted
Community Advocate
Community Advocate

You're not the only one, React makes my head hurt too.

I think I can do this. I will probably try row of text links though. The unmodified UI seems to provide more space there without obstructing the layout.

I'll try and play with this later this week and reply with the results.

Highlighted
Navigator

canvas@mikehower.me,

Here is a link to another related feature idea that wants to add things to the course search page: https://community.canvaslms.com/ideas/11332-display-course-code-in-admin-course-search-results" modi.... I'm sharing because any solution may be similar.

There I shared some quick research I did after InstructureCon about what might be involved. It looks like attaching a Mutation Observer to the page to see when the content reloads is the first step. The second is not to rely on CSS classes, but to look at what column in the table it's in. Hopefully that doesn't vary based on whose looking at it like it does with the course roster (People) page.

At InstructureCon, one of the Canvas VP's I talked to actively discouraged using custom JavaScript and CSS to accomplish things like this and said it's going to happen more and more when they move more to React. His suggestion was to use the API or LTI if possible, and if you had a use case for the inclusion of classes, then make it.