cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
chriscas
Community Champion

How can I modify text on the course settings "Apps" tab

We'd like to modify (or add to, at the very least) some of the default "bolierplate" text on the course settings Apps page to better explain to our teachers what they see there is not a full list of available (we use the whitelist to only show only our "approved" apps), and how they can view the whole list and get new apps approved through our university process.

I've tried modifying the text using the jquery .append and .html commands, which only seem to work the first time the apps tab is opened (and also causes it to be the selected tab when you slick on the course settings menu).  If you navigate to another tab and then come back to settings, it fails.  I think I need something more advanced for this, but I'm not sure how to do it.   @James ‌ mentioned something about MutationObservers in a different discussion about modifying other things before, but I'm really unclear how to use them (the examples I'm finding through Google aren't really helping me understand what I should be doing).

Has anyone done anything similar to this, maybe have some sample code they could show me or anything?  I'd be super appreciative!

-Chris

4 Replies
James
Community Champion

chriscas,

Several of my user scripts use Mutation Observers, so that might be a place to start (search for Canvancement). I also searched the Community and found that almost every reference to Mutation Observers is related to me -- I feel like a prophet in the wilderness proclaiming what is to come. The idea is to find an element in the DOM that doesn't get destroyed that is somewhere above the thing you need in the DOM. Get the one closest to the element you want. Then attach a Mutation Observer to that element. If the element you need is a direct child, then just use childList: true otherwise if it's deeper, be sure to add subtree:true to that in the config. Inside the observer, check to see if what you need has happened. Sometimes that's not necessary because ReactJS will write the entire thing at once and that's the only mutation you need; other times you need to check for an existence of an element within the observer before you act.  Don't disconnect() the observer if there's a chance the page will change again.

dgrobani
Community Participant

Hey  @James , know that your words haven't fallen on deaf ears! Based on your proclamations, I tried refactoring one of my JavaScript functions a few months ago to use mutation observers, but it didn't work right away and I got pulled off onto more pressing projects. I'll add your above post to my notes and use it as prompting to try again soon.

Chris_Hofer
Community Coach
Community Coach

Hi chriscas...

I wanted to check in with you because I noticed there hasn't been any new activity here since September 15, 2017.  Have you had an opportunity to review the postings from  @James  and dgrobani?  Did either of those responses help to answer your question?  Are there any outstanding questions/concerns/issues you have yet as it relates to this topic?  If one of the above comments has helped to answer your question, please go ahead and mark that response as "Correct".  But, by all means, please post a message below if you're still in need of some suggestions/assistance.  For now, I'm going to mark your question as "Assumed Answered" since we've not heard from you and since there hasn't been any new activity for almost two months in this topic.  I hope that's alright with you.  Looking forward to hearing back from you soon, Christopher!

Hi  @Chris_Hofer ‌,

As an update, even with the help of a Canvas engineer (through our CSM), we haven't been able to find a solution for this yet.  I'll add the caveat that I haven't had enough time to experiment more with MutationObservers though, which may be the key to getting this right (none of the attempts the Canvas engineer made used MuattionObservers either).

Since this seems so tricky to do in JavaScript, I might make a feature idea to create a way for this text to be customized thought the UI at the account-level, although I'm not sure how much support it will get.  

-Chris