Thank you so much for all the helpful information. Looks like I have more good threads to review 
I had some suspicions that the class names were being dynamically generated during some build/page rendering process. I know enough about React.js to get myself into trouble (it is one of those framework/environments that's on my lest to learn more about).
When I started poking around in Canvas' dynamically-generated mobile menu DOM structure, I noticed some "random-looking" element IDs and was hopeful I could anchor off those. Unfortunately, reloading the page created completely different IDs!
The solution I landed on is based on two things. 1) Each button has a unique text label. 2) Menu items that operate a submenu leverage a unique ARIA-controls label to control the visibility of that submenu DOM element. The JavaScript below targets the Help menu item by name (string search) and then captures the ARIA-controls label of the Help menu item (during the click event) which gives us all the information we need to add our new menu item (in this case, prepending to the top of the list).
$("body").on("click", "button", function () {
// Check that the button is the "Help" button and check if the global nav is mobile
if (($(this).is(':contains("Help")')) && $(".ic-brand-mobile-global-nav-logo").length) {
// Capture ARIA selector of button
var aria_selector = $(this).attr('aria-controls');
// Check for link already added
if ($("#umsn_sphfcc_added").length == 0) {
// Timer to ensure page is rendered before adding new link
setTimeout(function () {
// Select associated help menu and add link
$("#" + aria_selector + " ul").prepend("your_link_here");
}, 500);
}
}
});Even though we only have access to sub-account CSS/JavaScript customization, this solution has been working very nicely for us so far. That said, I'm sure there are more elegant solutions out there and am certainly open to any suggestions or improvements 🙂
Thanks again for all your generous insight and shared collaborative spirit!
I would not use the text of the link as a way of selecting content if there is another way to do so. The text varies based on someone's language. As long as everyone was using the same language for Canvas, it should be okay.
In the case of the help menu, I would base it off the href for the link. The bonus is that you can do that with a CSS selector, while you cannot for text. I think I've seen Robert do something with xpath that can do that. There's also a note that xpath support varies widely by browser and while Firefox supports it, there's no plan to improve it. Regardless, you're back to the first issue that the text may vary.
If the text you're looking for is set by you and you don't support internationalization, then it may also be okay to select, but the href route is still faster.
Let's say that my help dialog looks like this, where the last entry is a link to office.com
This CSS selector will find that anchor element for the Student Email.
#help_tray li a[href="https://office.com"]Now what I need to do is find the parent list item element.
The underlying HTML for that entry in the DOM looks like this and this is inside of a unordered list element which is inside a div with an id of help_tray.
<li class="fOyUs_bGBk dxCCp_bGBk dxCCp_fLbg dxCCp_ycrn dxCCp_cfzP dxCCp_bCcs">
<span direction="row" wrap="no-wrap" class="fOyUs_bGBk fOyUs_desw bDzpk_bGBk bDzpk_oDLF bDzpk_fZWR bDzpk_qOas">
<span class="fOyUs_bGBk dJCgj_bGBk" style="min-width: 100%; flex-basis: 100%;">
<a target="_blank" rel="noopener" href="https://office.com" role="button" tabindex="0" class="fOyUs_bGBk fbyHH_bGBk fbyHH_bSMN">Student Email</a>
<div class="cjUyb_bGBk cjUyb_doqw cjUyb_eQnG">Check your student email in Office 365's Outlook.</div>
</span>
<span class="fOyUs_bGBk dJCgj_bGBk"></span>
</span>
</li>Those classes are not static between builds, which used to be every three weeks, then went to once a month, and now with the COVID-19 thing might be changing every week. In other words, most definitely do not rely on them.
Now, let's say that you want to insert your own link first and you want it to look like all the others. The first thing to do is to find a link that is styled the way that you want you link to work. That probably means not having "new" or "featured", but just a regular link. Let's say the "report a problem" link. The href for it is #create_link.
Here is something that I threw together very quickly. It should only be called after you have verified that the help_tray div exists via a mutation observer and possibly even that it's displayed to keep Canvas from overwriting your changes -- you would have to play around with that to make sure it's right.
(function() {
'use strict';
const helptray = document.getElementById('help_tray');
const helplinks = helptray.querySelector('ul');
const firstlink = helptray.querySelector('ul>li');
const problemlink = helptray.querySelector('a[href="#create_ticket"]');
const problem = problemlink.closest('li');
const node = problem.cloneNode(true);
const nodelink = node.querySelector('a[href="#create_ticket"]');
const description = node.querySelector('a[href="#create_ticket"] + div');
nodelink.href = 'https://google.com';
nodelink.textContent = 'Google It';
description.textContent = 'If you cannot figure it out, Google it.';
helplinks.insertBefore(node, firstlink);
})();What this does is to find the Report a Problem link based off the href rather than the text so that it isn't dependent upon the language selected by the user.
Then it clones that node using a deep clone. We now have an identical copy of that node.
We're going to change the href and text of the link and the text of the div that immediately follows the link. This holds the description.
In my example, I'm giving students the best help I can -- telling them to Google It.
After that is changed, it inserts the node before the top help link. If there's ever more than one list in the help_tray, you could use problemlink.closest('ul') to make sure you get the right one. Older browsers may need a polyfill for closest(), but those browsers aren't supported by Canvas anyway.
When I run this, my help menu now looks like this.
If I knew, and could guarantee, what the first link was going to be, I could have just used it to clone and saved some steps, but I don't know when Canvas is going to put something at the top of the help links.
I apologize for the poor formatting on the code, I was typing it into the browser's console and it was acting really slow on me. I guess I had too many Chrome windows open (or maybe just the wrong ones). I need to reboot my computer but I didn't want to do it while writing your message.
WOW! There are a lot of excellent ideas here...I feel a guilty for not responding sooner. Unfortunately, I don't have access to the main Canvas account, so can't implement JavaScript customization at that level. I may be able to convince our ITS folks to do that at a later date and intend to work that angle. As you can imagine, they are very protective over making changes at the institutional level, which is a level of caution I completely understand.
If you don't mind, I'd like to pull your snippets apart over the next few days and refine my original code snippet with some of your ideas. (I'm currently tasked with building out 3 courses with an end of month deadline). I'll post my derivative as soon as I have it updated. It's definitely helpful to have the ability to customize global navigation at the sub account level.
carroll-ccsd, I noticed the interesting "exist or not exist" link behavior when I was initially adding our custom help items while logged in as administrator for our sub-account. I am somewhat concerned about that behavior but it might be okay. When I logged in as a test student, the link showed up everywhere. As far as I understand, our students will "only" be enrolled under our school's sub account, so should see the links consistently. Of course, I'm still new to customizing Canvas as well as fully understanding how our school uses it, so will have to just test things to see what works and check in with our student users to verify. I have to admit my ignorance of the existence of mutation observers, which is a far better solution than a timer (shows how old-school my hacking skills really are I suppose).
@jamesjonespa , you make a very good point about not using the menu name. I will admit that I was looking for an expedient solution rather than a robust one (which must also be obvious given my use of a timer to add the item). We don't internationalize our Canvas interface at the moment but that doesn't mean it won't happen in the future. So it makes perfect sense to restructure the query in a way that doesn't anchor off the name.
As a side note, I'm thinking about installing a version of Canvas on my local machine so that I can test things more rapidly. Is this something you both have gone through the trouble to do or is it a waste of time? Part of why I'm interested in doing this is that it would give me access to the main account admin features, which would allow me to better understand the ins and outs of Canvas and how we can best customize at the sub-account level.
Thank you both again for all your insight 
I'll post my revised code once it's complete and will try out what you have provided when I have a chance.
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.