Celebrate Excellence in Education: Nominate Outstanding Educators by April 15!
Found this content helpful? Log in or sign up to leave a like!
3 Solutions
Hi @ErnestChan,
I can chime in a bit on your specific customization because I do some similar things (though not with the login page) for my institutions Canvas instance.
Referring to the login page UI update that will be available as a feature option after this weekend, I don't believe the code you have there would be functional, as the html layout of the page is completely different. If you want your additional code to come after the login button and forgot password link in the new UI, you could try something like this:
document.getElementsByTagName('main')[0].insertAdjacentHTML('beforeend', '<div style="clear:both"><p>Hello, this is some text. I really need this text to be long so I can see what it does when it gets to the end of the line and wraps. Also, what happens when the text is really long? Does it make the modal box taller?</p></div>');
That would end up looking like:
Now I just did that in the browser console while viewing the new login page in our beta instance to get some quick code that at least worked. When adding it to your JavaScript file, you'll need some additional things. First, you'll usually want to check that the page has finished rendering before executing the customization. Second, you'll want to ensure you're only running your customization when you're on the correct page, otherwise that text may get inserted all over the place in Canvas.
You may end up with something more like this (note, I did not test this with a file, but I believe it will work):
async function do_global_customizations(){
if (/^\/login\/canvas$/.test(window.location.pathname)) {
document.getElementsByTagName('main')[0].insertAdjacentHTML('beforeend', '<div style="clear:both"><p>Hello, this is some text. I really need this text to be long so I can see what it does when it gets to the end of the line and wraps. Also, what happens when the text is really long? Does it make the modal box taller?</p></div>');
}
};
if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
do_global_customizations();
} else {
document.addEventListener('DOMContentLoaded', do_global_customizations);
}
Another thing I'll call out specifically is that I don't use jQuery with my customizations at all anymore, as I believe it may be removed from Canvas at some point. Vanilla JavaScript, while sometimes more difficult to compose, is almost always going to work.
The final callout is that these customizations usually don't apply to the Canvas mobile apps. I believe there are separate files for customizing the apps like this, but I have never ventured down that road. Someone else may be able to chime in there.
I hope this helps a bit!
-Chris
Hi @ErnestChan,
To answer your first question, I can't say with certainty without seeing your code, but since the HTML structure of the local (/login/canvas) page seems to be completely different with the upcoming feature option, I am assuming your current customizations would need to be modified to work correctly.
Knowing what your goals are now though, it sounds to me like you have two authentication methods available (some kind of school/institution SSO plus the local Canvas login page)? If that's the case and you want to ensure users are directed to the correct page, I think you'd really want to set up a Discovery Page (part of your authentication settings). When users would navigate to your Canvas instance with the main url or any course links, internal links, etc, instead of getting directed to a login page straight away, they'd see the discovery page. A discovery page itself would be a webpage you'd host somewhere and would list the different login options and allow users to click the correct one for themselves, which would then go to the direct login pages. This config works for mobile apps as well as the web. I'll include a screenshot of our discovery page here just to give you an idea of what you could set up.
Does this help at all?
-Chris
Hi @ErnestChan,
I can chime in a bit on your specific customization because I do some similar things (though not with the login page) for my institutions Canvas instance.
Referring to the login page UI update that will be available as a feature option after this weekend, I don't believe the code you have there would be functional, as the html layout of the page is completely different. If you want your additional code to come after the login button and forgot password link in the new UI, you could try something like this:
document.getElementsByTagName('main')[0].insertAdjacentHTML('beforeend', '<div style="clear:both"><p>Hello, this is some text. I really need this text to be long so I can see what it does when it gets to the end of the line and wraps. Also, what happens when the text is really long? Does it make the modal box taller?</p></div>');
That would end up looking like:
Now I just did that in the browser console while viewing the new login page in our beta instance to get some quick code that at least worked. When adding it to your JavaScript file, you'll need some additional things. First, you'll usually want to check that the page has finished rendering before executing the customization. Second, you'll want to ensure you're only running your customization when you're on the correct page, otherwise that text may get inserted all over the place in Canvas.
You may end up with something more like this (note, I did not test this with a file, but I believe it will work):
async function do_global_customizations(){
if (/^\/login\/canvas$/.test(window.location.pathname)) {
document.getElementsByTagName('main')[0].insertAdjacentHTML('beforeend', '<div style="clear:both"><p>Hello, this is some text. I really need this text to be long so I can see what it does when it gets to the end of the line and wraps. Also, what happens when the text is really long? Does it make the modal box taller?</p></div>');
}
};
if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
do_global_customizations();
} else {
document.addEventListener('DOMContentLoaded', do_global_customizations);
}
Another thing I'll call out specifically is that I don't use jQuery with my customizations at all anymore, as I believe it may be removed from Canvas at some point. Vanilla JavaScript, while sometimes more difficult to compose, is almost always going to work.
The final callout is that these customizations usually don't apply to the Canvas mobile apps. I believe there are separate files for customizing the apps like this, but I have never ventured down that road. Someone else may be able to chime in there.
I hope this helps a bit!
-Chris
Hi @ErnestChan,
To answer your first question, I can't say with certainty without seeing your code, but since the HTML structure of the local (/login/canvas) page seems to be completely different with the upcoming feature option, I am assuming your current customizations would need to be modified to work correctly.
Knowing what your goals are now though, it sounds to me like you have two authentication methods available (some kind of school/institution SSO plus the local Canvas login page)? If that's the case and you want to ensure users are directed to the correct page, I think you'd really want to set up a Discovery Page (part of your authentication settings). When users would navigate to your Canvas instance with the main url or any course links, internal links, etc, instead of getting directed to a login page straight away, they'd see the discovery page. A discovery page itself would be a webpage you'd host somewhere and would list the different login options and allow users to click the correct one for themselves, which would then go to the direct login pages. This config works for mobile apps as well as the web. I'll include a screenshot of our discovery page here just to give you an idea of what you could set up.
Does this help at all?
-Chris
