new england institute of technology customizing canvas through javascript and css oshean member...

New England Institute of Technology

Customizing Canvas through Javascript and CSS

OSHEAN Member ForumJune 12, 2015

New England Institute of Technology

Canvas Customization

• NEIT Switched to Canvas last April• Consistent “Customized” user experience • Brand our courses and departments• “Manage” course development process • 350 full and part time faculty • Short amount of time

• Streamline and manage course setup • “Policy” decisions regarding the setup and use of the

system

New England Institute of Technology

Canvas Customization

New England Institute of Technology

Custom Home Page

New England Institute of Technology

Custom Home Page

New England Institute of Technology

Help Page

New England Institute of Technology

Customization of the Modules Page

Before

After

New England Institute of Technology

Tabs

New England Institute of Technology

How Does This Work?

Separation of Powers

From Canvas:• HTML – Page Content & Structure

From Canvas and Customer:• CSS – Appearance• Javascript – Behaviors

– (can include changing page content and structure)

• Multiple CSS and Javascript components can be loaded separately, from entirely different locations

New England Institute of Technology

Plugging In Your Own Code

New England Institute of Technology

CSS vs. JS

• Appearance (CSS)– Hide the Conclude Course

button– Branding and term/week

banner graphic– Improve Modules page

aesthetics– Hide Syllabus Tool

• Behavior (JS)– Hide the Delete Course button

except for admins– Add/change links and other

structure to the page• Nav links in banner• Rename left-hand navigation items• Add Twitter feeds to Dashboard

page– Make requests for supplemental

information• Feature Week section• Announcements box and "unread"

indicator

– Activate "tabs"

New England Institute of Technology

A CSS example: Hide Delete Course Button

1) Chrome Developer Tools helps identify the structure you'll select for in CSS

New England Institute of Technology

A CSS example: Hide Delete Course Button

1) Chrome Developer Tools helps identify the structure you'll select for in CSS2) Style settings go into your local CSS file

New England Institute of Technology

A JS example: Show # Unread Announcements

Use Canvas API to: 1) Retrieve all

announcements for a user

2) Count unread 3) Add a new

element to page

This code is available at:

http://pastebin.com/9ghxPMkJ

New England Institute of Technology

Some CSS Is Built-InCanvas Styleguide: https://[your_canvas_url]/styleguide

New England Institute of Technology

Some JS Features Are Built-In (with a little help from you)Canvas Styleguide: https://[your_canvas_url]/styleguide

New England Institute of Technology

Canvas HTML Whitelisthttps://s3.amazonaws.com/tr-learncanvas/docs/Canvas_HTML_Whitelist.pdf

New England Institute of Technology

Gotchas and Maintenance

• Canvas changes frequently– BUT…things break infrequently (once in eight months we've

been in production)– Quick-check beta release site every ~2 weeks

• when you get the Beta Release Notes

• Change only as much as you must, and don't get too clever!

• Use good error-handling practices in your JS code (try/catch, etc)

• Controlling load order is non-trivial• The browser wars are not over (test in several!)

New England Institute of Technology

Thank You

Tom Thibodeautthibodeau@neit.edu

Denise Gautreaudgautreau@neit.edu

Larry Bouthillierlbouthillier@neit.edu

URL for Announcement Count:http://pastebin.com/

9ghxPMkJ