@enplug/sdk-dashboard 5.4.0 → 5.4.2-2.1-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,83 @@
1
+ # Dashboard SDK
2
+
3
+ The Dashboard SDK is a JavaScript library which provides communication between the app hosted within the Dashboard's iframe with the hosting [Dashboard](https://dashboard.enplug.com/). It allows to manage assets, themes, fetch various configurations and present standardized User Interface components.
4
+
5
+ :::note Development tips
6
+ 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](/docs/getting-started/creating-an-app).
7
+ :::
8
+
9
+ ## Installing the Dashboard SDK
10
+
11
+ Include the Dashboard SDK script in your app, by adding the following code to the `<head>` section of your app's HTML file:
12
+ ```html title="Loading Dashboard SDK into the project"
13
+ <script type="text/javascript" src="https://apps.enplug.com/sdk/v1/dashboard.js"></script>
14
+ ```
15
+
16
+ This will create a global [`enplug`/`window.enplug`](/docs/sdk-dashboard/interfaces/enplug) object which gives you the access to the methods provided by the Dashboard.
17
+
18
+ ### Type support
19
+
20
+ If you use TypeScript and would like to have the typings checked in your IDE you can load the following NPM package:
21
+
22
+ ```bash
23
+ npm install @enplug/sdk-dashboard --save-dev
24
+ ```
25
+
26
+ Then, 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.
27
+
28
+ ## Usage
29
+
30
+ After the Dashboard SDK script gets loaded into your app, it will instantly create a global [`enplug`/`window.enplug`](/docs/sdk-dashboard/interfaces/enplug) object which gives you the access to the methods provided by the Dashboard.
31
+
32
+ *See more: [`enplug`](/docs/sdk-dashboard/interfaces/enplug)*
33
+
34
+ ## Useful APIs
35
+
36
+ ### Account API
37
+
38
+ Use [`enplug.account`](/docs/sdk-dashboard/classes/Account) to manipulate assets, access account and configuration related commands.
39
+
40
+ #### Assets
41
+ - {@link getAssets|`enplug.account.getAssets()`} - fetch the asset list
42
+ - {@link getAssetsByIds|`enplug.account.getAssetsByIds()`} - fetch provided assets
43
+ - {@link saveAsset|`enplug.account.saveAsset()`} - creates/updates an asset, can display Deploy Dialog for editing
44
+ - {@link deleteAsset|`enplug.account.deleteAsset()`} - removes an asset
45
+ - {@link touchAsset|`enplug.account.touchAsset()`} - marks asset as recently viewed
46
+
47
+ #### Others
48
+ - {@link getAccount|`enplug.account.getAccount()`} - fetch current account data
49
+ - {@link getUser|`enplug.account.getUser()`} - fetch current user data
50
+ - {@link getThemes|`enplug.account.getThemes()`} - fetches list of themes
51
+ - {@link getTheme|`enplug.account.getTheme()`} - fetches theme
52
+ - {@link editTheme|`enplug.account.editTheme()`} - edits the theme
53
+ - {@link deleteTheme|`enplug.account.deleteTheme()`} - deletes the theme
54
+
55
+ *See more: [`enplug.account`](/docs/sdk-dashboard/classes/Account)*
56
+
57
+ ### Dashboard API
58
+
59
+ Use [`enplug.dashboard`](/docs/sdk-dashboard/classes/Dashboard) to use standardized User Interface components and actions.
60
+
61
+ #### Header section
62
+
63
+ - {@link setHeaderTitle|`enplug.dashboard.setHeaderTitle()`} - sets header title
64
+ - {@link setHeaderButtons|`enplug.dashboard.setHeaderButtons()`} - sets header buttons
65
+ - {@link setDisplaySelectorCallback|`enplug.dashboard.setDisplaySelectorCallback()`} - sets Display Group selector callback
66
+ - {@link setDisplaySelectorVisibility|`enplug.dashboard.setDisplaySelectorVisibility()`} - sets Display Group selector visibility
67
+
68
+ #### Progress indicator
69
+
70
+ - {@link pageLoading|`enplug.dashboard.pageLoading()`} - sets the app's loader visibility
71
+ - {@link loadingIndicator|`enplug.dashboard.loadingIndicator()`} - shows **Loading** indicator
72
+ - {@link successIndicator|`enplug.dashboard.successIndicator()`} - shows **Success** indicator
73
+ - {@link errorIndicator|`enplug.dashboard.errorIndicator()`} - shows **Error** indicator
74
+
75
+ #### Dialogs
76
+
77
+ - {@link Dashboard.previewAsset|`enplug.dashboard.previewAsset()`} - shows asset preview
78
+ - {@link upload|`enplug.dashboard.upload()`} - shows upload dialog
79
+ - {@link openConfirm|`enplug.dashboard.openConfirm()`} - shows custom confirmation dialog
80
+ - {@link confirmUnsavedChanges|`enplug.dashboard.confirmUnsavedChanges()`} - shows unsaved changes dialog
81
+ - {@link setAppHasUnsavedChanges|`enplug.dashboard.setAppHasUnsavedChanges()`} - sets dashboard's navigation guard
82
+
83
+ *See more: [`enplug.dashboard`](/docs/sdk-dashboard/classes/Dashboard)*