Dashboard Embedding Example

# Amazon QuickSight Embedding SDK Thank you for using the Amazon QuickSight JavaScript SDK. You can use this SDK to embed Amazon QuickSight in your HTML. For more information and to learn how to use QuickSight Embedding, please visit [QuickSight Developer Portal Website](https://developer.quicksight.aws/) Amazon QuickSight offers four different embedding experiences with options for user isolation with namespaces, and custom UI permissions. * [Dashboard Embedding](#dashboard-embedding) * [Visual Embedding](#visual-embedding) * [Console Embedding](#console-embedding) * [QSearchBar Embedding](#qsearchbar-embedding) ## Installation **Option 1:** Use the Amazon QuickSight Embedding SDK in the browser: ```html ... ... ... ``` **Option 2:** Install the Amazon QuickSight Embedding SDK in NodeJs: ```shell npm install amazon-quicksight-embedding-sdk ``` and then use it in your code using `require` syntax ```javascript const QuickSightEmbedding = require("amazon-quicksight-embedding-sdk"); const embeddingContext = await QuickSightEmbedding.createEmbeddingContext(); ``` or, using named `import` syntax: ```javascript import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk'; const embeddingContext = await createEmbeddingContext(); ``` or, using wildcard `import` syntax: ```javascript import * as QuickSightEmbedding from 'amazon-quicksight-embedding-sdk'; const embeddingContext = await QuickSightEmbedding.createEmbeddingContext(); ``` ## Creating the Embedding Context Use `createEmbeddingContext` method to create an embedding context. It returns a promise of `EmbeddingContext` type. ```typescript export type CreateEmbeddingContext = (frameOptions?: EmbeddingContextFrameOptions) => Promise export type EventListener = ( event: EmbeddingEvents, metadata?: ExperienceFrameMetadata ) => void; export type EmbeddingContextFrameOptions = { onChange?: EventListener; }; export type IEmbeddingContext = { embedDashboard: (frameOptions: FrameOptions, contentOptions?: DashboardContentOptions) => Promise; embedVisual: (frameOptions: FrameOptions, contentOptions?: VisualContentOptions) => Promise; embedQSearchBar: (frameOptions: FrameOptions, contentOptions?: QSearchContentOptions) => Promise; embedConsole: (frameOptions: FrameOptions, contentOptions?: ConsoleContentOptions) => Promise; }; ``` You can create the embedding context by calling `createEmbeddingContext` method without any arguments ```javascript import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk'; const embeddingContext: EmbeddingContext = await createEmbeddingContext(); ``` or, you can pass an object argument with `onChange` property ```javascript import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk'; const embeddingContext: EmbeddingContext = await createEmbeddingContext({ onChange: (changeEvent) => { console.log('Context received a change', changeEvent); }, }); ``` The embedding context creates an additional zero-pixel iframe and appends it into the `body` element on the page to centralize communication between the SDK and the embedded QuickSight content. ## Embedding the Amazon QuickSight Experiences An `EmbeddingContext` instance exposes 4 experience methods * embedDashboard * embedVisual * embedQSearchBar * embedConsole These methods take 2 parameters: * frameOptions (required) * contentOptions (optional) ### Example ```typescript import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk'; const embeddingContext = await createEmbeddingContext(); const { embedDashboard, embedVisual, embedConsole, embedQSearchBar, } = embeddingContext; const frameOptions = { //... }; const contentOptions = { //... }; // Embedding a dashboard experience const embeddedDashboardExperience = await embedDashboard(frameOptions, contentOptions); // Embedding a visual experience const embeddedVisualExperience = await embedVisual(frameOptions, contentOptions); // Embedding a console experience const embeddedConsoleExperience = await embedConsole(frameOptions, contentOptions); // Embedding a Q search bar experience const embeddedQSearchExperience = await embedQSearchBar(frameOptions, contentOptions); ``` ### Common Properties of `frameOptions` for All Embedding Experiences #### 🔹 url: *string* *(required)* This is the embed URL you have generated using the [QuickSight API Operations for Embedding](https://docs.aws.amazon.com/en_us/quicksight/latest/APIReference/embedding-quicksight.html). Follow [Embedding with the QuickSight API](https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics-api.html) in the Amazon QuickSight User Guide to generate the url. For each experience, you need to make sure that the users are granted the necessary permissions to view the embedded experience. #### 🔹 container: *string | HTMLElement* *(required)* This is the parent HTMLElement where we're going to embed QuickSight. It can be an HTMLElement: ```javascript container: document.getElementById("experience-container") ``` Or, it can be a query selector string: ```javascript container: "#experience-container" ``` #### 🔹 width: *string* *(optional, default='100%')*, You can set `width` for the iframe that holds your embedded QuickSight experience. You can set it to be a fixed value: ```javascript width: "1000px" ``` Or, a relative value: ```javascript width: "60%" ``` To make your embedded QuickSight experience responsive, don't set it (leave them at the default: `100%`). Then you can make the container HTMLElement responsive to screen size change. #### 🔹 height: *string* *(optional, default='100%')* You can set `height` for the iframe that holds your embedded QuickSight experience. You can set it to be a fixed value: ```javascript height: "700px" ``` Or, a relative value: ```javascript height: "80%" ``` To make your embedded QuickSight experience responsive, don't set it (leave them at the default: `100%`). Then you can make the container HTMLElement responsive to screen size change. #### 🔹 className: *string* *(optional)* You can customize style of the iframe that holds your embedded experience by one of the followings: - Option 1: Use the "quicksight-embedding-iframe" class we predefined for you: ``` .quicksight-embedding-iframe { margin: 5px; } ``` - Option 2: Or, create your own class and pass in through `className` property: ``` .your-own-class { margin: 5px; } ``` ```javascript const option = { className: "your-own-class" } ``` We've overridden the border and padding of the iframe to be 0px, because setting border and padding on the iframe might cause unexpected issues. If you have to set border and padding on the embedded QuickSight session, set it on the container div that contains the iframe. #### 🔹 withIframePlaceholder: *boolean* *(optional, default=false)* It renders a simple spinner in the embedded experience container while the contents of the embedding experience iframe is being loaded. #### 🔹 onChange: *EventListener* *(optional)* This callback is invoked when there is a change in the SDK code status. ``` export type EventListener = (event: EmbeddingEvents, metadata?: ExperienceFrameMetadata) => void; export interface ChangeEvent { eventName: EventName, eventLevel: ChangeEventLevel, message?: EventMessageValue, data?: EventData } export type ExperienceFrameMetadata = { frame: EmbeddingIFrameElement | null; }; ``` Supported `eventLevel`s: ERROR INFO WARN `ErrorChangeEventName`s NO_FRAME_OPTIONS = 'NO_FRAME_OPTIONS', INVALID_FRAME_OPTIONS = 'INVALID_FRAME_OPTIONS', FRAME_NOT_CREATED: invoked when the creation of the iframe element failed NO_BODY: invoked when there is no `body` element in the hosting html NO_CONTAINER: invoked when the experience container is not found INVALID_CONTAINER: invoked when the container provided is not a valid DOM node NO_URL: invoked when no url is provided in the frameOptions INVALID_URL: invoked when the url provided is not a valid url for the experience NO_FRAME_OPTIONS: invoked when frameOptions property is not populated, INVALID_FRAME_OPTIONS: invoked when the frameOptions value is not object type, `InfoChangeEventName`s FRAME_STARTED: invoked just before the iframe is created FRAME_MOUNTED: invoked after the iframe is appended into the experience container FRAME_LOADED: invoked after iframe element emited the `load` event FRAME_REMOVED: invoked after iframe element is removed from the DOM `WarnChangeEventName`s UNRECOGNIZED_CONTENT_OPTIONS: invoked when the content options for the experience contain unrecognized properties UNRECOGNIZED_FRAME_OPTIONS: invoked when the frame options for the experience contain unrecognized properties UNRECOGNIZED_EVENT_TARGET: invoked when a message with unrecognized event target is received ```javascript const frameOptions = { //... onChange: (changeEvent: EmbeddingEvents, metadata: ExperienceFrameMetadata) => { if (changeEvent.eventLevel === 'ERROR') { console.log(`Do something when embedding experience failed with "${changeEvent.eventName}"`); return; } switch (changeEvent.eventName) { case 'FRAME_MOUNTED': { console.log("Do something when the experience frame is mounted."); break; } case 'FRAME_LOADED': { console.log("Do something when the experience frame is loaded."); break; } case 'FRAME_REMOVED': { console.log("Do something when the experience frame is removed."); break; } //... } }, }; ``` ### Common Properties of `contentOptions` for All Embedding Experiences #### 🔹 locale: *string* *(optional)* (not available in QSearchBar embedding) You can set locale for the embedded QuickSight session: ```javascript const option = { locale: "en-US" }; ``` Available locale options are: ``` en-US (English), da-DK (Dansk) de-DE (Deutsch), ja-JP (日本語), es-ES (Español), fr-FR (Français), it-IT (Italiano), nl-NL (Nederlands), nb-NO (Norsk), pt-BR (Português), fi-FI (Suomi), sv-SE (Svenska), ja-JP (日本語), ko-KR (한국어), zh-CN (中文 (简体)), zh-TW (中文 (繁體)) ``` For a more updated list of locales, please refer to https://docs.aws.amazon.com/quicksight/latest/user/choosing-a-language-in-quicksight.html. Any unsupported locale value will fallback to using `en-US`. #### 🔹 onMessage: *EventListener* *(optional)* You can add `onMessage` callback into the `contentOptions` of all embedding experiences. ```typescript export type EventListener = (event: EmbeddingEvents, metadata?: ExperienceFrameMetadata) => void; export interface SimpleMessageEvent { eventName: EventName; message?: EventMessageValue; data?: EventData; eventTarget?: InternalExperiences; } export type ExperienceFrameMetadata = { frame: EmbeddingIFrameElement | null; }; ``` See the experience specific documentation below for the supported `eventName`s for each experience type. ```typescript const contentOptions = { //... onMessage: async (messageEvent: EmbeddingEvents, metadata?: ExperienceFrameMetadata) => { switch (messageEvent.eventName) { case 'CONTENT_LOADED': { console.log("Do something when the embedded experience is fully loaded."); break; } case 'ERROR_OCCURRED': { console.log("Do something when the embedded experience fails loading."); break; } //... } } }; ``` *** ## Dashboard Embedding Dashboard Embedding provides an interactive read-only experience. The level of interactivity is set when the dashboard is published. For more information, see [Working with embedded analytics](https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics.html) in the Amazon QuickSight User Guide. ### Getting Started Use `embedDashboard` method to embed a QuickSight dashboard. It returns a promise of `DashboardFrame` type. ```typescript export class DashboardExperience extends BaseExperience { initiatePrint: () => Promise; undo: () => Promise; redo: () => Promise; toggleBookmarksPane: () => Promise; getParameters: () => Promise; getSheets: () => Promise; getVisualActions: (sheetId: string, visualId: string) => Promise; addVisualActions: (sheetId: string, visualId: string, actions: VisualAction[]) => Promise; setVisualActions: (sheetId: string, visualId: string, actions: VisualAction[]) => Promise; getFilterGroupsForSheet: (sheetId: string) => Promise; getFilterGroupsForVisual: (sheetId: string, visualId: string) => Promise; addFilterGroups: (filterGroups: FilterGroup[]) => Promise; updateFilterGroups: (filterGroups: FilterGroup[]) => Promise; removeFilterGroups: (filterGroupsOrIds: FilterGroup[] | string[]) => Promise; setTheme:(themeArn: string) => Promise; setThemeOverride: (themeOverride: ThemeConfiguration) => Promise; getSelectedSheetId: () => Promise; setSelectedSheetId: (sheetId: string) => Promise; navigateToDashboard: (dashboardId: string, navigateToDashboardOptions?: NavigateToDashboardOptions) => Promise; removeVisualActions: (sheetId: string, visualId: string, actions: VisualAction[]) => Promise; getSheetVisuals: (sheetId: string) => Promise; setParameters: (parameters: Parameter[]) => Promise; reset: () => Promise; send: (messageEvent: EmbeddingMessageEvent) => Promise>; } ``` ### Example ```html Dashboard Embedding Example Country

