Custom JavaScript for Admin/Courses Page

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

Find more posts tagged with

Accepted answers

All comments

jperkins

@canvas18 ‌,

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.

Boekenoogen

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

unknown

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).

Any thoughts?

Robert

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.

James

@canvas18 ,

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" modifiedtitle="true" title="Display Course Code in Admin Course Search Results. 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.

dgrobani

Has anyone else noticed that a course search using the old URL format continues to display its results in the old course list format? I discovered this because for years I've used a Firefox keyword bookmark to search for courses, and it still works: https://samuelmerritt.instructure.com/accounts/99999/courses?course[name]=%s

unknown

Holy cow! I go away for a week and come back to 31 replies. It will take me time to wade thru all of this, but I must admit -- you folks are great!

On behalf of 30,000+ Air Force students world wide, thanks for taking your time to look at this.

I'm sure I will have tons of followup questions!

v/r
MJH

MAJ18

Wow! @James & carroll-ccsd it is a fascinating peak into the process to see you guys work. Have you thought about selling spots for people to just watch your live coding meeting? I don't think that I understood most of what you guys were saying but could follow the general direction. I love watch people that excel at what they do. It makes no difference to me if it is a musician, an athlete or a coder. It is truly a magnificent work of art. Keep up the great work!

Robert

There's an Issue #1 · GitHub for this in my repo, suggesting to make the links hidden until hover. Thoughts?

This is the proposed CSS, see L5 and L16

<SPAN class="selector token">div.rc-course-links ul</SPAN> <SPAN class="punctuation token">{</SPAN> <BR />    <SPAN class="property token">list-style</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 0.8rem<SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="property token">margin-left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="property token">visibility</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><SPAN class="selector token">div.rc-course-links ul li</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> inline<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><SPAN class="selector token">div.rc-course-links ul li:not(:first-child):before</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">" | "</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><SPAN class="selector token">div.rc-course-links ul li a</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #999<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><SPAN class="selector token">[data-automation="courses list"] tr:hover .rc-course-links ul</SPAN> <SPAN class="punctuation token">{</SPAN><BR />     <SPAN class="property token">visibility</SPAN><SPAN class="punctuation token">:</SPAN> visible <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

unknown

Well, a bit late report here...but I love this script! We've been using it here for the last two weeks and it's AWESOME!

Below, the promised screenshot. Our developers and student service folks are very happy.

Right now we are running the userscript from James, but I've submitted a request for Robert's permanent solution.

Admin Links Userscript Example

Thanks again to both of you...and the community. Without all your support, we would never launch on time.

v/r
MJH

Unanswered Questions

Concluded Course and Canvas Data Services
Canvas Data Services sent out an alert that a course was concluded (because the course was concluded) and the status of each user in the UI is set to complete, however, the enrollments API endpoint shows the status of each user in the course as active. Is this a common issue? Have I misinterpreted how the individual…
Canvas Media Question
How can one track Canvas Media use without having the reports available from Canvas Studio? Checking API endpoints and the Data 2 schema, there do not seem to be dedicated Canvas Media endpoints. Am I missing some? A method I've considered is using the body field of the wiki_pages table, as this contains the html code of…
Canvas Catalog API - Completed Certificates
Hello, I'm trying to utilize an API call to pull completed certificates and was hoping to download and store the certs as a backup. I can successfully run the API call but it will not allow me to view the certificate unless I access the URL while signed into an account where it's "my" cert. Is there a permissions setting…
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…
Canvas integration with React + Flask webapp - initially for authenticaiton
I have a new React + Flask webapp. It has its own login for users to start using the app. I have added this as an external tool in Canvas. What I want initially is to see of canvas users can start using the webapp without having to login if they click on the external tool link in a canvas course. I have 2 methods…