Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 99 additions & 12 deletions docs/add-functionality/add-event.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
title: Add event handling
description: Events allow an embedded dossier to communicate with the container page. You can listen for these events and provide event handler functions to respond to them. You use helper methods in the Embedding SDK to add event handling. For example, you can add code to capture selection events from one dossier and apply them as a filter to a second dossier.
description: Events allow an embedded dashboard to communicate with the container page. You can listen for these events and provide event handler functions to respond to them. You use helper methods in the Embedding SDK to add event handling. For example, you can add code to capture selection events from one dashboard and apply them as a filter to a second dashboard.
---

Events allow an embedded dossier to communicate with the container page. You can listen to these events and provide event handler functions to respond to them. You use helper methods in the Embedding SDK to add event handlers. For example, you can add code to capture selection events from one dossier and apply them as a filter to a second dossier.
Events allow an embedded dashboard to communicate with the container page. You can listen to these events and provide event handler functions to respond to them. You use helper methods in the Embedding SDK to add event handlers. For example, you can add code to capture selection events from one dashboard and apply them as a filter to a second dashboard.

:::tip

To help you get started, we have provided an [example in the Embedding SDK Playground](https://microstrategy.github.io/playground/?example=g5) that embeds a dossier and adds event handling, as well as a description of [events](#events), [event handlers](#event-handlers), and [wrapper functions](#wrapper-functions) you can use to handle additional events.
To help you get started, we have provided an [example in the Embedding SDK Playground](https://microstrategy.github.io/playground/?example=g5) that embeds a dashboard and adds event handling, as well as a description of [events](#events), [event handlers](#event-handlers), and [wrapper functions](#wrapper-functions) you can use to handle additional events.

:::

Once you have used the `dossier.create(props)` method to embed a dossier into a third-party web page, you can use the methods described below to communicate between the dossier and the container page. You can register [event handlers](#event-handlers) for the [events](#events) that are automatically raised when a visualization is selected or when a page or filter is changed. [Wrapper functions](#wrapper-functions) are provided to make it easy to register event handlers for specific events.
Once you have used the `dossier.create(props)` method to embed a dashboard into a third-party web page, you can use the methods described below to communicate between the dashboard and the container page. You can register [event handlers](#event-handlers) for the [events](#events) that are automatically raised when a visualization is selected or when a page or filter is changed. [Wrapper functions](#wrapper-functions) are provided to make it easy to register event handlers for specific events.

## Events

Expand Down Expand Up @@ -218,7 +218,7 @@ embedDossier.registerEventHandler(EventType.ON_PROMPT_ANSWERED, promptAnsweredHa

```json
{
"messageName": "Sales Dossier (w/ Attribute Element Prompt)",
"messageName": "Sales Dashboard (w/ Attribute Element Prompt)",
"answers": [
{
"key": "3ECF2592C947B909B01624BCF690D6EA@0@10",
Expand Down Expand Up @@ -361,6 +361,93 @@ embedDossier.registerEventHandler(EventType.ON_VISUALIZATION_RESIZED, vizResized
}
```

### onLibraryItemSelected

#### Event enumeration

`EventType.ON_LIBRARY_ITEM_SELECTED`

#### Description

Raised when a library item selected. Need library item select mode to be enabled.

#### Content

Object containing library item selection information.

#### Code example

```js
embedDossier.registerEventHandler(EventType.ON_LIBRARY_ITEM_SELECTED, libraryItemSelectionHandler);
```

#### Content example

```json
[
{
"id": "A7B1C43C4ABA7E499D4E1789A2EBCD55",
"docId": "BFB749B340572473A1288E9A2F6EDDA6",
"projectId": "B19DEDCC11D4E0EFC000EB9495D0F44F",
"name": "Distribution Center & Brands",
"type": 55,
"subtype": null
}
]
```

### onLibraryMenuSelected

#### Event enumeration

`EventType.ON_LIBRARY_MENU_SELECTED`

#### Description

Raised when a library menu selected.

#### Content

Object containing library menu selection information.

#### Code example

```js
embedDossier.registerEventHandler(EventType.ON_LIBRARY_MENU_SELECTED, libraryMenuSelectionHandler);
```

#### Content example

```json
{
"menuKey": "myContent",
"groupId": null
}
```

### onLibraryItemSelectionCleared

#### Event enumeration

`EventType.ON_LIBRARY_ITEM_SELECTION_CLEARED`

#### Description

Raised when a library item selection cleared.

#### Content

None

#### Code example

```js
embedDossier.registerEventHandler(
EventType.ON_LIBRARY_ITEM_SELECTION_CLEARED,
libraryItemSelectioClearnHandler
);
```

### onDossierInstanceIDChange

#### Event enumeration
Expand All @@ -369,7 +456,7 @@ embedDossier.registerEventHandler(EventType.ON_VISUALIZATION_RESIZED, vizResized

#### Description

Raised when the embedded dossier instance id changes.
Raised when the embedded dashboard instance id changes.

#### Content

Expand All @@ -393,7 +480,7 @@ embedDossier.registerEventHandler(EventType.ON_DOSSIER_INSTANCE_ID_CHANGE, dossi

#### Description

Raised when a dossier is saved after authoring or editing.
Raised when a dashboard is saved after authoring or editing.

#### Content

Expand All @@ -416,7 +503,7 @@ embedDossier.registerEventHandler(

#### Description

Raised when the authoring or edit mode of dossier is closed.
Raised when the authoring or edit mode of dashboard is closed.

#### Content

Expand All @@ -439,7 +526,7 @@ embedDossier.registerEventHandler(

#### Description

Raised when the dossier consumption page finishes rendering.
Raised when the dashboard consumption page finishes rendering.

#### Content

Expand All @@ -459,11 +546,11 @@ embedDossier.registerEventHandler(EventType.ON_PAGE_RENDER_FINISHED, pageRenderF

#### Description

Raised when the a new dossier instance is created on a dossier consumption page.
Raised when the a new dashboard instance is created on a dashboard consumption page.

#### Content

The event callback parameters contain the project id, dossier id and the instance id.
The event callback parameters contain the project id, dashboard id and the instance id.

#### Code example

Expand Down Expand Up @@ -491,7 +578,7 @@ embedDossier.registerEventHandler(EventType.ON_DOSSIER_INSTANCE_CHANGED, (conten

#### Description

Raised when the dossier consumption page finishes rendering.
Raised when the dashboard consumption page finishes rendering.

#### Content

Expand Down
22 changes: 11 additions & 11 deletions docs/add-functionality/add-functionality.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
---
title: Add functionality to an embedded dossier
title: Add functionality to an embedded dashboard
description: Once you have embedded a dossier, you can use helper methods in the Embedding SDK to add other functionality. The topics in this section describe how to implement different kinds of functionalities with code examples.
---

Once you have embedded a dossier, you can use helper methods in the Embedding SDK to add other functionality. The topics in this section describe how to implement different kinds of functionalities with code examples.

- [Methods and properties for an embedded dossier](./methods-and-properties.md)
- [Methods and properties for an embedded dashboard](./methods-and-properties.md)

Describes the properties that can be set for an embedded dossier. Provides an example that modifies UI elements like the navigation bar and size of the embedded dossier through properties.
Describes the properties that can be set for an embedded dashboard. Provides an example that modifies UI elements like the navigation bar and size of the embedded dashboard through properties.

- [Add navigation](./add-nav.md)

Describes the methods that can be used for navigation within an embedded dossier. For example, the Embedding SDK lets you add code to get the table of contents for the dossier, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations. Provides an example that illustrates how to include navigation controls to allow users to page through the various chapters and pages of an embedded dossier.
Describes the methods that can be used for navigation within an embedded dashboard. For example, the Embedding SDK lets you add code to get the table of contents for the dossier, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations. Provides an example that illustrates how to include navigation controls to allow users to page through the various chapters and pages of an embedded dashboard.

- [Add event handling](./add-event.md)

Describes events that an embedded dossier can use to communicate with the container page and methods and wrapper functions for registering event handlers. For example, the Embedding SDK lets you add code to capture selection events from one dossier and apply them as a filter to a second dossier. Provides an example that illustrates how to capture selection events from one embedded dossier and apply them as a filter to a second dossier.
Describes events that an embedded dashboard can use to communicate with the container page and methods and wrapper functions for registering event handlers. For example, the Embedding SDK lets you add code to capture selection events from one dashboard and apply them as a filter to a second dashboard. Provides an example that illustrates how to capture selection events from one embedded dashboard and apply them as a filter to a second dashboard.

- [Retrieve and apply filters](./filters.md)

Describes how to retrieve and apply filters for an embedded dossier and shows the filter details for each filter type, with code examples. For example, you can apply different kinds of filters to a chapter in a dossier, either during execution or after a dossier has been rendered. Provides examples on how to retrieve filters and apply each different type of filter.
Describes how to retrieve and apply filters for an embedded dashboard and shows the filter details for each filter type, with code examples. For example, you can apply different kinds of filters to a chapter in a dossier, either during execution or after a dashboard has been rendered. Provides examples on how to retrieve filters and apply each different type of filter.

- [Error handling](./error-handling.md)

Describes how to implement custom error handler to handle errors.

- [Interact with panel stacks](./panel-stacks.md)

Describes how to interact with panel stacks within dossier. Provides an example on panel-related APIs.
Describes how to interact with panel stacks within dashboard. Provides an example on panel-related APIs.

- [Embed a single visualization](./embed-vis.md)

Describes how to embed a single visualization and set it to be maximized. Provides an example that shows embedding a dossier with a single visualization maximized and options to change which visualization to be maximized.
Describes how to embed a single visualization and set it to be maximized. Provides an example that shows embedding a dashboard with a single visualization maximized and options to change which visualization to be maximized.

- [Enable the selection of attribute elements](./attribute-element-selection.md)

Describes how to programmatically make attribute element selections on an embedded dossier and capture the selection events.
Describes how to programmatically make attribute element selections on an embedded dashboard and capture the selection events.

- [Author an embedded dossier](./authoring-library.md)
- [Author an embedded dashboard](./authoring-library.md)

Describes how to embed a dossier in authoring or edit mode during the initial dossier load and after the dossier is loaded.
Describes how to embed a dashboard in authoring or edit mode during the initial dashboard load and after the dashboard is loaded.

:::tip

Expand Down
26 changes: 13 additions & 13 deletions docs/add-functionality/add-nav.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Add navigation
description: Once you have embedded a dossier, you can use helper methods in the Embedding SDK to let users navigate within the dossier. For example, you can add code to get the table of contents for the dossier, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations.
description: Once you have embedded a dossier, you can use helper methods in the Embedding SDK to let users navigate within the dashboard. For example, you can add code to get the table of contents for the dossier, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations.
---

The Embedding SDK allows you to quickly integrate dossiers into a web application in a responsive manner. Once you have embedded a dossier, you can use helper methods in the Embedding SDK to let users navigate within the dossier. For example, you can add code to get the table of contents for the dossier, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations.
The Embedding SDK allows you to quickly integrate dossiers into a web application in a responsive manner. Once you have embedded a dossier, you can use helper methods in the Embedding SDK to let users navigate within the dashboard. For example, you can add code to get the table of contents for the dossier, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations.

:::tip

Expand All @@ -13,7 +13,7 @@ To help you get started, we have provided a [page navigation example in the Embe

## Helper methods for navigation

You can use the methods described below to navigate within the dossier. You can get the table of contents for the dossier, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations.
You can use the methods described below to navigate within the dashboard. You can get the table of contents for the dossier, go to the previous or next page, navigate to a specific page, get the current page or chapter, get a specific page, or get a list of pages, chapters and visualizations.

Most of the navigation is performed using methods of the Dossier class, but there is one method for navigation in the Chapter class.

Expand All @@ -29,7 +29,7 @@ Most of the navigation is performed using methods of the Dossier class, but ther

#### Description

Return the structure of the embedded dossier in the following format:
Return the structure of the embedded dashboard in the following format:

```json
{
Expand Down Expand Up @@ -80,7 +80,7 @@ embedDossier.getTableContent();

#### Description

Go to the previous page of the embedded dossier.
Go to the previous page of the embedded dashboard.

Return a promise, resolved with

Expand Down Expand Up @@ -113,7 +113,7 @@ embedDossier.goToPrevPage();

#### Description

Go to the next page of the embedded dossier.
Go to the next page of the embedded dashboard.

Return a promise, resolved with

Expand Down Expand Up @@ -146,7 +146,7 @@ embedDossier.goToNextPage();

#### Description

Switch to the specified page of the embedded dossier.
Switch to the specified page of the embedded dashboard.

Return a promise, resolved with

Expand Down Expand Up @@ -180,7 +180,7 @@ embedDossier.navigateToPage(lastPageOfChapter);

#### Description

Return the current chapter of the embedded dossier.
Return the current chapter of the embedded dashboard.

#### Example

Expand All @@ -200,7 +200,7 @@ embedDossier.getCurrentChapter();

#### Description

Return the current page of the embedded dossier.
Return the current page of the embedded dashboard.

#### Example

Expand All @@ -220,7 +220,7 @@ embedDossier.getCurrentPage();

#### Description

Return the page of the embedded dossier with the specified `nodeKey`.
Return the page of the embedded dashboard with the specified `nodeKey`.

You can get the `nodeKey` from the return value of `getTableContent()`, or You can get the `nodeKey` from the `nodeKey` property of the Page object (`Page.nodeKey`).

Expand All @@ -242,7 +242,7 @@ embedDossier.getPageByNodeKey("K52");

#### Description

Return a list of all chapters in the embedded dossier.
Return a list of all chapters in the embedded dashboard.

#### Example

Expand All @@ -262,7 +262,7 @@ embedDossier.getChapterList();

#### Description

Return an array of all the visualizations in the current page of the embedded dossier.
Return an array of all the visualizations in the current page of the embedded dashboard.

#### Example

Expand Down Expand Up @@ -322,7 +322,7 @@ embedDossier.closeFilterSummaryBar();

#### Description

Return an array of all the pages in this chapter of the embedded dossier.
Return an array of all the pages in this chapter of the embedded dashboard.

#### Example

Expand Down
Loading