Why it is needed
Canvas's web pages use jQuery UI for these features. The Canvas apps don't load it on a normal page, so in the app:
- Tabs show as plain links with all the panels stacked.
- Sortable cards can't be moved.
- Popups, such as "Show answer", sit open on the page.
Canvas removes scripts from page content, so this can't be solved in a page. It takes a theme file.
What it does
| On a page | In the app with the kit |
|---|---|
Canvas tabs (enhanceable_content tabs) | Working tabs |
| The Faner block from Canvas Designer | Working tabs, with the block's own colours, looking as they do on the web |
Sortable lists (enhanceable_content sortable) | Cards move with arrows or a drag handle |
Popups (enhanceable_content dialog) | Open and close under their link |
It also suits the app's light and dark mode, and works with screen readers and keyboards.
What it doesn't do
- It adds nothing on the web. If it ever ends up on a web page, it does nothing.
- It loads nothing from other sites, sends nothing anywhere and stores nothing.
- It doesn't change pages. It only runs while a page is open in the app.
If the file doesn't run, nothing is lost: panels stay visible one under the other, and cards stay in their order.
Install
You need admin rights in Canvas, and custom JavaScript must be turned on for your institution. If you can't see the upload fields, ask your Canvas contact at Instructure.
- Go to Admin, choose your account, then Themes, and open your current theme.
- Open the Upload tab.
- Under the Canvas apps, upload
canvas-designer-app-kit.jsas the JavaScript file. Leave the web JavaScript and CSS files alone. - Preview, then apply the theme.
- Close the app completely and open it again.
Already have a mobile JavaScript file? Don't replace it. Put the kit's code at the top of your file and upload that. Order matters: code that uses jQuery ($) stops with an error in the app, and everything after it never runs. That can look as if the kit doesn't work.
Test it
Test on a page the app has never opened. Canvas writes the script's address into each page's content, and the app keeps saved copies, on iPhone for up to 2 hours. An old page can go on using the old script for a while, and then tabs act like plain links that jump down the page.
Check tabs, sorting and popups in light and dark mode, on iPhone and on Android if you can.
The kit has been tried on a phone at Nord University and tested in copies of both apps' page setups.
Your own colours
Colours only apply to tabs with no colours of their own. Change COLOURS near the top of the file:
onandonText: the open tab in light modeonDarkandonTextDark: the open tab in dark modetextOnWhite: text on a white tab or card
Undo
Upload your previous file again, or remove the file from the theme, and apply. Pages go back to how they were, because the kit never changed them.