amazon-quicksightquicksight-embedding

Unable to use Quicksight dashboard as embeded url on S3/cloudfront whitelisted domain

I was trying to view Quicksight dashboard as embedded url from our domain which was whitelisted in AWS Quicksight account. Our website is hosted on S3 bucket as a static website. Below sample, a javascript function is given on an AWS Blog.

Below is the sample javascript function.

function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var options = {
                    url: "<signed URL from Step 3>",
                    container: containerDiv,
                    parameters: {
                        country: 'United States'
                    },
                    scrolling: "no",
                    height: "700px",
                    width: "1000px"
                };
                dashboard = QuickSightEmbedding.embedDashboard(options);
                dashboard.on('error', onError);
                dashboard.on('load', onDashboardLoad);
            }

Full example is given on another link of the same blog Amazon QuickSight JavaScript SDK

Unfortunately, the sample is not working.

Solution

  • Below is a complete html sample page (dashboard.html), including the javascript function.

    <!DOCTYPE html>
    <html>
    <head>
        <title>My Dashboard</title>
        <script type="text/javascript" src="quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var params = {
                    url: "<signed URL>",
                    container: containerDiv,
                    parameters: {
                    },
                    height: "700px",
                    width: "1000px"
                };
                var dashboard = QuickSightEmbedding.embedDashboard(params);
                dashboard.on('error', function(err) {console.log('dashboard error:', err)});
                dashboard.on('load', function() {});
            }
        </script>
    </head>
    <body onload="embedDashboard()">
        <div id="dashboardContainer"></div>
    </body>
    </html>

    Sample is taken from same AWS blog and made some changes.

    Overall steps are summarized below.

    Below line was changed. enter image description here Above line was changed with below line. enter image description here Downloaded .js and lib files

    Some .js and lib files were also downloaded from below address and uploaded on the website with the dashboard.html page.

    https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.2/dist/ enter image description here S3/Cloudfront configuration

    Since whitelisted domain on quicksight setting is an https url, so had to configure s3 static website with Cloudfront.

    --created s3 bucket with dashboard.mydomain.com.au

    --created Cloudfront web distribution including SSL from ACM.

    --created A Record / Alias in Route53 with Cloudfront dns entry.

    Generated dashboard-embed-url

    AWS CLI command

    aws quicksight get-dashboard-embed-url --aws-account-id 00000000000 --dashboard-id "xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx" --identity-type "IAM"

    Used this Embedded / signed Url in dashboard.html in "signed URL"

    Upload dashboard.html on s3 bucket.

    Webpage is ready

    Now webpage is available with quicksight dashboard from whitelisted domain.

    https://dashboard.mydomain.com.au/dashboard.html