Hacking the Canvas User Interface
A presentation and resources on getting started customizing the Canvas learning management system with javascript.
Slides
Javascript Template(out of date!)
Canvas javascript library - CanUt
WA SBCTC e-learning has released a Canvas javascript library which makes it easier for WA CTC colleges to customize their Canvas installation. Below are a couple of example files, showing the available functions.
When building your own javascript file, you may start with an example below as a template and comment-out any unwanted function calls, while adding any needed additional javascript. Be sure to make edits only within the "college custom" area and leave the header and footer as-is. (The header loads the CanUt Canvas javascript library which is hosted and maintained by SBCTC e-learning.)
Please drop Paul an email if you have questions or suggestions!
Canvas Login Label (September '14)
Canvas now has a Login Label field - on the admin settings page - and that is the best way to set a username prompt on the login form, e.g. "SID" or "EMPLID". Any custom javascript that you have for setting the username prompt can now be removed. And there's no change for the password field - that prompt still must be done with custom javascript.
Basic example - using CanUt library: // Custom javascript - uses the CanUt Canvas library
$.ajax({ url: "https://d1la9j37oq1fed.cloudfront.net/canvas_shared/canut_base_canvas_050714.min.js", dataType: "script", cache: true, crossDomain: true }).done(function () {
// **************************************
//
// College custom javascript
// Place below this comment block
//
// **************************************
// Customize the logon form prompt:
CanUt.SetUsernamePrompt('SID');
// Hide items we don't want:
CanUt.HideAccountDelete();
CanUt.HideResetCourse();
CanUt.HideConcludeCourse();
// Add new items
CanUt.AddAdminMenu();
// ***********************************************************
// Place all custom college script above this comment block
// ***********************************************************
});
Full example file - using CanUt library: // Custom javascript - uses the CanUt Canvas library
$.ajax({ url: "https://d1la9j37oq1fed.cloudfront.net/canvas_shared/canut_base_canvas_050714.min.js", dataType: "script", cache: true, crossDomain: true }).done(function () {
// **************************************
//
// College custom javascript
// Place below this comment block
//
// **************************************
// Customize the logon form prompts:
CanUt.SetUsernamePrompt('SID');
CanUt.FlagNumericUsernameForMobile();
CanUt.SetPasswordPrompt('pwd: first 6 of last name');
CanUt.SetLostPasswordPrompt('official school email');
// Hide items we don't want:
CanUt.HideAccountDelete();
CanUt.HideResetCourse();
CanUt.HideConcludeCourse();
CanUt.RemoveAllFooterLinks();
CanUt.HideGradesMenu();
CanUt.HideAssignmentsMenu();
// Add new items
CanUt.AddAdminMenu();
CanUt.LoadCanvabadgesScript();
CanUt.LoadJavascriptFile("https://myschool.edu/another_js_file.js"); // advanced feature!
if (CanUt.loginPage) {
// do something on the login page
}
if (CanUt.profilePage) {
// do something on the user profile page
}
if (CanUt.wikiPage) {
// do something on the wiki pages
}
if (CanUt.admin) {
// do something for admin users
}
if (CanUt.teacher) {
// do something for teachers (in their teaching courses)
}
if (CanUt.student) {
// do something for students (in their courses)
}
// ***********************************************************
// Place all custom college script above this comment block
// ***********************************************************
});