Options provided to QuickSightEmbedding.embedDashboard do not work once param is used in url

I’m using generate_embed_url_for_anonymous_user() to generate the dashboard embed urls and the following code from client side to render the dashboards. Everything works fine until I moved “parameters” from options object from client side to the embedded url - #p.accounts=1&p.accounts=2. After this change, I have to append “&undoRedoDisabled=true&resetDisabled=true” to the url and tried to add other options but didn’t seem to work. The dashboards are still working functionally, but the layout between them changed dramatically.

Any ideas? what’s the difference between having the all the options for dashboard in url vs options object from client side?

Thanks,

  const embedDashboard = (url: string, container: string) => {
    const containerDiv = document.getElementById(container);
    containerDiv!.innerHTML = "";
    const options = {
      url,
      container: containerDiv,
      **parameters:{accounts:['1', '2']}**
      scrolling: "no",
      height: "AutoFit",
      iframeResizeOnSheetChange: true,
      width: "100%",
      footerPaddingEnabled: true,
      loadingHeight: "700px",
      resetDisabled: true,
      undoRedoDisabled: true,
    };
    QuickSightEmbedding.embedDashboard(options);
  };

Hello @Leon, thanks for posting into the QS Community.

The JS QS API is an JS SDK developed and maintained by the QuickSight team to ensure the best experience and simplicity when embedding QuickSight (visuals, dashboards, analyses or the full console experience) in your web application.

It comes along with the following benefits:

  • Customize the embedding experience (buttons, language locale, and more)
  • Dashboard undo, redo, and reset actions can be invoked from the application
  • Frame creation, mounting, and failure are communicated as change events that can be used by the application, including the following events ( CONTENT_LOADED, ERROR_OCCURRED, PARAMETERS_CHANGED, SELECTED_SHEET_CHANGED, SIZE_CHANGED, MODAL_OPENED)
  • A loading animation can be added to the dashboard container while the contents of the dashboard are loaded

Also it provides a transparent way to generate the definitive embed url (that as you mention, it will contain some of the options and parameters as query strings in the URL. While you can manually compose this URL it is also true that the query parameters in QS embedding is always subject to change and hence the recommended way is to use the JS SDK and the parameters object to set these whenever is possible to always ensure a consistent experience.

Is there any specific reason why you need to pass the parameters directly in the embedding URL?

Hope it helps, please mark this solution as solved if that’s the case also to help other members of the community., otherwise let us know.

Happy dashboarding!

2 Likes