Use this framework to boost the power of Canvas Theme Editor for the user experience

Fostering a great learning experience by harnessing the Canvas Theme Editor with more confidence, collaboration, visibility, and sustainability isn’t as tricky as it sounds.

Canvas Theme Editor allows admins to customise the colour display for text, images, buttons, and links using hex codes in JavaScript and CSS programming languages.

And there are shortcuts to ramping up Canvas Theme Editor. Embrace the journey to upskilling. Software developer Sam Malcolm shared his expertise on this as part of 2022 InstructureCon. 

He’s the Senior Digital Experience Developer at RMIT University, which also offers vocational education. It has 335,000 user accounts in Canvas, including educators, students, and professional staff in Melbourne and Vietnam.

“Since the university adopted Canvas in 2016, we’ve used the theme editor quite extensively because it’s a good example of customisability,” said Sam. Canvas is the world’s leading learning management system (LMS) for online teaching and learning, with 99.99% of uptime.

Initially, though, RMIT University had to decide whether to restrict permissions to the theme editor.

“You could lock the theme editor down and not let anyone [in your institution] use it because it’s safer, but you’d be missing out on the opportunities it can offer and the improvements you can make by [more users] engaging with it.”

The power of a framework for Canvas Theme Editor

RMIT University has developed a robust framework for using the theme editor, which:

• Has reduced the risks of TypeErrors that stop an operation being performed for various reasons
• Sees the software development team automatically test enhancements to Canvas rather than go through the hassle of human testing
• Creates a business process for removing redundant JavaScript from Canvas
• Breaks down silos, so work isn’t duplicated, and
• Works seamlessly with Canvas updates.

Sam said: “Before we had the framework, we had some issues come up often. If there are mistakes with JavaScript or CSS that could cause significant disruption, then the initiatives you’re trying to put through in Canvas won’t work. It can cause accessibility issues as well.”

The problem was that RMIT University could only test enhancements it wanted to introduce to Canvas with human testing, i.e. manual quality assurance.

“That was quite inconsistent because humans don’t follow the same steps every time. It’s time-consuming and quite expensive. That’s why automated testing is important.”

A double-edged sword is that the Canvas LMS undergoes continuous improvement. It’s designed as a build-as-you-go model to add pieces to your institution’s tech stack, much like an evolving roadmap.

“So, as [the LMS] changes, if you wrote JavaScript to work with the Canvas environment as it is now, updates could introduce breaking changes to your code. Before our framework was in place, the only way we’d be made aware of breaking changes was when users flagged it. That’s not a good user experience.

“Canvas also introduces native features that address the issues you’re trying to solve, and that’s a win when it happens.” 

With in-house experts, Canvas uses its own proven framework and tools to drive change for users – faculty, students, and community.

Good housekeeping for old code

To ensure Canvas works optimally, RMIT University’s theme editor framework reduces the number of redundant customisations in JavaScript. Sam said the “tech deck was only growing, which wasn’t sustainable”.

Now, they delete the fifth last version of a customisation. That means the university can revert to the previous version if something goes wrong with the latest initiative they’re introducing.

“We didn’t really have any idea of what code was out there. We also wanted to create an environment where anyone at RMIT could at any time find enough information about any of the initiatives so they could maintain and manage deployments and know how to test them confidently.

“If you’re unfamiliar with the customisation and someone says it’s broken, it’s difficult. You don’t know what success looks like. All that needs to be documented as well.”

Sharing documentation and “sticking the code together in one place” helps reduce siloing across the institution. Previously, many areas had been working in isolation on the same problem, which wasn’t optimal, said Sam. RMIT has set up two thriving communities of practice for developers to share projects, build skills, and discuss upcoming Canvas release notes.

Also, six months after the code is deployed, the team evaluates and then classifies it for retention, modification or removal. In the meantime, it may have been superseded by a new Canvas plugin. 

“Using this process, we can have a mechanism for removing code that’s no longer needed, that’s not well written, and it reduces the effort required to maintain the theme editor,” Sam said.

Customising your own framework

He encourages higher education and vocational education institutions to consider how to establish a framework for using the Canvas Theme Editor:

• Do a skills audit of your development team to identify gaps, such as in automated testing
• Appreciate you’ll need in-house expertise to troubleshoot bugs in the code you’re trying to deploy to Canvas – that’s your responsibility, not Instructure’s
• Introduce product verification of changes to ensure themes are applied uniformly
• Keep backups of the previous five themes
• Build visibility with project documentation with a project poster, table of theme editor initiatives listing relevant files 
• Create a ‘how to test’ page for best practices about rolling out changes and life cycle reviews
• Use a platform such as the web-based corporate wiki, Confluence, to dynamically manage the framework
• Set a baseline standard for code quality so it’s not deployed to the environment with console logs that make debugging time-consuming
• Agree on a protocol for CSS identifiers that are descriptive (don’t use the class name or heading as that’s common enough in Canvas) to avoid future conflicts 
• Preface code with a comment handle detailing a description, when it was last updated and by whom
• Make global changes easy with rules for referencing brand details such as courses or your institution’s signature colours, so they’re sourced from a centralised variable, not hard coded
• Support the mobile (device) ecosystem where possible, and
• Document recommended code practices.

These dovetail into creating a great user experience, said Sam.

“Nothing we make and deploy can come at the cost of accessibility of a student’s ability to have the best learning experience possible. It should aid and foster their experience.”

The frame is designed to be iterative. 

“As we use it, we learn more about it and refine it and keep developing it to improve it.”
Once your institution has developed and refined a robust framework for using Canvas Theme Editor, think about the next step. You can learn about RMIT University’s stretch goals and get more insights by watching Sam’s full 2022 InstructureCon presentation, Unravelling the Web of Canvas' Theme Editor.