Embed interactive dashboards in your application with Amazon QuickSight

May 2022: This post was reviewed and updated to include resources for integrating ML models into dashboards.

Amazon QuickSight allows you to quickly and efficiently enhance your application by embedding Amazon QuickSight dashboards within your Application. This means rich interactive data visualizations and analytics capabilities can be added to your application without any custom development. You won’t require specialized expertise on your team to develop, maintain, and evolve the analytics components for your applications, nor manage and scale your analytics servers, manage complex data engineering pipeline and infrastructure as your applications’ popularity grows. This saves you time and money and lets you focus on your core application functionality!

Embedded Amazon QuickSight dashboards allow you to utilize Amazon QuickSight’s serverless architecture and easily scale your insights with your growing user base, while ensuring you only pay for usage with Amazon QuickSight’s unique pay-per-session pricing model. Applications can authenticate the dashboard users with any identity provider of choice (example Active Directory, Cognito, or any SAML based federated SSO provider that your organization uses) and act on behalf of the user to get access to Amazon QuickSight dashboard. This means that every user receives a secure, personalized dashboard while requiring no user-facing QuickSight-specific authentication. Dashboard embedding is available in Amazon QuickSight Enterprise Edition in all supported regions.

To facilitate an easy embedding experience, AWS has also launched the Amazon QuickSight JavaScript SDK, and a rich set of Amazon QuickSight API operations. The Amazon QuickSight JavaScript SDK lets you efficiently integrate Amazon QuickSight dashboards in your application pages, set defaults, connect controls and handle errors. The new user and group API operations allow you to programmatically manage users and groups. This helps you rollout Amazon QuickSight to your users faster, and makes it easier to manage Amazon QuickSight resources using groups. User API operations are available for both Standard and Enterprise Editions, while group API operations are available in Enterprise Edition.

Let’s now take a quick look at how you can embed a dashboard in your application. The following four steps describe how to embed a dashboard.

Step 1: In Amazon QuickSight, create your dashboards and whitelist your domains

In this step, you create the dashboards in Amazon QuickSight and then share it with the readers who you would like to access this in the embedded form. Each unique viewer of the embedded dashboard must be a member of the Amazon QuickSight account and can be either provisioned in the account ahead of time or at the point of access using the user API operations. To provide each viewer with access to the dashboard, share the dashboard with a group. Then add users to the group once they are provisioned in the Amazon QuickSight account.

Before publishing the dashboard, let’s first create an Amazon QuickSight group for Finance users. Amazon QuickSight groups can be created through the ‘create-group’ api. The following AWS CLI command shows how to achieve this.

aws quicksight create-group --aws-account-id 293424211206 --namespace default --group-name financeusers

When you publish a dashboard, there is an option that allows you to enable or disable the advanced filtering and download to CSV options on the dashboard, to provide a simplified dashboard experience if desired.

Share the dashboard with the financeuser group created above. You can find this group by searching in the ‘Select users in this account’ field. Grant ‘Viewer’ permissions to the group.

To avoid unauthorized embedding of dashboards from your account, an administrator in your account must explicitly enable domains where your Amazon QuickSight dashboards are embedded. This is done by using the Manage QuickSight option that is available to all administrators. All domains in use (dev/staging/production) must be whitelisted and must use https.

Step 2: In your AWS account, set up permissions for embedded viewers

To provision users of your application as members of your Amazon QuickSight account, create an AWS Identity and Access Management (IAM) role that your application can assume on behalf of the user. This role should grant the visitor permissions to retrieve the specific embedded dashboard (quicksight:GetDashboardEmbedUrl)

The following is a sample policy with this permission:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": "quicksight:GetDashboardEmbedUrl",
            "Resource": "arn:aws:quicksight:us-west-2:293424211206:dashboard/26a7dcad-7831-4266-9f75-ffd9265aa335",
            "Effect": "Allow"
        }
    ]
 }

Your application’s IAM identity must have permissions to use the role you just created. This means that as a user accesses your application, your application can assume the QuickSightEmbed role on the user’s behalf, and provision the user in the Amazon QuickSight account. The following example shows a statement that can be added to your application's IAM identity to allow it to assume the QuickSightEmbed role.

{
    "Version": "2012-10-17",
    "Statement": {
       "Effect": "Allow",
        "Action": "sts:AssumeRole",
       "Resource": "arn:aws:iam::293424211206:role/QuickSightEmbed"
   }
}

Step 3: On your application server, authenticate the user and get the embedded dashboard URL

