Embedding AWS QuickSight dashboards in your web application
Amazon QuickSight is a scalable, serverless, embeddable, machine learning-powered business intelligence (BI) service built for the cloud. QuickSight lets you easily create and publish interactive BI dashboards that include Machine Learning-powered insights. QuickSight dashboards can be accessed from any device, and seamlessly embedded into your applications, portals, and websites.
In this article, I will demonstrate, how to embed a QuickSight dashboard in your web application using amazon-quicksight-embedding-sdk.
Prerequisites
- AWS Account ID on which QuickSight is configured
1. Sign in to the AWS Management Console.
2. Click on your user name located on the top right navigation bar.
3. Your Account ID is the 12 digit number that is displayed right next to the "My Account" option.- Dashboard ID of the QuickSight Dashboard that you want to embed.
1. Navigate to the QuickSight Service from the AWS Management Console.
2. Click on the "Dashboards" tab in the left-side navigation bar.
3. Click on the dashboard that you want to embed.
4. You can find your dashboard id in the URL.
Sample URL - https://us-west-2.quicksight.aws.amazon.com/sn/dashboards/12345678-12a4-12b4-1234-123cd6789123Dashboard Id - 12345678-12a4-12b4-1234-123cd6789123
- User ARN to authenticate access to QuickSight
1. Create an IAM user and reigster this user with QuickSight
2. To retrieve the User ARN,aws quicksight describe-user --user-name <enter user name> --aws-account-id <enter account id> --namespace default --region <enter region>
Workflow for embedding a dashboard
These are the steps that need to be followed for embedding a QuickSight dashboard in your web application:
- Whitelist the domain name of your website from QuickSight
- Share the dashboard with the User that was created as part of the prerequisites.
- Generate embedding URL
- Embed the URL in your application using amazon-quicksight-embedding-sdk
Seems like a lot to do? Let us take a look at each of these steps in detail.
1) Whitelisting the domain name of your website
This step is required because embedded dashboards only work if they originate from domains you explicitly allow. Follow these steps to whitelist your website’s domain name:
- Go to the QuickSight service from the AWS Management Console.
- Click on your user name on the top right and then click “Manage QuickSight”.
- Navigate to “Domains and Embedding” using the left-side navigation bar.
4. Add the domain name of your website on this page and you can select “Include all subdomains” if you want to allow embedding in all of them.
2) Sharing the dashboard
This step is required so that the user has access and the required permissions to view your dashboard.
- Navigate to your dashboard from the QuickSight Management page and click on the Share button on the top-right navigation bar.
- Click on “Share analysis”
3. Enter the details of the user you created as part of the prerequisites and click on the Share button.
3) Generating Embedding URL
The next step is to generate the URL which will be embedded into your application. We will be using the GetDashboardEmbedUrl function which will generate a session URL and an authorization code that you can use to embed a QuickSight read-only dashboard in your web server code.
The following rules apply to the combination of URL and authorization code:
1. They must be used together.
2. They can be used one time only.
3. They are valid for 5 minutes after you generate the URL.
4. The resulting user session is valid for 10 hours.Here is a sample code to generate the embedding URL using the boto3 library (Python)
4) Embedding the URL in your application
The final step is to embed the generated URL into your application. Follow these steps (I’m using Angular as my front-end framework. The same steps can be tweaked for other frameworks as well):
- Install the Amazon QuickSight Embedding SDK
npm i amazon-quicksight-embedding-sdk2. Add this to your template (HTML) code. This div will contain the embedded QuickSight Dashboard
3. In your ts / js file (TypeScript / JavaScript), add the following code
The Result
As you can see, we have now successfully embedded an AWS QuickSight dashboard into our web application
Common Errors Faced
These are some of the errors you might face while integrating QuickSight.
- Refused to connect
If you see this error in your browser, the most common reason for it is that the domain you’re on is not whitelisted in the QuickSight Management page. (Check Step 1 of this article)
2. Unable to view the dashboard
We get this error when the dashboard has not been shared properly with the user who is trying to access it. (Check Step 2 of this article)
