Comunication with embeded dashbord

Question & Answer
,
1

How can I react to opening “Export to CSV” modal from outside of QuickSight iFrame ?

2

hi @zgredo - can you clarify what you mean by react? What are you trying to achieve for your user experience? thanks!

3

In javascript framework React, I have embeded dashbord that have over 2000px height, all of it is visible (no dashbord scroll) there is a browser scroll. If someone is at the buttom and clicks “Export to CSV” at the top of iframe content there is a modal, now I want to scroll the browser scroll to the top in order to show it. How I can tell that “Export to CSV” has been clicked?

4

I see, I think this might fix your issue -
from: GitHub - awslabs/amazon-quicksight-embedding-sdk: A SDK to help users embed QuickSight dashboards on other pages.

To make your embedded QuickSight session responsive, don’t set width or height (leave them at the default: 100%). Then you can make the container HTMLElement responsive to screen size change.

You can also choose to set height to be AutoFit to make the iFrame fit your dashboard height. Use loadingHeight to specify the height you’d like to use before actual dashboard height is known. This is currently only supported for dashboard embedding:

height: "AutoFit",
loadingHeight: "700px"

Note: With AutoFit height enabled, 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.

dashboard.on("SHOW_MODAL_EVENT", () => {
    window.scrollTo({
        top: 0 // iFrame top position
    });
});

Let me know if that solves it

5

Thanks this works but, can I tell somehow when this “Export to CSV” modal has been closed?