diff --git a/docs/add-functionality/add-event.md b/docs/add-functionality/add-event.md index 4d84c8e..c6bf4cd 100644 --- a/docs/add-functionality/add-event.md +++ b/docs/add-functionality/add-event.md @@ -141,74 +141,6 @@ embedDossier.registerEventHandler(EventType.ON_FILTER_UPDATED, filterUpdatedHand } ``` -### onError - -#### Event enumeration - -`EventType.ON_ERROR` - -#### Description - -Raised when an error occurs. - -#### Content - -Error object. - -#### Code example - -```js -embedDossier.registerEventHandler(EventType.ON_ERROR, errorHandler); -``` - -#### Content example - -```json -{ - "title": "Existing Live Session", - "message": "Invalid access token", - "desc": "You're logged in from another tab or window. Please refresh your session to see the latest updates.", - "errorCode": "ERR003_2", - "iServerErrorCode": "", - "statusCode": 401, - "ticketId": "e71565e0c8434133a4a4a53a56d92efb" -} -``` - -### onSessionError - -#### Event enumeration - -`EventType.ON_SESSION_ERROR` - -#### Description - -Raised when a session error occurs. - -#### Content - -Error object. - -#### Code example - -```js -embedDossier.registerEventHandler(EventType.ON_SESSION_ERROR, sessionErrorHandler); -``` - -#### Content example - -```json -{ - "title": "Existing Live Session", - "message": "Invalid access token", - "desc": "You're logged in from another tab or window. Please refresh your session to see the latest updates.", - "errorCode": "ERR003_2", - "iServerErrorCode": "", - "statusCode": 401, - "ticketId": "e71565e0c8434133a4a4a53a56d92efb" -} -``` - ### onPageLoaded #### Event enumeration @@ -429,79 +361,62 @@ embedDossier.registerEventHandler(EventType.ON_VISUALIZATION_RESIZED, vizResized } ``` -### onLibraryItemSelected +### onDossierInstanceIDChange #### Event enumeration -`EventType.ON_LIBRARY_ITEM_SELECTED` +`EventType.ON_DOSSIER_INSTANCE_ID_CHANGE` #### Description -Raised when a library item selected. Need library item select mode to be enabled. +Raised when the embedded dossier instance id changes. #### Content -Object containing library item selection information. +String of the new instance id. #### Code example ```js -embedDossier.registerEventHandler(EventType.ON_LIBRARY_ITEM_SELECTED, libraryItemSelectionHandler); +embedDossier.registerEventHandler(EventType.ON_DOSSIER_INSTANCE_ID_CHANGE, dossierChangedHandler); ``` #### Content example -```json -[ - { - "id": "A7B1C43C4ABA7E499D4E1789A2EBCD55", - "docId": "BFB749B340572473A1288E9A2F6EDDA6", - "projectId": "B19DEDCC11D4E0EFC000EB9495D0F44F", - "name": "Distribution Center & Brands", - "type": 55, - "subtype": null - } -] -``` +"003EB6548141F191CC73308269BB2635" -### onLibraryMenuSelected +### onDossierAuthoringSaved #### Event enumeration -`EventType.ON_LIBRARY_MENU_SELECTED` +`EventType.ON_DOSSIER_AUTHORING_SAVED` #### Description -Raised when a library menu selected. +Raised when a dossier is saved after authoring or editing. #### Content -Object containing library menu selection information. +None #### Code example ```js -embedDossier.registerEventHandler(EventType.ON_LIBRARY_MENU_SELECTED, libraryMenuSelectionHandler); -``` - -#### Content example - -```json -{ - "menuKey": "myContent", - "groupId": null -} +embedDossier.registerEventHandler( + EventType.ON_DOSSIER_AUTHORING_SAVED, + dossierAuthoringSavedHandler +); ``` -### onLibraryItemSelectionCleared +### onDossierAuthoringClosed #### Event enumeration -`EventType.ON_LIBRARY_ITEM_SELECTION_CLEARED` +`EventType.ON_DOSSIER_AUTHORING_CLOSED` #### Description -Raised when a library item selection cleared. +Raised when the authoring or edit mode of dossier is closed. #### Content @@ -511,99 +426,114 @@ None ```js embedDossier.registerEventHandler( - EventType.ON_LIBRARY_ITEM_SELECTION_CLEARED, - libraryItemSelectioClearnHandler + EventType.ON_DOSSIER_AUTHORING_CLOSED, + dossierAuthoringClosedHandler ); ``` -### onDossierInstanceIDChange +### onPageRenderFinished #### Event enumeration -`EventType.ON_DOSSIER_INSTANCE_ID_CHANGE` +`EventType.ON_PAGE_RENDER_FINISHED` #### Description -Raised when the embedded dossier instance id changes. +Raised when the dossier consumption page finishes rendering. #### Content -String of the new instance id. +None #### Code example ```js -embedDossier.registerEventHandler(EventType.ON_DOSSIER_INSTANCE_ID_CHANGE, dossierChangedHandler); +embedDossier.registerEventHandler(EventType.ON_PAGE_RENDER_FINISHED, pageRenderFinishedHandler); ``` -#### Content example - -"003EB6548141F191CC73308269BB2635" - -### onDossierAuthoringSaved +### onDossierInstanceChanged #### Event enumeration -`EventType.ON_DOSSIER_AUTHORING_SAVED` +`EventType.ON_DOSSIER_INSTANCE_CHANGED` #### Description -Raised when a dossier is saved after authoring or editing. +Raised when the a new dossier instance is created on a dossier consumption page. #### Content -None +The event callback parameters contain the project id, dossier id and the instance id. #### Code example ```js -embedDossier.registerEventHandler( - EventType.ON_DOSSIER_AUTHORING_SAVED, - dossierAuthoringSavedHandler -); +embedDossier.registerEventHandler(EventType.ON_DOSSIER_INSTANCE_CHANGED, (content) => { + // Use the content here +}); ``` -### onDossierAuthoringClosed - -#### Event enumeration - -`EventType.ON_DOSSIER_AUTHORING_CLOSED` - -#### Description - -Raised when the authoring or edit mode of dossier is closed. - -#### Content - -None - -#### Code example +#### Content example -```js -embedDossier.registerEventHandler( - EventType.ON_DOSSIER_AUTHORING_CLOSED, - dossierAuthoringClosedHandler -); +```json +{ + "projectId": "B19DEDCC11D4E0EFC000EB9495D0F44F", + "dossierId": "D9AB379D11EC92C1D9DC0080EFD415BB", + "instanceId": "EC003BC7A046E75DE83373A254824F20" +} ``` -### onPageRenderFinished +### onComponentSelectionChanged #### Event enumeration -`EventType.ON_PAGE_RENDER_FINISHED` +`EventType.ON_COMPONENT_SELECTION_CHANGED` #### Description -Raised when the page finishes rendering. +Raised when the dossier consumption page finishes rendering. #### Content -None +The information of the selected components. #### Code example ```js -embedDossier.registerEventHandler(EventType.ON_PAGE_RENDER_FINISHED, pageRenderFinishedHandler); +embedDossier.registerEventHandler(EventType.ON_COMPONENT_SELECTION_CHANGED, (content) => { + // Use the content here +}); +``` + +#### Content example + +```json +{ + "projectId": "B19DEDCC11D4E0EFC000EB9495D0F44F", + "dossierId": "EC5441154009D3C39D5BD6AD75865EF4", + "selectedComponents": [ + { + "key": "K52", + "type": "visualization", + "chapterKey": "K36", + "pageKey": "K53", + "dimensions": { + "width": 300.45, + "height": 400.45 + } + }, + { + "key": "53ACF03646491B5F5F5A7B83EB1BB0BE", + "type": "group", + "chapterKey": "K87", + "pageKey": "K67", + "dimensions": { + "width": 700, + "height": 1000 + } + } + ] +} ``` ## Event handlers diff --git a/docs/add-functionality/authoring-library.md b/docs/add-functionality/authoring-library.md index f78a8ba..36fabde 100644 --- a/docs/add-functionality/authoring-library.md +++ b/docs/add-functionality/authoring-library.md @@ -48,7 +48,7 @@ In authoring mode, most dossier-related APIs are disabled as they are designed f | Dossier.removeSessionErrorhandler | Handles the error handlers. | | Dossier.makeSureSessionAlive | Checks the session. If it is expired, you should refresh it. | -The other APIs are disabled in authoring mode. If a disabled API is called in authoring mode, an error is returned with the message, "The API ${funcName} isn't supported in the authoring mode!" +The other APIs are disabled in authoring mode. If a disabled API is called in authoring mode, an error is returned with the message, "The API $\{funcName\} isn't supported in the authoring mode!" ### Events @@ -301,7 +301,7 @@ When an error occurs, the API returns a promise object that in turn returns an e | Error Case | Error Category | Handling Module | Error Handling | | ------------------------------------------------- | -------------- | --------------- | --------------------------------------------- | | The authoring parameter has the wrong input type. | Invalid input | Embedded SDK | Display an error message and an alert dialog. | -| The authoring.{key} has the wrong input type. | Invalid input | Embedded SDK | Display an error message and an alert dialog. | +| The authoring.$\{key\} has the wrong input type. | Invalid input | Embedded SDK | Display an error message and an alert dialog. | ### API for creating a new dossier for authoring diff --git a/docs/add-functionality/embed-vis.md b/docs/add-functionality/embed-vis.md index 2e18157..fea63a8 100644 --- a/docs/add-functionality/embed-vis.md +++ b/docs/add-functionality/embed-vis.md @@ -151,9 +151,12 @@ myDossier && in which the `resizedVisualization` callback parameter uses the following format: -| Parameter Name | Description | Data Type | Sample | -| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------- | -| `resizedVisualization` | The resized visualization information, similar to:
{
visualizationKey: "string",
size: "maximized"
}
`size` is `normal` or `maximized`. | Object |
{
visualizationKey: "K52",
size: "maximized"
}
| +```json +{ + "visualizationKey": "K52", + "size": "maximized" // "normal" or "maximized" +} +``` ## API errors @@ -161,16 +164,16 @@ in which the `resizedVisualization` callback parameter uses the following form Since you cannot set the callback parameters, it's impossible for these parameters to produce errors. When an error occurs for other reasons, the Embedding SDK returns a promise object that in turn returns an error object in rejected cases. The possible errors are shown below. -| Related APIs | Error Case | Error Handler Callback Parameter | Error Message | -| ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `Dossier.changeVisualizationSize(props)` | The `visKey` is not a valid visualization key or it is not in the current page or panel stack. | Error Object | There isn’t a visualization whose key is “${0}“. Please check whether your input visKey is correct. | -| | The dossier page is still loading. | | You couldn’t manipulate a visualization when the page data is not ready. Please wait a few seconds to call this function again. | -| | The dossier’s manipulation is not finished, so maximize or restore could not be performed. This may occur when the last maximize or restore is in progress. | | You couldn’t resize a visualization when the dossier is busy for loading data. | -| | Another visualization is already maximized. | | Another visualization ${maximizedSiblingKey} is already maximized. Please call dossier.changeVisualizationSize({visualizationKey: "${maximizedSiblingKey}", size: "normal"}) to restore it first. | -| | `visualizationKey` is missing. | | Invalid input for Dossier.changeVisualizationSize(props): data should have required property 'visualizationKey' | -| | `size` is not a valid value. | | Invalid input for Dossier.changeVisualizationSize(props): data.size should match pattern "(^(maximized\|normal)$)" | -| | `resizeButtonVisible` is not a valid value, | | Invalid input for Dossier.changeVisualizationSize(props): data.resizeButtonVisible should be boolean | -| `microstrategy.dossier.create(props)` `Dossier.changeVisualizationSize(props)` | `visualizationKey` is missing | | Error when valid parameter for microstrategy.dossier.create: data.visualizationAppearances[0] should have required property 'visualizationKey' | -| | `size` is not a valid value. | | Error when valid parameter for microstrategy.dossier.create: data.visualizationAppearances[0].size should match pattern "(^(maximized\|normal)$)" | -| | `resizeButtonVisible` isn’t a valid value. | | Error when valid parameter for microstrategy.dossier.create: data.visualizationAppearances[0].resizeButtonVisible should be boolean | -| | The value of `visualizationKey` is not a valid visualization key or it is not in the current page or panel stack . | | There isn’t a visualization whose key is '${vizAppearance.visualizationKey}' in the current page. Please check whether your input 'visualizationKey' is correct. | +| Related APIs | Error Case | Error Handler Callback Parameter | Error Message | +| ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Dossier.changeVisualizationSize(props)` | The `visKey` is not a valid visualization key or it is not in the current page or panel stack. | Error Object | There isn’t a visualization whose key is “${0}“. Please check whether your input visKey is correct. | +| | The dossier page is still loading. | | You couldn’t manipulate a visualization when the page data is not ready. Please wait a few seconds to call this function again. | +| | The dossier’s manipulation is not finished, so maximize or restore could not be performed. This may occur when the last maximize or restore is in progress. | | You couldn’t resize a visualization when the dossier is busy for loading data. | +| | Another visualization is already maximized. | | Another visualization `"${maximizedSiblingKey}"` is already maximized. Please call `dossier.changeVisualizationSize({visualizationKey: "${maximizedSiblingKey}", size: "normal"})` to restore it first. | +| | `visualizationKey` is missing. | | Invalid input for Dossier.changeVisualizationSize(props): data should have required property 'visualizationKey' | +| | `size` is not a valid value. | | Invalid input for Dossier.changeVisualizationSize(props): data.size should match pattern "(^(maximized\|normal)$)" | +| | `resizeButtonVisible` is not a valid value, | | Invalid input for Dossier.changeVisualizationSize(props): data.resizeButtonVisible should be boolean | +| `microstrategy.dossier.create(props)` `Dossier.changeVisualizationSize(props)` | `visualizationKey` is missing | | Error when valid parameter for microstrategy.dossier.create: data.visualizationAppearances[0] should have required property 'visualizationKey' | +| | `size` is not a valid value. | | Error when valid parameter for microstrategy.dossier.create: data.visualizationAppearances[0].size should match pattern "(^(maximized\|normal)$)" | +| | `resizeButtonVisible` isn’t a valid value. | | Error when valid parameter for microstrategy.dossier.create: data.visualizationAppearances[0].resizeButtonVisible should be boolean | +| | The value of `visualizationKey` is not a valid visualization key or it is not in the current page or panel stack . | | There isn’t a visualization whose key is `"${vizAppearance.visualizationKey}"` in the current page. Please check whether your input 'visualizationKey' is correct. | diff --git a/docs/embed-bot-consumption-page/embed-bot-consumption-page.md b/docs/embed-bot-consumption-page/embed-bot-consumption-page.md new file mode 100644 index 0000000..14f9e57 --- /dev/null +++ b/docs/embed-bot-consumption-page/embed-bot-consumption-page.md @@ -0,0 +1,39 @@ +--- +title: Embed MicroStrategy bot consumption page +description: The Embedding SDK allows you to quickly integrate a MicroStrategy bot consumption page into a web application in a responsive manner. +--- + +The Embedding SDK allows you to quickly integrate a MicroStrategy bot consumption page into a web application in a responsive manner. + +There are three basic steps for embedding a MicroStrategy bot consumption page. + +1. In the initial page of your web application, add a link to the MicroStrategy JavaScript Embedding SDK. + + ```html + + ``` + + Replace `{YOUR_LIBRARY_SERVER_URL}` with your actual MicroStrategy Library Server URL, e.g., . + +1. Create a `
` as the placeholder where you want to embed the bot consumption page. + + ```html +
+ ``` + +1. Call the `microstrategy.embeddingContexts.embedBotConsumptionPage(props)` method to embed the bot consumption page in the container. + + ```js + microstrategy.embeddingContexts.embedBotConsumptionPage({ + serverUrl: "{YOUR_LIBRARY_SERVER_URL}", + projectId: "{YOUR_PROJECT_ID}", + objectId: "{YOUR_OBJECT_ID}", + placeholder: document.getElementById("container"), + }); + ``` + +To help you get started, we have provided a number of simple applications with sample code and explanations. + +- [Properties for an embedded MicroStrategy bot consumption page](./embed-bot-consumption-properties.md) + + Describes the properties that can be set for an embedded MicroStrategy bot consumption page. diff --git a/docs/embed-bot-consumption-page/embed-bot-consumption-properties.md b/docs/embed-bot-consumption-page/embed-bot-consumption-properties.md new file mode 100644 index 0000000..c91f5c4 --- /dev/null +++ b/docs/embed-bot-consumption-page/embed-bot-consumption-properties.md @@ -0,0 +1,389 @@ +--- +title: Properties for an embedded MicroStrategy bot consumption page +description: Describes the properties that can be set for an embedded MicroStrategy bot consumption page. +--- + +When you embed a MicroStrategy bot consumption page into a web page, you use the `embedBotConsumptionPage(props)` method under the `microstrategy.embeddingContexts` namespace. + +## Method + +### `microstrategy.embeddingContexts.embedBotConsumptionPage(props)` + +This method creates an iFrame on the web page (in the location specified by the `placeholder` property) and inserts a link to the MicroStrategy bot consumption page URL (specified by the `serverUrl` property). + +#### Return value + +This method returns a promise, which is resolved when the MicroStrategy bot consumption page is loaded. + +#### Input parameters + +The `props` parameter contains required key:value pairs that defines the Library Server URL and the `
` placeholder where the iFrame containing the MicroStrategy bot consumption page will be created. It can also contain other optional key:value pairs to customize the UI, authentication and custom error handler. + +The `props` parameter could contain the following key:value pairs: + +## Properties + +### `placeholder` + +Reference for the container `
`. + +#### Required? + +Yes + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", +}); +``` + +### `serverUrl`, `projectId`, `objectId` + +The required parameters in the bot URL. + +These properties build the full report page URL to be embedded. +The Embedding SDK builds the URL using `serverUrl` + '/app/' + `projectId` + '/' + `objectId` + '/' + `pageKey`. + +#### Required? + +Yes + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", +}); +``` + +### `customApplicationId`, `pageKey` + +The optional parameters in the bot URL. + +Specifies the application and page that the user wants to show in the embedded page. + +When these parameters are specified, the embeded page URL would become `serverUrl` + '/app/config/' + `customApplicationId` + '/' + `projectId` + '/' + `objectId` + '/' + `pageKey`. + +#### Required? + +No + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + customApplicationId: "2AAC5EA4C57449FE9C0F69FE751DCFDB", + pageKey: "K53--K46", +}); +``` + +### `containerHeight` + +Sets the height of the placeholder. + +If the style of the placeholder has a height value, the containerHeight property is ignored. + +The `containerHeight` property is applied as a style: style="height: $(containerHeight)". + +#### Required? + +No + +#### Default value + +600px + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + containerHeight: "600px", +}); +``` + +### `containerWidth` + +Sets the width of the placeholder. + +If the style of the placeholder has a width value, the containerWidth property is ignored. + +#### Required? + +No + +#### Default value + +800px + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + containerWidth: "800px", +}); +``` + +### `enableCustomAuthentication` + +Specifies whether custom authentication is enabled. + +#### Required? + +No + +#### Default value + +`false` + +User needs to log in from the default login page. + +#### Sample + +N/A + +### `customAuthenticationType` + +Specifies the token type returned by the `getLoginToken` function. There are two possible values, which can be provided by the CustomAuthenticationType enumeration. + +#### Required? + +No + +#### Default value + +microstrategy.bot.CustomAuthenticationType.IDENTITY_TOKEN + +#### Sample + +N/A + +### `getLoginToken` + +Specifies a function that returns a promise, which is resolved with either authorization token (`authToken`) or the identity token (`identityToken`) The token type is specified by the customAuthenticationType property. + +#### Required? + +No + +#### Default value + +See the sample code in the next column for the default implementation of this function. + +#### Sample + +When `customAuthenticationType` is set to `CustomAuthenticationType.AUTH_TOKEN`, the following sample demonstrates how to send a fetch request to get `authToken` with your credentials. You can do this using an `XMLHttpRequest`, if your browser does not support `fetch`. + +The `getLoginToken` function can be found in [the `getLoginToken` doc](../add-functionality/methods-and-properties#getlogintoken) + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + enableCustomerAuthentication: true, + customAuthenticationType: microstrategy.bot.CustomAuthenticationType.AUTH_TOKEN, + // The following function is the default implementation. User can provide custom implementation. + getLoginToken() { + // The similar logic as getLoginToken in existing Embedding SDK + }, +}); +``` + +When `customAuthenticationType` is set to `CustomAuthenticationType.IDENTITY_TOKEN`, you need to add a component to your web server. Refer to Use Custom Authentication for more information. + +### `disableCustomErrorHandlerOnCreate` + +To disable the custom error handler, set `disableCustomErrorHandlerOnCreate` to true. + +If this flag is set, all the errors occur in the initial loading process and manual actions would be handled by OOTB Library itself, an error dialog would pop up. + +You could also refer to [Custom error handling during bot creation](../add-functionality/error-handling.md#custom-error-handling-during-bot-creation). + +#### Required? + +No + +#### Default value + +false + +#### Sample + +N/A + +### `errorHandler` + +The custom error handler that executes when the error occurs in the initial loading process. It's a callback function that contains one parameter, `error`. The error object has the property `message`, which contains the detailed error message. + +Whether `errorHandler` is set, the error occured inside the embeded page would output an error in the browser console. The detailed behavior could be seen in [The overall MicroStrategy Library error behavior in embed case](../add-functionality/error-handling.md#the-overall-microstrategy-library-error-behavior-in-embed-case). + +#### Required? + +No + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + placeholder: document.getElementById("container"), + errorHandler: (error) => { + console.log(`catch error during creation: ${error.message}`); + // Do something to handle the error + }, +}); +``` + +### `sessionErrorHandler` + +The custom error handler that executes when an session expiration error occurs. It's a callback function that contains one parameter, `error`. The error object has the property `message`, which contains the detailed error message. + +When session expires: + +- If `sessionErrorHandler` is not set, the embedded page would redirect to the OOTB library login page. +- If `sessionErrorHandler` is set, the session error handler would be triggered and the embedded page would not change for 1 minute. If after 1 minute, the error handler doesn't do anything(like reauthentication and refresh page) to renew the session, the embedded page would redirect to the OOTB Library login page. + +#### Required? + +No + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + placeholder: document.getElementById("container"), + sessionErrorHandler: (error) => { + console.log(`catch session error: ${error.message}`); + // Do something to handle the error + }, +}); +``` + +### `customUi` + +Specifies the custom UI settings on the embedded pages, including MicroStrategy Library home page, bot consumption page,bot authoring page, and report consumption page. + +#### Properties + +##### `addToLibraryBanner` + +Use the `addToLibraryBanner` object to customize the "Add To Library" banner on the MicroStrategy bot consumption page. All detailed properties below are `Boolean`. + +- `enabled` + - Enable the Library "Add To Library" banner or not. If the banner is disabled in custom application, the true value wouldn’t take effect. + - Default value: `false`. + +##### `botConsumption` + +Use the `botConsumption` object to customize UI of the bot consumption page. All detailed properties below are `Boolean`. + +- `snapshot.enabled` + + - Enable the snapshot panel on the bot consumption page or not. + - Default value: `true`. + +- `navigationBar.enabled` + - Enable the navigation bar on the bot consumption page or not. + - Default value: `false`. + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + placeholder: document.getElementById("container"), + customUi: { + addToLibraryBanner: { + enabled: true, + }, + botConsumption: { + snapshot: { + enabled: false, + }, + navigationBar: { + enabled: true, + }, + }, + }, +}); +``` + +### `permissions` + +Specify the permissions on the embedded bot consumption page. + +#### Required? + +No + +#### Properties + +##### `allowClipboardWrite` + +To grant the "ClipboardWrite" permission or not. Could be used to enable the copy functionality on a bot message or not. It's worthy note that the copy functionality also requires the Library server to be HTTPS. If it's an HTTP server, the copy functionality would be disabled, regardless of the value of this flag. + +##### Default value + +`false` + +#### Sample + +```js +microstrategy.embeddingContexts.embedBotConsumptionPage({ + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + placeholder: document.getElementById("container"), + permissions: { + allowClipboardWrite: true, + }, +}); +``` diff --git a/docs/embed-dossier-consumption-page/embed-dossier-consumption-page.md b/docs/embed-dossier-consumption-page/embed-dossier-consumption-page.md new file mode 100644 index 0000000..426556e --- /dev/null +++ b/docs/embed-dossier-consumption-page/embed-dossier-consumption-page.md @@ -0,0 +1,45 @@ +--- +title: Embed MicroStrategy dossier consumption page +description: The Embedding SDK allows you to quickly integrate a MicroStrategy dossier consumption page into a web application in a responsive manner. It also provides resources to add functionalities such as toggling the navigation bar and setting the visibility of icons in the navigation bar. +--- + +The Embedding SDK allows you to quickly integrate a MicroStrategy dossier consumption page into a web application in a responsive manner. It also provides resources to add functionalities such as toggling the navigation bar and setting the visibility of icons in the navigation bar. + +There are three basic steps for embedding a MicroStrategy dossier consumption page. + +1. In the initial page of your web application, add a link to the MicroStrategy JavaScript Embedding SDK. + + ```html + + ``` + + Replace `{YOUR_LIBRARY_SERVER_URL}` with your actual MicroStrategy Library Server URL, e.g., [https://demo.microstrategy.com/MicroStrategyLibrary](https://demo.microstrategy.com/MicroStrategyLibrary). + +1. Create a `
` as the placeholder where you want to embed the dossier consumption page. + + ```html +
+ ``` + +1. Call the `microstrategy.embeddingContexts.embedDossierConsumptionPage(props)` method to embed the dossier consumption page in the container. + + ```js + microstrategy.embeddingContexts.embedDossierConsumptionPage({ + serverUrl: "{YOUR_LIBRARY_SERVER_URL}", + projectId: "{YOUR_PROJECT_ID}", + objectId: "{YOUR_OBJECT_ID}", + placeholder: document.getElementById("container"), + }); + ``` + +The `microstrategy.embeddingContexts.embedDossierConsumptionPage(props)` API is an upgraded version of `microstrategy.dossier.create(props)`. Both of these 2 APIs embed the dossier consumption page after the initial loading, but `microstrategy.embeddingContexts.embedDossierConsumptionPage(props)` supports the user to navigate between the dossier consumption pages and the other types of pages, like Library homepage and report pages, while `microstrategy.dossier.create(props)` doesn't support that. + +To help you get started, we have provided a number of simple applications with sample code and explanations. + +- [Properties for an embedded MicroStrategy dossier consumption page](./embed-dossier-consumption-properties.md) + + Describes the properties that can be set for an embedded MicroStrategy dossier consumption page. + +- [Dossier consumption page APIs](../embedding-context/dossier-consumption-page-apis.md) + + Describes which Embedding SDK APIs are available on the MicroStrategy dossier consumption page. diff --git a/docs/embed-dossier-consumption-page/embed-dossier-consumption-properties.md b/docs/embed-dossier-consumption-page/embed-dossier-consumption-properties.md new file mode 100644 index 0000000..354c339 --- /dev/null +++ b/docs/embed-dossier-consumption-page/embed-dossier-consumption-properties.md @@ -0,0 +1,355 @@ +--- +title: Properties for an embedded MicroStrategy dossier consumption page +description: Describes the properties that can be set for an embedded MicroStrategy dossier consumption page. +--- + +When you embed a MicroStrategy dossier consumption page into a web page, you use the `embedDossierConsumptionPage(props)` method under the `microstrategy.embeddingContexts` namespace. + +## Method + +### `microstrategy.embeddingContexts.embedDossierConsumptionPage(props)` + +This method creates an iFrame on the web page (in the location specified by the `placeholder` property) and inserts a link to the MicroStrategy dossier consumption page URL (specified by the `serverUrl` property). + +#### Return value + +This method returns a promise, which is resolved when the MicroStrategy dossier consumption page is loaded. + +#### Input parameters + +The `props` parameter contains required key:value pairs that defines the Library Server URL and the `
` placeholder where the iFrame containing the MicroStrategy dossier consumption page will be created. It can also contain other optional key:value pairs to customize the UI, authentication and custom error handler. + +The `props` parameter could contain the following key:value pairs: + +## Properties + +### `placeholder` + +Reference for the container `
`. + +#### Required? + +Yes + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", +}); +``` + +### `serverUrl`, `projectId`, `objectId` + +The required parameters in the dossier URL. + +These properties build the full report page URL to be embedded. +The Embedding SDK builds the URL using `serverUrl` + '/app/' + `projectId` + '/' + `objectId` + '/' + `pageKey`. + +#### Required? + +Yes + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", +}); +``` + +### `customApplicationId`, `pageKey` + +The optional parameters in the dossier URL. + +Specifies the application and page that the user wants to show in the embedded page. + +When these parameters are specified, the embeded page URL would become `serverUrl` + '/app/config/' + `customApplicationId` + '/' + `projectId` + '/' + `objectId` + '/' + `pageKey`. + +#### Required? + +No + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + customApplicationId: "2AAC5EA4C57449FE9C0F69FE751DCFDB", + pageKey: "K53--K46", +}); +``` + +### `containerHeight` + +Sets the height of the placeholder. + +If the style of the placeholder has a height value, the containerHeight property is ignored. + +The `containerHeight` property is applied as a style: style="height: $(containerHeight)". + +#### Required? + +No + +#### Default value + +600px + +#### Sample + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + containerHeight: "600px", +}); +``` + +### `containerWidth` + +Sets the width of the placeholder. + +If the style of the placeholder has a width value, the containerWidth property is ignored. + +#### Required? + +No + +#### Default value + +800px + +#### Sample + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + containerWidth: "800px", +}); +``` + +### `enableCustomAuthentication` + +Specifies whether custom authentication is enabled. + +#### Required? + +No + +#### Default value + +`false` + +User needs to log in from the default login page. + +#### Sample + +N/A + +### `customAuthenticationType` + +Specifies the token type returned by the `getLoginToken` function. There are two possible values, which can be provided by the CustomAuthenticationType enumeration. + +#### Required? + +No + +#### Default value + +microstrategy.dossier.CustomAuthenticationType.IDENTITY_TOKEN + +#### Sample + +N/A + +### `getLoginToken` + +Specifies a function that returns a promise, which is resolved with either authorization token (`authToken`) or the identity token (`identityToken`) The token type is specified by the customAuthenticationType property. + +#### Required? + +No + +#### Default value + +See the sample code in the next column for the default implementation of this function. + +#### Sample + +When `customAuthenticationType` is set to `CustomAuthenticationType.AUTH_TOKEN`, the following sample demonstrates how to send a fetch request to get `authToken` with your credentials. You can do this using an `XMLHttpRequest`, if your browser does not support `fetch`. + +The `getLoginToken` function can be found in [the `getLoginToken` doc](../add-functionality/methods-and-properties#getlogintoken) + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + placeholder: document.getElementById("container"), + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + enableCustomerAuthentication: true, + customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN, + // The following function is the default implementation. User can provide custom implementation. + getLoginToken() { + // The similar logic as getLoginToken in existing Embedding SDK + }, +}); +``` + +When `customAuthenticationType` is set to `CustomAuthenticationType.IDENTITY_TOKEN`, you need to add a component to your web server. Refer to Use Custom Authentication for more information. + +### `disableCustomErrorHandlerOnCreate` + +To disable the custom error handler, set `disableCustomErrorHandlerOnCreate` to true. + +If this flag is set, all the errors occur in the initial loading process and manual actions would be handled by OOTB Library itself, an error dialog would pop up. + +You could also refer to [Custom error handling during dossier creation](../add-functionality/error-handling.md#custom-error-handling-during-dossier-creation). + +#### Required? + +No + +#### Default value + +false + +#### Sample + +N/A + +### `errorHandler` + +The custom error handler that executes when the error occurs in the initial loading process. It's a callback function that contains one parameter, `error`. The error object has the property `message`, which contains the detailed error message. + +Whether `errorHandler` is set, the error occured inside the embeded page would output an error in the browser console. The detailed behavior could be seen in [The overall MicroStrategy Library error behavior in embed case](../add-functionality/error-handling.md#the-overall-microstrategy-library-error-behavior-in-embed-case). + +#### Required? + +No + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + placeholder: document.getElementById("container"), + errorHandler: (error) => { + console.log(`catch error during creation: ${error.message}`); + // Do something to handle the error + }, +}); +``` + +### `sessionErrorHandler` + +The custom error handler that executes when an session expiration error occurs. It's a callback function that contains one parameter, `error`. The error object has the property `message`, which contains the detailed error message. + +When session expires: + +- If `sessionErrorHandler` is not set, the embedded page would redirect to the OOTB library login page. +- If `sessionErrorHandler` is set, the session error handler would be triggered and the embedded page would not change for 1 minute. If after 1 minute, the error handler doesn't do anything(like reauthentication and refresh page) to renew the session, the embedded page would redirect to the OOTB Library login page. + +#### Required? + +No + +#### Default value + +N/A + +#### Sample + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + placeholder: document.getElementById("container"), + sessionErrorHandler: (error) => { + console.log(`catch session error: ${error.message}`); + // Do something to handle the error + }, +}); +``` + +### `customUi` + +Specifies the custom UI settings on the embedded pages, including MicroStrategy Library home page, dossier consumption page,dossier authoring page, and report consumption page. + +#### Properties + +Please see all the properties in [The customized UI settings in Embedding SDK](../embed-library-main-page/embed-custom-ui-on-all-pages.md) + +### `settings` + +Specify the custom settings on the embedding pages. Including the non-UI settings of dossier consumption page. + +#### Required? + +No + +#### Properties + +##### `dossierConsumption` + +Use the `dossierConsumption` object to customize the options on the dossier consumption page. The detailed properties contain: + +- `componentSelectionMode` + + - To assign the selection mode of the visualizations or groups on the dossier consumption page. + - Available values: ["noSelection", "singleSelection", "multipleSelection"] + - Default value: "noSelection". + +- `disableManipulationsAutoSaving` + - Disable the dossier instance manipulation auto saving or not. + - Default value: `false`. + +#### Sample + +```js +microstrategy.embeddingContexts.embedDossierConsumptionPage({ + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", + objectId: "D9AB379D11EC92C1D9DC0080EFD415BB", + placeholder: document.getElementById("container"), + settings: { + dossierConsumption: { + componentSelectionMode: "multipleSelection", + disableManipulationsAutoSaving: false, + }, + }, +}); +``` diff --git a/docs/embed-library-main-page/embed-custom-ui-on-all-pages.md b/docs/embed-library-main-page/embed-custom-ui-on-all-pages.md index 9b7eabd..4900f64 100644 --- a/docs/embed-library-main-page/embed-custom-ui-on-all-pages.md +++ b/docs/embed-library-main-page/embed-custom-ui-on-all-pages.md @@ -6,6 +6,8 @@ description: The Embedding SDK enables you to customize the UI components of all The Embedding SDK supports the user to customize the UI components of all embedded pages, including MicroStrategy home page, dossier consumption page, dossier authoring page, and report consumption page. To do this, you need to set the input parameters `props.customUi` in the functions below: - `microstrategy.embeddingContexts.embedLibraryPage(props)` +- `microstrategy.embeddingContexts.embedDossierConsumptionPage(props)` +- `microstrategy.embeddingContexts.embedReportPage(props)` Here is an example: @@ -271,7 +273,7 @@ Use the `navigationBar` object to customize the navigation bar on the page. All No -### props.customUi.dossierAuthoring +### `props.customUi.dossierAuthoring` This field is used to customized the UI components on the dossier authoring page. It has 2 properties: `toolbar` and `menubar`. diff --git a/docs/embed-library-main-page/embed-library-main-page.md b/docs/embed-library-main-page/embed-library-main-page.md index c57ebcb..4f41d49 100644 --- a/docs/embed-library-main-page/embed-library-main-page.md +++ b/docs/embed-library-main-page/embed-library-main-page.md @@ -13,7 +13,7 @@ There are three basic steps for embedding a MicroStrategy Library home page. ``` - Replace `{YOUR_LIBRARY_SERVER_URL}` with your actual MicroStrategy Library Server URL, e.g., . + Replace `{YOUR_LIBRARY_SERVER_URL}` with your actual MicroStrategy Library Server URL, e.g., [https://demo.microstrategy.com/MicroStrategyLibrary](https://demo.microstrategy.com/MicroStrategyLibrary). 1. Create a `
` as the placeholder where you want to embed the Library home page. @@ -36,6 +36,6 @@ To help you get started, we have provided a number of simple applications with s Describes the properties that can be set for an embedded MicroStrategy Library home page. -- [Library page APIs](./library-page-apis.md) +- [Library page APIs](../embedding-context/library-page-apis.md) Describes which Embedding SDK APIs are available on the MicroStrategy Library home page. diff --git a/docs/embed-library-main-page/embed-library-properties.md b/docs/embed-library-main-page/embed-library-properties.md index 248b5c7..baa9f4c 100644 --- a/docs/embed-library-main-page/embed-library-properties.md +++ b/docs/embed-library-main-page/embed-library-properties.md @@ -325,33 +325,6 @@ The special behaviors are as below: - If sidebar is disabled in the application settings, whether setting `customUi.library.sidebar.show` to true or false, the sidebar couldn't be shown. - If the navigation bar is enabled in `customUi.library.navigationBar.enabled` and application settings, and "Collapse toolbar by default" is enabled by default, when `customUi.library.sidebar.show` is true, the navigation bar would be expanded and shown. -### `libraryItemSelectMode` - -Specifies the library item select mode on the embedded pages, including grid and list views. - -#### Required? - -No - -#### Default value - -N/A - -#### Allowed values - -- single -- multiple - -#### Sample - -```js -microstrategy.embeddingContexts.embedLibraryPage({ - placeholder: placeholderDiv, - serverUrl: "http://{host}:{port}/{Library}", - libraryItemSelectMode: "single", -}); -``` - ### `currentPage` Specifies the page on the sidebar entries that you want to embed. diff --git a/docs/embed-report-page/embed-report-page.md b/docs/embed-report-page/embed-report-page.md index 30e10c2..c534fa1 100644 --- a/docs/embed-report-page/embed-report-page.md +++ b/docs/embed-report-page/embed-report-page.md @@ -13,7 +13,7 @@ There are three basic steps for embedding a MicroStrategy report page. ``` - Replace `{YOUR_LIBRARY_SERVER_URL}` with your actual MicroStrategy Library Server URL, e.g., . + Replace `{YOUR_LIBRARY_SERVER_URL}` with your actual MicroStrategy Library Server URL, e.g., [https://demo.microstrategy.com/MicroStrategyLibrary](https://demo.microstrategy.com/MicroStrategyLibrary). 1. Create a `
` as the placeholder where you want to embed the report. @@ -26,6 +26,8 @@ There are three basic steps for embedding a MicroStrategy report page. ```js microstrategy.embeddingContexts.embedReportPage({ serverUrl: "{YOUR_LIBRARY_SERVER_URL}", + projectId: "{YOUR_PROJECT_ID}", + objectId: "{YOUR_OBJECT_ID}", placeholder: document.getElementById("reportContainer"), }); ``` diff --git a/docs/embed-report-page/embed-report-properties.md b/docs/embed-report-page/embed-report-properties.md index bffccaf..300f875 100644 --- a/docs/embed-report-page/embed-report-properties.md +++ b/docs/embed-report-page/embed-report-properties.md @@ -175,7 +175,7 @@ The `getLoginToken` function can be found in [the `getLoginToken` doc](../add-fu ```js microstrategy.embeddingContexts.embedReportPage({ placeholder: placeholderDiv, - serverUrl: "https://{host}:{port}/{Library}", + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", projectId: "B19DEDCC11D4E0EFC000EB9495D0F44F", objectId: "A409D6EC2245D4417C4FBEA5CD87D3A1", enableCustomerAuthentication: true, diff --git a/docs/embedding-context/dossier-consumption-page-apis.md b/docs/embedding-context/dossier-consumption-page-apis.md new file mode 100644 index 0000000..aa2535c --- /dev/null +++ b/docs/embedding-context/dossier-consumption-page-apis.md @@ -0,0 +1,192 @@ +--- +title: Dossier consumption page APIs +description: Describes which Embedding SDK APIs are available on the MicroStrategy dossier consumption page. +--- + +The `dossierConsumption` object is the manipulator of the MicroStrategy dossier consumption page. It could be got by `embeddingContext.dossierConsumption`. + +The details of the `embeddingContext` object could be seen in [Embedding context](./embedding-context.md). + +The APIs under Library page object are as below. + +## Dossier consumption page APIs + +### `getDossierDefinition()` + +#### Description + +This API is used for getting the dossier definition. Its result contains the dossier id, name, project id and TOC information. + +#### Class + +`DossierConsumption` + +#### Return type + +This API would return a Promise object that resolves to an object that contains the dossier definition. Its serialized JSON string is as below: + +```json +{ + "id": "EC5441154009D3C39D5BD6AD75865EF4", + "name": "DDA_Dossier_filter_SearchBox_style", + "projectId": "B19DEDCC11D4E0EFC000EB9495D0F44F", + "chapters": [ + { + "key": "K36", + "name": "Chapter 1", + "pages": [ + { + "key": "K53", + "name": "Page 1" + }, + { + "key": "W78", + "name": "Page 2" + } + ] + } + ] +} +``` + +If the API encounters an error in its executing process, the error would be thrown and could be caught. + +#### Example + +```js +try { + const dossierDefinition = await embeddingContext.dossierConsumption.getDossierDefinition(); +} catch (err) { + // The error handling logic here + console.error(err); +} +``` + +### `selectComponents(componentKeys)` + +#### Description + +This API could be used to select visualizations or groups on a dossier consumption page. + +#### Class + +`DossierConsumption` + +#### Input Parameters + +- `componentKeys`: + + **Data Type** + + `array` + + **Required?** + + Yes + +#### Return type + +This API would return a Promise object that resolves to void. If it encounters an error in its executing process, the error would be thrown and could be caught. + +#### Example + +```js +try { + const response = await embeddingContext.dossierConsumption.selectComponents([ + "K53", + "53ACF03646491B5F5F5A7B83EB1BB0BE", + ]); +} catch (err) { + // The other error handling logic here +} +``` + +### `getSelectedComponents()` + +#### Description + +This API could be used to get currently selected visualizations and groups on a dossier consumption page. + +#### Class + +`DossierConsumption` + +#### Return type + +This API would return a Promise object that resolves to an object that contains the selected components. Its serialized JSON string is as below: + +```json +{ + "projectId": "B19DEDCC11D4E0EFC000EB9495D0F44F", + "dossierId": "EC5441154009D3C39D5BD6AD75865EF4", + "selectedComponents": [ + { + "key": "K52", + "type": "visualization", + "chapterKey": "K36", + "pageKey": "K53" + }, + { + "key": "53ACF03646491B5F5F5A7B83EB1BB0BE", + "type": "group", + "chapterKey": "K87", + "pageKey": "K67" + } + ] +} +``` + +If the API encounters an error in its executing process, the error would be thrown and could be caught. + +#### Example + +```js +try { + const selectedComponents = await embeddingContext.dossierConsumption.getSelectedComponents(); +} catch (err) { + // The other error handling logic here + console.error(err); +} +``` + +### `getDossierInstanceId()` + +#### Description + +The API details are identical to [Dossier.getDossierInstanceId()](../add-functionality/methods-and-properties#dossiergetdossierinstanceid) + +### `getCurrentPageVisualizationList()` + +#### Description + +The API details are identical to [Dossier.getCurrentPageVisualizationList()](../add-functionality/add-nav#getcurrentpagevisualizationlist) + +### `changeVisualizationSize(props)` + +#### Description + +The API details are identical to [Dossier.changeVisualizationSize(props)](../add-functionality/embed-vis#1-change-the-visualization-size) + +### `getCurrentPagePanelStacks()` + +#### Description + +The API details are identical to [Dossier.getCurrentPagePanelStacks()](../add-functionality/panel-stacks#1-get-the-panel-stack-definitions-from-the-current-page) + +### `switchPanel(panelKey)` + +#### Description + +The API details are identical to [Dossier.switchPanel(panelKey)](../add-functionality/panel-stacks#2-switch-panels-on-the-current-page) + +### `getAvailableElements(vizKey)` + +#### Description + +The API details are identical to [Dossier.getAvailableElements(visKey)](../add-functionality/attribute-element-selection#api-for-getting-available-elements) + +### `selectVisualizationElements(props)` + +#### Description + +The API details are identical to [Dossier.selectVizElement(props)](../add-functionality/attribute-element-selection#api-for-attribute-element-selection-in-a-dossier) diff --git a/docs/embedding-context/embedding-context.md b/docs/embedding-context/embedding-context.md new file mode 100644 index 0000000..35084ad --- /dev/null +++ b/docs/embedding-context/embedding-context.md @@ -0,0 +1,95 @@ +--- +title: Embedding context +description: Describes the object that is used for manipulating the embeded pages in the whole embedding lifecycle. +--- + +The `embeddingContext` object a service object that would persist in the whole embedding lifecycle. + +The `embeddingContext` object could be created as below: + +```js +try { + const embeddingContext = await microstrategy.embeddingContexts.embedLibraryPage({ + serverUrl: "https://demo.microstrategy.com/MicroStrategyLibrary", + placeholder: document.getElementById("dossierContainer"), + }); +} catch (err) { + // Your custom error handling logic here +} +``` + +The `embedLibraryPage()` function above can be replaced to the other functions under the `embeddingContexts` namespace, include: + +- `embedDossierConsumptionPage(props)` +- `embedReportPage(props)` + +This `embeddingContext` object could be used when the user navigates between different types of pages. It has several fields: + +- `libraryPage`: used for call the APIs that interact with the Library homepage. The detailed APIs could be seen in [Library page APIs](./library-page-apis.md) +- `dossierConsumption`: used for call the APIs that interact with the dossier consumption page. The detailed APIs could be seen in [Dossier consumption page APIs](./dossier-consumption-page-apis.md) + +If the current embedded page is the Library homepage, and the user uses the manipulation object of the other pages, like `embeddingContext.dossierConsumption` to call the APIs of the other page, there would be an error. + +Besides the APIs on different types of pages, there are still some APIs that could be used on all kinds of pages, so we put them under the `embeddingContext` object. Include: + +## Embedding context APIs + +### `registerEventHandler(evtName, handler)` + +#### Class + +`EmbeddingContext` + +#### Description + +See the identical function in [Event handlers](../add-functionality/add-event#registereventhandlerevtname-handler). + +### `removeEventHandler(evtName, handler)` + +#### Class + +`EmbeddingContext` + +#### Description + +See the identical function in [Event handlers](../add-functionality/add-event#removeeventhandlerevtname-handler). + +### `addCustomErrorHandler(handler, showErrorPopup)` + +#### Class + +`EmbeddingContext` + +#### Description + +See the identical function in [Custom error handling after dossier creation](../add-functionality/error-handling#custom-error-handling-after-dossier-creation). + +### `removeCustomErrorHandler()` + +#### Class + +`EmbeddingContext` + +#### Description + +See the identical function in [Custom error handling after dossier creation](../add-functionality/error-handling#custom-error-handling-after-dossier-creation). + +### `addSessionErrorHandler(handler)` + +#### Class + +`EmbeddingContext` + +#### Description + +See the identical function in [Session error handling after dossier creation](../add-functionality/error-handling#session-error-handling-after-dossier-creation). + +### `removeSessionErrorhandler()` + +#### Class + +`EmbeddingContext` + +#### Description + +See the identical function in [Session error handling after dossier creation](../add-functionality/error-handling#session-error-handling-after-dossier-creation). diff --git a/docs/embed-library-main-page/library-page-apis.md b/docs/embedding-context/library-page-apis.md similarity index 64% rename from docs/embed-library-main-page/library-page-apis.md rename to docs/embedding-context/library-page-apis.md index 715f703..3eec51e 100644 --- a/docs/embed-library-main-page/library-page-apis.md +++ b/docs/embedding-context/library-page-apis.md @@ -5,45 +5,7 @@ description: Describes which Embedding SDK APIs are available on the MicroStrate The `LibraryPage` object is the manipulator of the MicroStrategy Library home page. It could be got by `embeddingContext.libraryPage`. -The `embeddingContext` object could be created as below: - -```js -try { - const embeddingContext = await microstrategy.embeddingContexts.embedLibraryPage({ - serverUrl: "{YOUR_LIBRARY_SERVER_URL}", - placeholder: document.getElementById("dossierContainer"), - }); - // An example to call the LibraryPage APIs - const myGroups = await embeddingContext.libraryPage.getAllMyGroups(); -} catch (err) { - // Your custom error handling logic here -} -``` - -This object is actually a service object that would persist in the embedding context. So if the user goes to a dossier page from the home page, then return to the home page again, this object could still be used. - -If the user wants to use the APIs below to manipulate the Library home page when he embeds a dossier page by `microstrategy.dossier.create()` at first, he could do the following things: - -- Click the "Go to Library" icon on the page to navigate to the Library home page; -- Call `Dossier.getEmbeddingContext()` to get the EmbeddingContext object; -- Use the EmbeddingContext object to call Library home page APIs. - -A piece of example code could be like this: - -```js -try { - const dossier = await microstrategy.dossier.create({ - url: "{YOUR_DOSSIER_URL}", - placeholder: document.getElementById("dossierContainer"), - }); - // ... Some manual actions to go to the Library home page - const embeddingContext = dossier.getEmbeddingContext(); - // Use some Library home page APIs - const myGroups = await embeddingContext.libraryPage.getAllMyGroups(); -} catch (err) { - // Your custom error handling logic here -} -``` +The details of the `embeddingContext` object could be seen in [Embedding context](./embedding-context.md). The APIs under Library page object are as below. diff --git a/docs/index.md b/docs/index.md index 167de96..b48373e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -14,7 +14,7 @@ There are three basic steps for embedding a dossier. ``` - Replace `{YOUR_LIBRARY_SERVER_URL}` with your actual MicroStrategy Library Server URL, e.g., . + Replace `{YOUR_LIBRARY_SERVER_URL}` with your actual MicroStrategy Library Server URL, e.g., [https://demo.microstrategy.com/MicroStrategyLibrary](https://demo.microstrategy.com/MicroStrategyLibrary). :::tip diff --git a/docs/support-for-different-authentication-environments/guest-authentication-mode-only.md b/docs/support-for-different-authentication-environments/guest-authentication-mode-only.md index 87c93bb..b1915b7 100644 --- a/docs/support-for-different-authentication-environments/guest-authentication-mode-only.md +++ b/docs/support-for-different-authentication-environments/guest-authentication-mode-only.md @@ -9,7 +9,7 @@ To help you get started, we have provided [a live example](https://microstrategy We have provided simple instructions and code snippets to help you configure the example to use a dossier from your MicroStrategy Library Server. If you customize the example, however, you must configure your Library Server to support only Guest authentication. -Please also check out the examples in [Embedding SDK Playground](https://microstrategy.github.io/playground/) from the "Start over" button and . +Please also check out the examples in [Embedding SDK Playground](https://microstrategy.github.io/playground/) from the "Start over" button and [https://microstrategy.github.io/embedding-sdk-samples](https://microstrategy.github.io/embedding-sdk-samples). ```html diff --git a/docs/whats-new-in-the-embedding-sdk.md b/docs/whats-new-in-the-embedding-sdk.md index ed4d238..e7fd998 100644 --- a/docs/whats-new-in-the-embedding-sdk.md +++ b/docs/whats-new-in-the-embedding-sdk.md @@ -5,11 +5,19 @@ description: In each release, changes are made to make the MicroStrategy SDK mor In each release, changes are made to make the MicroStrategy SDK more powerful and easier to use. -## 2021 Update 11(September 2023) +## 2021 Update 12 -- [Event handlers added to Library for; item selection, and menu selection.](./add-functionality/add-event.md) +- [Embed MicroStrategy bot consumption page](./embed-bot-consumption-page/embed-bot-consumption-page.md) + - You can use a new Embedding SDK API to embed a bot consumption page. The user also could do some UI customizations. -## 2021 Update 9 (May 2023) +## 2021 Update 11 + +- [Embed MicroStrategy dossier consumption page](./embed-dossier-consumption-page/embed-dossier-consumption-page.md) + - You can use a new Embedding SDK API to embed a dossier consumption page, in which we support the user to navigate between the dossier and the homepage. +- [Dossier consumption page APIs](./embedding-context/dossier-consumption-page-apis.md) + - You can call new APIs on the dossier consumption page to get and set the selected components. + +## 2021 Update 9 [Native Embedding SDK](./native-embedding-architecture/native-embedding-architecture.md) @@ -17,15 +25,11 @@ In each release, changes are made to make the MicroStrategy SDK more powerful an - Users can interact with the embedded visualization. - Users can use APIs to perform manipulations such as filtering. -## 2021 Update 8 (February 2023) - -[Embed MicroStrategy report page.](./embed-report-page/embed-report-page.md) - -- Users can embed MicroStrategy report consumption page. -- Users can control the visibility of the navigation bar of the report consumption page. - ## 2021 Update 8 +- [Embed MicroStrategy report page.](./embed-report-page/embed-report-page.md) + - Users can embed MicroStrategy report consumption page. + - Users can control the visibility of the navigation bar of the report consumption page. - [Ability to customize dossier pages from embedding Library home page](./embed-library-main-page/embed-custom-ui-on-all-pages.md) - [Ability to customize Library home page from embedding dossier page](./add-functionality/methods-and-properties.md#customui) diff --git a/sidebars.js b/sidebars.js index 7dbc448..57d0382 100644 --- a/sidebars.js +++ b/sidebars.js @@ -66,10 +66,27 @@ const sidebars = { label: "Embed MicroStrategy Library home page", items: [ "embed-library-main-page/embed-library-properties", - "embed-library-main-page/library-page-apis", "embed-library-main-page/embed-custom-ui-on-all-pages", ], }, + { + type: "category", + link: { + type: "doc", + id: "embed-dossier-consumption-page/embed-dossier-consumption-page", + }, + label: "Embed MicroStrategy dossier consumption page", + items: ["embed-dossier-consumption-page/embed-dossier-consumption-properties"], + }, + { + type: "category", + link: { + type: "doc", + id: "embed-bot-consumption-page/embed-bot-consumption-page", + }, + label: "Embed MicroStrategy bot consumption page", + items: ["embed-bot-consumption-page/embed-bot-consumption-properties"], + }, { type: "category", link: { @@ -79,6 +96,18 @@ const sidebars = { label: "Embed MicroStrategy report page", items: ["embed-report-page/embed-report-properties"], }, + { + type: "category", + link: { + type: "doc", + id: "embedding-context/embedding-context", + }, + label: "Embedding context", + items: [ + "embedding-context/library-page-apis", + "embedding-context/dossier-consumption-page-apis", + ], + }, { type: "category", link: {