``` ### `frameOptions` See [Common Properties of `frameOptions` for All Embedding Experiences](#common-properties-of-frameoptions-for-all-embedding-experiences) for `url`, `container`, `width`, `height`, `className`, `withIframePlaceholder`, `onChange` properties #### resizeHeightOnSizeChangedEvent: *boolean* *(optional, default: false)* Use `resizeHeightOnSizeChangedEvent` to allow changing the iframe height when the height of the embedded content changed. ```json { "height": "300px", "resizeHeightOnSizeChangedEvent": true } ``` When the `resizeHeightOnSizeChangedEvent` property is set to true, the value of the `height` property acts as a loading height. Note: With the `resizeHeightOnSizeChangedEvent` set to true, modals generated by the dashboard can be hidden if the content is larger than the screen. An example of this type of modal is the one that displays when you select "Export to CSV" on a Table visual. To solve this issue, you can add the following code to autoscroll the focus to the modal. ```javascript const contentOptions = { //... onMessage: (messageEvent, metadata) => { switch (messageEvent.eventName) { case 'MODAL_OPENED': { window.scrollTo({ top: 0 // iframe top position }); break; } //... } }, } ``` ### `contentOptions` See [Common Properties of `contentOptions` for All Embedding Experiences](#common-properties-of-contentoptions-for-all-embedding-experiences) for `locale` property #### 🔹 parameters: *Parameter[]* *(optional)* It allows you to set initial parameter values for your embedded QuickSight dashboard. Pass an array as value for multi-value parameters. For more information about parameters in Amazon QuickSight, see https://docs.aws.amazon.com/quicksight/latest/user/parameters-in-quicksight.html #### 🔹 toolbarOptions If sub-properties of the toolbarOptions are set to false, then the navrbar is hidden. #### 🔹 export: *boolean* *(optional, default=false)* This can be used to show or hide export icon for dashboard embedding. #### 🔹 undoRedo: *boolean* *(optional, default=false)* This can be used to show or hide the undo and redo buttons for dashboard embedding. #### 🔹 reset: *boolean* *(optional, default=false)* This can be used to show or hide the reset button for dashboard embedding. #### 🔹 bookmarks: *boolean* *(optional, default=false)* This can be used to show or hide the bookmarks button for dashboard embedding. The bookmarks feature is only available for the embedded dashboards of which embed URL is obtained using `generateEmbedUrlForRegisteredUser` which enables `Bookmarks` feature in the `FeatureConfigurations` property. ``` ... "ExperienceConfiguration": { "Dashboard": { "InitialDashboardId": "", "FeatureConfigurations": { "Bookmarks": { "Enabled": true } } } } ... ``` #### 🔹 sheetOptions #### 🔹 initialSheetId: *string* *(optional)* You can use this when you want to specify the initial sheet of the dashboard, instead of loading the first sheet of the embedded dashboard. You can provide the target sheet id of the dashboard as the value. In case the sheet id value is invalid, the first sheet of the dashboard will be loaded. #### 🔹 singleSheet: *boolean* *(optional, default=false)* The `singleSheet` property can be used to enable or disable sheet tab controls in dashboard embedding. #### 🔹 emitSizeChangedEventOnSheetChange: *boolean* (optional default=false) You can use this in combination with `resizeHeightOnSizeChangedEvent: true` frame option, when you want the embedded dashboard height to auto resize based on sheet height, on every sheet change event. #### 🔹 attributionOptions #### 🔹 overlayContent: *boolean* *(optional, default=false)* We add 22 pixels of additional height at the bottom of the layout to provide dedicated space to the "Powered by QuickSight" footer. You can set this property to `true` to overlay it with your content. #### 🔹 onMessage: *EventListener* *(optional)* The `eventName`s the dashboard experience receive CONTENT_LOADED: Received when the visuals of the Amazon QuickSight dashboard are fully loaded ERROR_OCCURRED: Received when an error occurred while rendering the visuals of the Amazon QuickSight dashboard. The message contains `errorCode`. The error codes are: - `Forbidden` -- the URL's authentication code expired - `Unauthorized` -- the session obtained from the authentication code expired If you follow the instructions to generate the correct URL, but you still receive these error codes, you need to generate a new URL. PARAMETERS_CHANGED: Received when the parameters in Amazon QuickSight dashboard changes. SELECTED_SHEET_CHANGED: Received when the selected sheet in Amazon QuickSight dashboard changes. SIZE_CHANGED: Received when the size of the Amazon QuickSight dashboard changes. MODAL_OPENED: Received when a modal opened in Amazon QuickSight dashboard. ### Actions #### 🔹 setParameters: *(parameters: Parameter[]) => Promise<ResponseMessage>;* Use this function to update parameter values. Pass an array as value for multi-value parameters. You can build your own UI to trigger this, so that viewers of the embedded QuickSight session can control it from your app page. Parameters in an embedded experience session can be set by using the following call: ```javascript embeddedExperience.setParameters([ { Name: 'country', Values: ['United States'], }, { Name: 'states', Values: ['California', 'Washington'], } ]); ``` To reset a parameter so that it includes all values, you can pass the string `ALL_VALUES`. ```javascript embeddedExperience.setParameters([ { Name: 'states', Values: ['ALL_VALUES'], } ]); ``` #### 🔹 navigateToDashboard *(dashboardId: string, options?: NavigateToDashboardOptions) => Promise<ResponseMessage>* To navigate to a different dashboard, use dashboard.navigateToDashboard(options). The input parameter options should contain the dashboardId that you want to navigate to, and also the parameters for that dashboard, for example: ```javascript const dashboardId: "37a99f75-8230-4409-ac52-e45c652cc21e"; const options = { parameters: [ { Name: 'country', Values: ['United States'], } ] }; embeddedDashboardExperience.navigateToDashboard(dashboardId, options); ``` #### 🔹 setSelectedSheetId *(sheetId: string) => Promise<ResponseMessage>* If you want to navigate from one sheet to another programmatically, with the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.setSelectedSheetId(''); ``` #### 🔹 getSheets *() => Promise* If you want to get the current set of sheets, from Amazon QuickSight dashboard in ad-hoc manner, use the below method: ```typescript const sheets: Sheet[] = await embeddedDashboardExperience.getSheets(); ``` #### 🔹 getSelectedSheetId *() => Promise<string>* If you want to get the current sheet id, from Amazon QuickSight dashboard in ad-hoc manner, use the below method: ```typescript const selectedSheetId: string = await embeddedDashboardExperience.getSelectedSheetId(); ``` #### 🔹 getSheetVisuals *(sheetId: string) => Promise<Visual[]>* If you want to get the list of the visuals of a sheet from the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.getSheetVisuals(''); ``` #### 🔹 getVisualActions *(sheetId: string, visualId: string) => Promise<VisualAction[]>* If you want to get the list of actions of a visual from the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.getVisualActions('', ''); ``` #### 🔹 addVisualActions *(sheetId: string, visualId: string, actions: VisualAction[]) => Promise<ResponseMessage>* If you want to add actions to a visual of the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.addVisualActions('', '', [ { Name: '', CustomActionId: ``, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]); ``` This method appends the new actions provided in the request to the existing actions of the visual #### 🔹 removeVisualActions *(sheetId: string, visualId: string, actions: VisualAction[]) => Promise<ResponseMessage>* If you want to remove actions from a visual of the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.removeVisualActions('', '', [ { Name: '', CustomActionId: ``, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]); ``` #### 🔹 setVisualActions *(sheetId: string, visualId: string, actions: VisualAction[]) => Promise<ResponseMessage>* If you want to set actions of a visual of the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.setVisualActions('', '', [ { Name: '', CustomActionId: ``, Status: 'ENABLED', Trigger: 'DATA_POINT_CLICK', // or 'DATA_POINT_MENU' ActionOperations: [{ CallbackOperation: { EmbeddingMessage: {} } }] } ]); ``` This method replaces all existing actions of the visual with the new actions provided in the request #### 🔹 getFilterGroupsForSheet *(sheetId: string) => Promise<FilterGroup[]>* If you want to get the list of filter groups for a sheet from the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.getFilterGroupsForSheet(''); ``` #### 🔹 getFilterGroupsForVisual *(sheetId: string, visualId: string) => Promise<FilterGroup[]>* If you want to get the list of filter groups for a visual from the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.getFilterGroupsForVisual('', ''); ``` #### 🔹 addFilterGroups *(filterGroups: FilterGroup[]) => Promise<ResponseMessage>* If you want to add filter groups to the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.addFilterGroups([ { FilterGroupId: '', Filters: [ { CategoryFilter: { Column: { ColumnName: '', DataSetIdentifier: '' }, FilterId: '', Configuration: { FilterListConfiguration: { MatchOperator: 'CONTAINS', NullOption: 'NON_NULLS_ONLY', CategoryValues: [ '' ] } } } } ], ScopeConfiguration: { SelectedSheets: { SheetVisualScopingConfigurations: [ { Scope: 'SELECTED_VISUALS', VisualIds: [ '' ], SheetId: '' // Only the selected sheet id is supported } ] } }, CrossDataset: 'SINGLE_DATASET', Status: 'ENABLED' } ]); ``` Filter groups can only be added to the currently selected sheet. #### 🔹 updateFilterGroups *(filterGroups: FilterGroup[]) => Promise<ResponseMessage>* If you want to update filter groups of the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.updateFilterGroups([ { FilterGroupId: '', Filters: [ { NumericEqualityFilter: { Column: { ColumnName: '', DataSetIdentifier: '' }, FilterId: '', MatchOperator: 'EQUALS', NullOption: 'ALL_VALUES', Value: } } ], ScopeConfiguration: { SelectedSheets: { SheetVisualScopingConfigurations: [ { Scope: 'ALL_VISUALS', SheetId: '' // Only the selected sheet id is supported } ] } }, CrossDataset: 'SINGLE_DATASET', Status: 'ENABLED' } ]); ``` Only the filter groups of the currently selected sheet can be updated. #### 🔹 removeFilterGroups *(filterGroups: FilterGroup[]) => Promise<ResponseMessage>* If you want to remove filter groups of the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.removeFilterGroups([ '', // ... ]); ``` Only the filter groups of the currently selected sheet can be removed. #### 🔹 setTheme *(themeArn: string) => Promise<ResponseMessage>* If you want to set theme for the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.setTheme(''); ``` Make sure that the user has access to the theme that you want to use. You can make a call to the [ListThemes](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_ListThemes.html) API operation to obtain a list of the themes and theme ARNs that the user has access to. #### 🔹 setThemeOverride *(themeOverride: ThemeConfiguration) => Promise<ResponseMessage>* If you want to override the current theme configuration for the Amazon quicksight dashboard, use the below method: ```javascript embeddedDashboardExperience.setThemeOverride({ UIColorPalette: { PrimaryForeground: '#FFCCCC', PrimaryBackground: '#555555', //... }, // ... }); ``` #### 🔹 initiatePrint *() => Promise<ResponseMessage>* This feature allows you to initiate dashboard print, from parent website, without a navbar print icon, in the dashboard. To initiate a dashboard print from parent website, use dashboard.initiatePrint(), for example: ```javascript embeddedDashboardExperience.initiatePrint(); ``` #### 🔹 getParameters *() => Promise* If you want to get the active parameter values, from Amazon QuickSight dashboard in ad-hoc manner, use the below method: ```typescript const parameters: Parameter[] = await embeddedDashboardExperience.getParameters(); ``` #### 🔹 undo *() => Promise<ResponseMessage>* If you want to unto the changes, use the below method: ```javascript embeddedDashboardExperience.undo(); ``` #### 🔹 redo *() => Promise<ResponseMessage>* If you want to redo the changes, use the below method: ```javascript embeddedDashboardExperience.redo(); ``` #### 🔹 reset *() => Promise<ResponseMessage>* If you want to reset the changes, use the below method: ```javascript embeddedDashboardExperience.reset(); ``` #### 🔹 toggleBookmarksPane *() => Promise<ResponseMessage>* If you want to toggle the visibility state of the bookmarks pane, use the below method: ```javascript embeddedDashboardExperience.toggleBookmarksPane(); ``` *** ## Visual Embedding Visual Embedding provides an interactive read-only experience. For more information, see [Embedding Amazon QuickSight Visuals](https://docs.aws.amazon.com/console/quicksight/visual-embedding) in the Amazon QuickSight User Guide. ### Getting Started Use `embedVisual` method to embed a QuickSight dashboard. It returns a promise of `VisualFrame` type. ```typescript export class VisualExperience extends BaseExperience { setParameters: (parameters: Parameter[]) => Promise>; reset: () => Promise; getActions: () => Promise; addActions: (actions: VisualAction[]) => Promise; setActions: (actions: VisualAction[]) => Promise; removeActions: (actions: VisualAction[]) => Promise; getFilterGroups: () => Promise; addFilterGroups: (filterGroups: FilterGroup[]) => Promise; updateFilterGroups: (filterGroups: FilterGroup[]) => Promise; removeFilterGroups: (filterGroupsOrIds: FilterGroup[] | string[]) => Promise; setTheme: (themeArn: string) => Promise; setThemeOverride: (themeOverride: ThemeConfiguration) => Promise send: (messageEvent: EmbeddingMessageEvent) => Promise>; } ``` ### Example ```html Visual Embedding Example Country