Quick Sight embedding height and scrolling

Q&A
, , ,
1

Hello,

I am embedding QS in a webpage and the height of the dashboard is not working as expected. I have below code in html for embedding:

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    <style>
        iframe {
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
    </style>
    <!-- You can download the latest Quick Sight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
    <!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.0/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">

        console.log('before parse')
        let params = new URLSearchParams(document.location.search);
        let finalUrl = decodeURIComponent(params.get("embedUrl")); //An embed-url is passed as a search parameter
        console.log(finalUrl);

        const embedDashboard = async () => {
            const {
                createEmbeddingContext,
            } = Quick SightEmbedding;

            const embeddingContext = await createEmbeddingContext();

            const containerDiv = document.getElementById("embedding-container");
            
            const frameOptions = {
                // replace the value below with the one generated via embedding API
                url: finalUrl,
                container: containerDiv,
                resizeHeightOnSizeChangedEvent: false
            };

            const contentOptions = {
                toolbarOptions: {
                    export: false,
                    undoRedo: false, // use this option to show or hide the undo and redo buttons
                    reset: false, // use this option to show or hide the  reset button
                },
                sheetOptions: {
                    singleSheet: false, // use this option to enable or disable sheet tab controls
                    emitSizeChangedEventOnSheetChange: false, // use this option in combination with resizeHeightOnSizeChangedEvent property,
                                                              // to allow iframe height to resize dynamically, based on sheet height, on changing sheets.
                },
                attributionOptions: {
                    overlayContent: false,
                }
            };
            const embeddedDashboard = await embeddingContext.embedDashboard(frameOptions, contentOptions);
            counterVal = 1
            function setParams() {

                console.log("Value to set: " + counterVal)
                embeddedDashboard.setParameters([
                                        {
                                            Name: 'RefreshParam',
                                            Values: counterVal,
                                        }
                                    ])
                counterVal = counterVal + 1
            }
            setInterval(setParams, 30000);
        };
    </script>
</head>

<body onload="embedDashboard()">
    <div id="embedding-container"></div>
</body>

</html>

The output is not correct:

image
image2798×1350 92.7 KB

The dashboard renders but there is scroll and whitespace at the bottom.
This issue is slightly urgent so can you please advise @DylanM & team?
Thank youl

2

Hello @harpar1808, I am curious, did this happen to fix itself? I discussed a scroll issue for an embedded dashboard with someone else, and they followed up today that the problem resolved itself. I was curious if this happened for you as well.

Otherwise, I wonder if it either has something to do with the 100vh that you set in the code for the iFrame height or if there is something in the dashboard itself that is causing the issue. When you view the dashboard in the Quick Sight console, are you seeing the white space as well? Also, have you tested out different settings within the code other than the 100vh you currently have for the iFrame?

3

Hello @DylanM ,

Following code worked for me:

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    <style>
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        iframe {
            height: 100vh;
            width: 100%;
        }
    </style>
    
    <!-- You can download the latest Quick Sight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
    <!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
    <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.0/dist/quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">

        console.log('before parse')
        let params = new URLSearchParams(document.location.search);
        let finalUrl = decodeURIComponent(params.get("embedUrl")); //An embed-url is passed as a search parameter
        console.log(finalUrl);

        const embedDashboard = async () => {
            const {
                createEmbeddingContext,
            } = Quick SightEmbedding;

            const embeddingContext = await createEmbeddingContext();

            const containerDiv = document.getElementById("embedding-container");
            
            const frameOptions = {
                // replace the value below with the one generated via embedding API
                url: finalUrl,
                container: containerDiv,
                scrolling: "no",
                height: "AutoFit",
                iframeResizeOnSheetChange: true,
                width: "100%",
            };

            const contentOptions = {
                toolbarOptions: {
                    export: false,
                    undoRedo: false, // use this option to show or hide the undo and redo buttons
                    reset: false, // use this option to show or hide the  reset button
                },
                sheetOptions: {
                    singleSheet: false, // use this option to enable or disable sheet tab controls
                    emitSizeChangedEventOnSheetChange: false, // use this option in combination with resizeHeightOnSizeChangedEvent property,
                                                              // to allow iframe height to resize dynamically, based on sheet height, on changing sheets.
                },
                attributionOptions: {
                    overlayContent: true,
                }
            };
            const embeddedDashboard = await embeddingContext.embedDashboard(frameOptions, contentOptions);
            counterVal = 1
            function setParams() {

                console.log("Value to set: " + counterVal)
                embeddedDashboard.setParameters([
                                        {
                                            Name: 'RefreshParam',
                                            Values: counterVal,
                                        }
                                    ])
                counterVal = counterVal + 1
            }
            setInterval(setParams, 30000);
        };
    </script>
</head>

<body onload="embedDashboard()">
    <div id="embedding-container"></div>
</body>

</html>
1 Like