When a user lands in your application you can check to see if the user is already registered in Amazon QuickSight or provision the user if they are accessing for the very first time. The following AWS Command Line Interface (AWS CLI) command can be used to check if the user is already provisioned in the system.

aws quicksight describe-user --aws-account-id 293424211206 --namespace default --user-name QuickSightEmbed/tom.smith@example.com

In the above example, 'tom.smith@example.com' is the session name of the user visiting your application, and 'QuickSightEmbed' is the role that application assumes on user's behalf. Combination of the IAM role name and role session name determines how the user is registered in Amazon QuickSight.

If no result is returned, you can perform a just-in-time provisioning of the user using the command below. You can also use this pattern to pre-provision users in Amazon QuickSight ahead of time. With Amazon QuickSight’s Pay-per-Session mode, you can provision thousands of users. You get charged only when they access Amazon QuickSight.

aws quicksight register-user --aws-account-id 293424211206 --namespace default --identity-type IAM --iam-arn "arn:aws:iam::293424211206:role/QuickSightEmbed" --user-role READER --session-name tom.smith@example.com --email tom.smith@example.com

On the first access, you can also add this user to an Amazon QuickSight group with which the dashboard has been shared.

aws quicksight create-group-membership --aws-account-id=293424211206 --namespace=default --group-name=financeusers --member-name='QuickSightEmbed/tom.smith@example.com'

Next you can assume the IAM role created in Step 2 (QuickSightEmbed) on the user’s behalf by passing the session name of the user. Use the same session name (tom.smith@example.com) used while provisioning the in the previous step.

The following shows an AWS CLI command that can achieve this:

aws sts assume-role --role-arn "arn:aws:iam::293424211206:role/QuickSightEmbed" --role-session-name tom.smith@example.com

The assume role API returns back 3 parameters: access key, secret key and session token. You need to
set these three parameters into your CLI:

export AWS_ACCESS_KEY_ID="access_key_from_assume_role"
 export AWS_SECRET_ACCESS_KEY="secret_key_from_assume_role "
 export AWS_SESSION_TOKEN="session_token_from_assume_role"

If you are using a windows PC, you can do the same using the commands below:

set AWS_ACCESS_KEY_ID="access_key_from_assume_role"
 set AWS_SECRET_ACCESS_KEY="secret_key_from_assume_role "
 set AWS_SESSION_TOKEN="session_token_from_assume_role"

Running this command sets the role session ID of the user visiting your website to “QuickSightEmbed/tom.smith@example.com.” This is also the user name in Amazon QuickSight.

You now have a user of your application who is also an Amazon QuickSight user and has access to the dashboard. For the last part of Step 3, call the get-dashboard-embed-url to get a signed URL for the dashboard that can be embedded.

aws quicksight get-dashboard-embed-url --aws-account-id 293424211206 --dashboard-id 26a7dcad-7831-4266-9f75-ffd9265aa335 --identity-type IAM

Step 4: On your application page, use the Amazon QuickSight JavaScript SDK to embed the dashboard

You can download the Amazon QuickSight JavaScript SDK here. Use it to place the signed URL obtained in Step 3 in your application page. The SDK lets you place the dashboard on an HTML page, pass parameters into the dashboard and also handle error states with messages that are customized to your application.

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);
            }

The CLI commands referenced above are part of the AWS SDK. You can achieve the same result with all AWS SDK supported languages. For more information, see Tools for Amazon Web Services.

These four steps walk through the steps involved in embedding Amazon QuickSight dashboards in your application pages. When you integrate Amazon QuickSight dashboards in your application, you will repeat these sequence of steps for every user coming into the system, so that each user has a unique identity that has the right permissions to the dashboard, and can be shown the right data.

The flow of steps when a user requests an application page with an embedded dashboard is captured below.

We've added more capabilities to let you embed dashboards and more in your applications. Check out the new hands-on tutorial and more details in the blog post, Embed multi-tenant analytics in applications with Amazon QuickSight.

Additional Reading

If you found this post useful, be sure to check out Create Amazon QuickSight dashboards that have impact with parameters, on-screen controls, and URL actions, and Advanced analytics with table calculations in Amazon QuickSight.

To go further, you can visit Visualizing Amazon SageMaker machine learning predictions with Amazon QuickSight and learn and you can integrate Amazon SageMaker ML models with QuickSight to analyze the augmented data and use it directly in your business intelligence dashboards.

About the Author

Jose Kunnackal is a principal product manager for Amazon QuickSight.

AWS Big Data Blog