Custom JavaScript for Admin/Courses Page

[canvas18]

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?

Thanks

v/r

 MJH

[James]

carroll-ccsd and I did a jsFiddle chat last night where we worked through the code and I think we're both close. We did decide that jsFiddle wasn't the best software for what we were trying to do, so if anyone knows of a free version that will allow you to edit the same code live without having to move to a new URL, has chat capability (web and voice nice, but neither one of us had that enabled last night), run the code as well, and works with mac and windows, let us know. Basically, I think if jsFiddle would have automatically updated or allowed live editing, we would have been happy.

Mostly he helped me iron out the final version of my script, which I think we're both pretty happy. I helped him figure out a regular expression issue. Overall, it was a good time exploring a lot of different things and real-time communication with someone else that understands what's going on, something I just don't get being the sole Canvas developer at my institution.

As for the scripts, I just need to publish mine and write it up and link to his version. Mine will run under a user script manager like Tampermonkey and technically should work without change under for global JavaScript as well, but I haven't tested it. His will work under the global JavaScript but should work under Tampermonkey if someone would throw the metadata at the top.

[awilliams]

Scratchpad.io is a decent live collaborative editor. You'll have to figure out how to do voice/chat separately though. Discord and Slack are both great options for the chatting as both now have voice calling.

[awilliams]

Also, the two of you are great and I had so much fun catching up on this!

[James]

It looks like (based on the splash page) that it's only HTML and CSS, though.

Strangely, for being as technical as you think we might be, neither Robert nor I had webcam or microphone. We both could have probably come up with those if we had to, but it wasn't an issue.

The one thing that I might have done differently after the fact is the retention. I didn't need code fragments floating around on the web forever, so Robert was going to delete the fiddle. But I forgot to save the chat with all of the links and discussions that were flying back and forth to look at later.

[robotcars]

Disappointingly, I was unable to delete any of it, because any attempt to delete even the code or replace it, created a new version. Apparently we can email JSFiddle to delete it. Fortunately, it's probably not necessary because there's no way to find those Hash url's unless you share it.

[James]

Well, in that case, please direct message me the URL and I'll go in and save the important stuff out of the chat. I do have to get to bed earlier, though. I was up until 4:30 this morning working on a school project. The last two days have not been good for my sleep cycle.

[robotcars]

I was planning to mention that last night, but didn't really open my laptop when I got home. Sent.

Ditto. Since last Thursday I have been up almost every evening until 1AM, last night was the first time I went to bed by 10.

[canvas18]

There are about 30K students in our professional development programs.  Our staff here includes about 50 course directors (the folks who write the courses), 5 student support folks, and 3 ISDs, and 2 LMS admins (and me).  All use the admin tab to quickly find what they need in courseware.  We run about 150 courses each month.

The interesting thing about our install:  We use open source Canvas hosted in a secure government cloud. This greatly restricts what we can do. Because of security and accreditation restrictions, I can't install LTIs without going through great pain. Theme-level JS I control directly.  Account-level JS is doable.  User-side scripts are no problems. ..

Truly appreciate everything you and James have been puzzling on!

[James]

 @canvas18 , carroll-ccsd went through and added links for many of the navigation items on the course menu. I think in my final version, we put 3 in the package as delivered. I don't remember which 3 and the code is on my other machine right now, but it started with People. After those 3, the others were listed in alphabetical order but commented out and we figured that people could go through and edit the list to suit their needs before installing it.

I think you'll benefit, which is really the point here for both of us -- not just an exercise in programming.

[canvas18]

carroll-ccsd‌, James...

Thanks for all your wonderful effort!  Now I have something to stay up until 1:00 and work on.  I'll post screenshots when I get it running.

v/r
 MJH

[James]

I've removed the code I had posted earlier since there is now a new version. My 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 (although you can strip out the comments).

I will get an announcement written up in the Community as time allows so that people can find it, rather than having to read through all the nested comments in this thread.

I had written a script 2 years ago called Admin People Link, which added a People link to the links Canvas provided, but it only works with the old course search page and I will be deprecating it now that we have the new version.

[robotcars]

