The course dashboard can now be embedded anywhere on the page using the html tag:
<nnd-course-root></nnd-course-root>
Configuration Properties
The dashboard supports various configuration options:
/**
* The ClinetId key provided by Annoto (same key used for the Widget)
*/
@Prop() clientId: string;
/**
* course details to load (same details used in 'group' configuration option of the widget).
* https://annoto.github.io/widget-api/interfaces/Config.IConfig.html#group
*/
@Prop() courseDetails: {
id: string;
title: string;
description?: string;
thumbnails?: {
default: string;
mobile?: string;
};
};
/**
* Deployment domain to use for the backend api.
* @default 'eu.annoto.net'
*/
@Prop() deploymentDomain: 'eu.annoto.net' | 'us.annoto.net';
/**
* Language code
* @default 'en'
*/
@Prop() locale: string;
/**
* if set to true, the dashboard be responsive with height and width set to 100%
* and will have internal vertical scroll for the content.
* default true
*/
@Prop() responsive: boolean;
/**
* Browser history strategy to use
* 'hash' - push routing state as by adding '#' component to the browser url
* 'compose' - Navigate without changing the browser path url or history.
* This navigation strategy does not interfer with the host site navigation.
* @default 'hash'
*/
@Prop() historyType: 'hash' | 'compose';
/**
* if enabled, the dashboard navigation push history will be saved.
* @default false
*/
@Prop() composeHistory: boolean;
/**
* has effect only if historyType is set to 'compose'
* if enabled, the dashboard nav paths will be saved in 'nnd' url query parameter.
* @default true
*/
@Prop() composeQueryParam: boolean;
/**
* If set to true, only accomulated analytcs will be displayed.
* Per user anylitics will not be available.
* @default false
*/
@Prop() hidePersonalData: boolean;
/**
* If enabled preferences will not be available to the user.
* @default false
*/
@Prop() hidePreferences: boolean;
/**
* Launch source credentials for integration via proxy.
* For example when the dashboard is do be embedded in LTI IFrame.
*/
@Prop() launchSource: {
consumerKey: string;
origin: string;
};
SSO Authentication
To authenticate a user using SSO, the component exposes the following methods:
The dashboard web-component is built using StencilJS. Please refer to the official docs on more information on how web-components built using StencilJS can be integrated and used:
'token' is same JWT token that is used for widget SSO. For more information please refer to .
