- Number of enrolled (active) courses
- Number of unread conversations (Inbox)
- Assignments count
- Grades count
- Calendar events count
- Announcements count
- Discussions count
- Next assignment due (if any)
The live tile provides deep links to the Canvas Courses app for both mobile and wed versions. Selecting Inbox links to the Canvas Inbox, and selecting all other components links to the Canvas Courses section.
The Canvas authentication uses an OAuth Integration Profile (configured at App Settings > Integration Profile > Add Integration Profile.This must be configured before the product integration will work. See OAuth Integration Profile Configuration.
Canvas data is not cached on the user's device. A Live Tile is intended to present fresh data, to configure the time between updates, see Configuration.
The following is an overview of the Canvas product integration user interface for a reference when configuring it.
|Example of 3 x 2 dimensions|
Live Tile Configuration Rules
The Canvas live tile is designed to work with the following tile sizes. The tile will attempt to display as many elements as possible regardless of the dimensions set, but we cannot guarantee the intended experience if you do not adhere to the following dimensions. The tile dimensions are set in the App Builder, while the widgets per row (and other details) are set in the Configuration page for this product integration.
- 1 wide x 1 high
- This is a special case. The tile will only display one widget (the highest prioritized, enabled widget).
- 2 wide x 1 high
- We recommend using 1 - 2 widget rows and using 1 - 3 widgets per row.
- The Next Assignment area only displays if it is the only item enabled.
- 2 wide x 2 high
- We recommend using 2 - 3 widget rows and using 1 - 3 widgets per row.
- 3 wide x 1 high
- We recommend using 1 - 2 widget rows and using 2 - 4 widgets per row.
- The Next Assignment area only displays if it is the only item enabled.
- 3 wide x 2 high
- We recommend using 2 - 3 widget rows and using 2 - 4 widgets are used per row.
- 3 wide x 3 high
- We recommend using 2 - 4 widget rows and using 2 - 4 widgets are used per row.
We recommend keeping the header text and widget labels for the live tile short.
There are no version requirements. The provided prerequisites below are valid for the last three years of Canvas releases (at least). The only requirement is that when your Canvas administrator adds a developer key, the Redirect URIs field is available as well as the legacy Redirect URI field. We require the former (see Prerequsites).
The following prerequisites are required to configure the Canvas product integration:
- Contact Ex Libris to add your Canvas Base URL to the proxy list.
- The Canvas hostname for the product integration from which to fetch information.
- A Canvas developer key with Redirect URIs set for your Sandbox, Preview, and Production app hostnames.
- Each hostname must end in /cmauth/oauth/callback, for example: https://my-app.name.com/cmauth/oauth/callback.
- This is not a URL that is meant to be accessible. It is used by our cloud platform to complete the OAuth authentication flow.
- We currently do not support scopes for the developer key.
- Once the developer key is set up, you can use the client ID and the secret to set up an integration profile for the Canvas instance you want to use with the product integration.
To configure the key, from the Canvas Admin page, select Admin > Developer Keys:Developer Keys
Enter the URI in the Redirect URI field and click Save.URI Redirect
The following is the authentication workflow:
- The end-user opens the Canvas tile.
- campusM requests a token from the Canvas token API.
- The user logins into Canvas, if they have not already done so.
- If valid, Canvas sends a response with user's access token.
- campusM sends the access token with every Canvas API request made. It is automatically refreshed on expiry, unless the user has logged out of the campusM app or their Canvas session.
To configure the Canvas Product Integration, first configure an authentication integration profile (subtype OAuth) that you then select in the Product Integration configuration section.
OAuth Integration Profile Configuration
You add and edit integration profiles from App Settings > Integration Profile > Add Integration Profile.
The following table describes the configuration options available on this page. All values are exactly as-is unless listed otherwise.
|Name||Anything unique that describes the profile, for example, Canvas Sandbox.|
|Description||A description of the profile. Not required.|
|OAuth Client ID||The ID of the Developer Key created|
|OAuth Client Secret||The secret of the Developer Key created|
|Authorization Endpoint||https://CANVAS_HOST/login/oauth2/auth (CANVAS_HOST is your Canvas instance's hostname)|
|Access Token Endpoint||https://CANVAS_HOST/login/oauth2/token|
|Token Endpoint Auth||Basic|
|User Info Endpoint||https://CANVAS_HOST/api/v1/users/USER_ID|
|Extract OAuth Tokens||Yes|
|First Name Mapping||name|
|Last Name Mapping||name|
Product Integration Configuration
|Configuration Option||Description||Mandatory||Data Type||Default||Example|
|Enable Product Integration||Select to enable the product integration on the user's campusM app.||No|
|Product Integration Description||A description of the product integration for internal use.||Yes|
|Integration Profile||The name of the Integration Profile created previously, selected from a list of available profiles.||Yes||String|
|URL to Retrieve Information||The encoded base URL of your Canvas instance, provided by Ex Libris.||Yes||URI||Provided by Ex Libris|
|Enabled||Enables or disables the live tile itself.||Yes||Checkbox||Yes|
|Badge Color||The color of all the icons on each Canvas widget on the live tile.||No||Color Code||#FFFFFF||#EEEEEE|
|Update Rate||Frequency of updates from Canvas to the live tile (in minutes). Has a minimum of 20 (minutes).||No||Integer||60|
|Enrollment Type||Sets the Canvas enrollment type for the tile. This determines what course information is returned.||No||Array||Student|
|Live Tile Items|
|Show Live Tile Header Text||Select to display the header on the live tile. If cleared, the text does not appear in the header. If both the header text and the header logo are disabled, the header does not appear.||No||Checkbox||Yes|
|Show Live Tile Header Logo||Select to display the logo on the live tile. If disabled, the logo does not appear in the header. If both the logo and the header text are disabled, the header does not appear.||No||Checkbox||False|
|URL for Header Logo||The URL of the image to be used as the logo in the header.||No||String|
|Customise Live Tile Header Padding||If enabled, enables you to customise the blank space around the header block. All values have a minimum of 0.||No||Checkbox||No|
|The First Widget(s) Should Display on the Same Row as the Header||If disabled, the first widget row will start below the header.||No||Checkbox||Yes|
|Widgets Per Row||This sets the number of widgets to display per row. There is a minimum of 1 and a maximum of 5.||No||Integer||3|
|Show Inbox||If disabled, the inbox widget will not appear on the live tile.||No||Checkbox||Yes|
|Show Courses||If disabled, the courses widget will not appear on the live tile.||No||Checkbox||Yes|
|Show Assignments||If disabled, the assignments widget will not appear on the live tile.||No||Checkbox||Yes|
|Show Grades||If disabled, the grades widget will not appear on the live tile.||No||Checkbox||Yes|
|Show Calendar Events||If disabled, the events widget will not appear on the live tile.||No||Checkbox||Yes|
|Show Announcements||If disabled, the announcements widget will not appear on the live tile.||No||Checkbox||No|
|Show Discussions||If disabled, the discussions widget will not appear on the live tile.||No||Checkbox||No|
|Show Next Assignment Row||If disabled, the live tile will not display the next upcoming assignment.||No||Checkbox||Yes|
|Always Display Widget Count||If enabled, all widgets will display the count even if the count is 0.||No||Checkbox||Yes|
|Prioritize Live Tile Items|
|Priority||This ordered list prioritizes the items that appear on the live tile. The item at the top of the list appears first, while the last item appears last.||No||Ordered List|
|Use Custom Icons||Select to use custom icons instead of the default live tile icons||No||Checkbox||No|
|URL||Enter the URLs of custom images for the icons of the various widgets||No||String|
|App Store URLs|
|Canvas Google Play Store Page URL||This is required for the fallback behavior in all deep links to third-party apps.||No||URI||https://play.google.com/store/apps/details?id=com.instructure.candroid|
|Canvas Apple App Store Page URL||This is required for the fallback behavior in all deep links to third-party apps.||No||URI||https://itunes.apple.com/gb/app/canvas-by-instructure/id480883488|
|Live Tile Header Text||This sets the text for the live tile header. It is displayed if the Show Live Tile Header Text checkbox is selected. It is recommended you keep this text short.||No||String||Canvas|
|Text - "Inbox"||Displayed underneath the Inbox widget, if enabled.||No||String||Inbox|
|Text - "Courses"||Displayed underneath the Courses widget, if enabled.||No||String||Courses|
|Text - "Assignments"||Displayed underneath the Assignments widget, if enabled.||No||String||Assignments|
|Text - "Grades"||Displayed underneath the Grades widget, if enabled.||No||String||Grades|
|Text - "Events"||Displayed underneath the Calendar Events widget, if enabled||No||String||Events|
|Text - "Announcements"||Displayed underneath the Announcements widget, if enabled.||No||String||Announcements|
|Text - "Discussions"||Displayed underneath the Discussions widget, if enabled.||No||String||Discussions|
|Text - "Next Assignment"||The label for the Next Assignment Row block.||No||String||Next Assignment|
|Text - "No assignments"||Displayed if 'Show Next Assignment Row' is enabled,
but there are none returned by Canvas.
|Date Format (long)||You can enter any ISO-standard date format here. For more information on LL, LLL and LLL, see Locale aware formats at Moment.js Documentation.||No||String||LL|
|Look and feel|
|Primary Theme Color||Select a color for the main elements on the page.||Yes||Color Code||#444444|
|Secondary Theme Color||Select a color for the secondary elements on the page.||Yes||Color Code||#6f8ea4|