Mine is almost done, but it's late and I got distracted. I will run some last tests in the morning and try minification. I kept my original layout and used your method to avoid jQuery, with CSS in a separate file, and some additional decisions around file size.

edit: reviewed

I actually let our new JavaScript programmer smithb_ccsd‌ at my version this morning and he showed me some additional ES6 features including let, const, and arrow functions. Good stuff.

[robotcars · Accepted solution]

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 ‌

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!

[James]

carroll-ccsd I just linked to yours from my Github site. Still need to write up the explanation for the Community page, but super, super busy scrambling with work stuff right now.

[candrew]

does this work with the new admin interface?

[robotcars]

Hi  @candrew ,

Yes, either option, James' or my version work in the new interface.

[mjennings]

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!

[kona]

No kidding! These two have seemed to have found the sweet spot of working collaboratively and I bet it's amazing to see. Unfortunately, while I technically could have a front row seat, the magic seems to happen way past my bed time and bordering on my wake-up time!

[robotcars]

HAHA. Thank you  @mjennings ,  @kona 

 @James  and I were discussing the other night how neither of us are JavaScript developers, and that we do this because it's fun and provides value. I have been writing in JS for a long time, but usually only because I knew programming and server side/client side requirements. This lack of expertise, I feel is what brings us to this open conversation. What's the best way? What can we learn by sharing?

We recently hired smithb_ccsd‌ to handle our LTI and Front End coding, most exclusively in JavaScript. He is currently absorbing a lot, including React/InstUI and Node, but is fully interested in the Community and instruction. We have some good ideas. James' provides some great experience. I think we're all interested in helping to improve the environment and share.

As James mentioned, JSFiddle lacks some very important usability to make this easy. I could see James moving the mouse cursor, we could chat, but if he hit the Update button, it would create a new URL, and then I'd have to ask what version he was on and manually get there... very annoying. I'm not sure we'd be interested in selling spots either, but an AMA style Canvas Live w/ screen/code sharing, and let's openly tackle this community question and get opinions about how to solve it could be appealing. We spent a considerable about of time after the base code was created asking each other what should the default settings be, and what would most users like to see. Obviously this is hard to assume as a developer, but we all know this, Feature Ideas - Canvas Studio. I think this fits into the scope of a Virtual Hack Night, James mentioned above.

[awilliams]

Please oh please do a virtual hack night!!

[James]

 @mjennings , I don't think either of us do it for the money. It's about doing what you can to help others.

Instead of money, maybe "selling" spots could involve people agreeing to do something for someone else? On the honor system of course.

Do you think we would need a moderator that could explain it to people? Perhaps we could get one of those golf announcers from TV that have the whisper-like voices in the background. "James is lining up his code with the Tidy button" or "Robert is trying a risky shot with a for...in command."

[mjennings]

An announcer/play-by-play person would be excellent!!! Maybe the money could go to purchasing the energy drink/liquid fuel required to code into the wee hours.

[robotcars]

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

div.rc-course-links ul { 
    list-style: none;
    font-size: 0.8rem;
    margin-left: 0;
    visibility: hidden;
}
div.rc-course-links ul li {
    display: inline;
}
div.rc-course-links ul li:not(:first-child):before {
    content: " | ";
}
div.rc-course-links ul li a {
    color: #999;
}
[data-automation="courses list"] tr:hover .rc-course-links ul {
     visibility: visible !important;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[James]

My thoughts, as someone who doesn't use it, but still need to write up my version of it, is that it's bad accessibility and usability to hide something until you mouse over it.

[canvas18]

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.  

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

v/r
 MJH

[robotcars]

but I've submitted a request for Robert's permanent solution.

Can I ask, what does that mean in your self hosted secure environment?

[canvas18]

We are using self-hosted Canvas because we must meet FEDRAMP requirements for security.  Getting anything on our servers is a challenge.  The fact that I can run custom javascript in a sub-account is incredibly surprising.  For me to get a change implemented university-wide, it needs to get approved by a whole host of other people (and it takes a lot of time and $$)..  I have the same problem with LTIs -- I can't use most of them because they reach out to non-FEDRAMP compliant servers.  This is why user scripts are great for many of the things our design/support team needs to do -- no approval required.