Dashboard SDK
The Dashboard SDK is a JavaScript library which provides communication between the app hosted within the Dashboard's iframe with the hosting Dashboard. It allows to manage assets, themes, fetch various configurations and present standardized User Interface components.
:::note Development tips The app using Dashboard SDK has to be run inside of the Dashboard's iframe to function properly as the SDK serves as a transport channel of the messages only. All commands are actually executed by the hosting Dashboard. This means that running your app outside of the Dashboard will not work. To run your app inside of the Dashboard, you need to add it to the system. See Creating an App. :::
Installing the Dashboard SDK
Include the Dashboard SDK script in your app, by adding the following code to the <head> section of your app's HTML file:
<script type="text/javascript" src="https://apps.enplug.com/sdk/v1/dashboard.js"></script>This will create a global enplug/window.enplug object which gives you the access to the methods provided by the Dashboard.
Type support
If you use TypeScript and would like to have the typings checked in your IDE you can load the following NPM package:
npm install @enplug/sdk-dashboard --save-devThen, add "@enplug/sdk-dashboard" to the types array in your TypeScript config file. Make sure that typeRoots array has the "node_modules" entry, so that the whole path is available to the compiler.
Usage
After the Dashboard SDK script gets loaded into your app, it will instantly create a global enplug/window.enplug object which gives you the access to the methods provided by the Dashboard.
See more: enplug
Useful APIs
Account API
Use enplug.account to manipulate assets, access account and configuration related commands.
Assets
- {@link getAssets|
enplug.account.getAssets()} - fetch the asset list - {@link getAssetsByIds|
enplug.account.getAssetsByIds()} - fetch provided assets - {@link saveAsset|
enplug.account.saveAsset()} - creates/updates an asset, can display Deploy Dialog for editing - {@link deleteAsset|
enplug.account.deleteAsset()} - removes an asset - {@link touchAsset|
enplug.account.touchAsset()} - marks asset as recently viewed
Others
- {@link getAccount|
enplug.account.getAccount()} - fetch current account data - {@link getUser|
enplug.account.getUser()} - fetch current user data - {@link getThemes|
enplug.account.getThemes()} - fetches list of themes - {@link getTheme|
enplug.account.getTheme()} - fetches theme - {@link editTheme|
enplug.account.editTheme()} - edits the theme - {@link deleteTheme|
enplug.account.deleteTheme()} - deletes the theme
See more: enplug.account
Dashboard API
Use enplug.dashboard to use standardized User Interface components and actions.
Header section
- {@link setHeaderTitle|
enplug.dashboard.setHeaderTitle()} - sets header title - {@link setHeaderButtons|
enplug.dashboard.setHeaderButtons()} - sets header buttons - {@link setDisplaySelectorCallback|
enplug.dashboard.setDisplaySelectorCallback()} - sets Display Group selector callback - {@link setDisplaySelectorVisibility|
enplug.dashboard.setDisplaySelectorVisibility()} - sets Display Group selector visibility
Progress indicator
- {@link pageLoading|
enplug.dashboard.pageLoading()} - sets the app's loader visibility - {@link loadingIndicator|
enplug.dashboard.loadingIndicator()} - shows Loading indicator - {@link successIndicator|
enplug.dashboard.successIndicator()} - shows Success indicator - {@link errorIndicator|
enplug.dashboard.errorIndicator()} - shows Error indicator
Dialogs
- {@link Dashboard.previewAsset|
enplug.dashboard.previewAsset()} - shows asset preview - {@link upload|
enplug.dashboard.upload()} - shows upload dialog - {@link openConfirm|
enplug.dashboard.openConfirm()} - shows custom confirmation dialog - {@link confirmUnsavedChanges|
enplug.dashboard.confirmUnsavedChanges()} - shows unsaved changes dialog - {@link setAppHasUnsavedChanges|
enplug.dashboard.setAppHasUnsavedChanges()} - sets dashboard's navigation guard
See more: enplug.dashboard