Integrating AWS Quicksight Dashboard In The Application Using Angular

21 September 2020

AWS Quicksight is a service which can be used to build interactive visualization from the data. It can enhance the application by interactive analytics capabilities without any other development. But before embedding AWS Quicksight dashboard, it needs to be published with all the granted necessary permissions.

To integrate AWS quicksight dashboard in the application below are the steps:

Step 1: Download and Include AWS Quicksight SDK

npm install amazon-quicksight-embedding-sdk

To include, AWS Quicksight module needs to be loaded in the file:

import * as QuicksightEmbedding from 'amazon-quicksight-embedding-sdk';

Step 2: Configuring the dashboard to Embed

To configure the dashboard below it the code that can be added to the component file.

var containerDiv = document.getElementById("dashboardContainer");
var options = {
url: embeddedURL,
container: containerDiv,
scrolling: "yes",
height: "700px",
width: "100%"
};

this.dashboard = QuickSightEmbedding.embedDashboard(options);

Here the URL i.e ‘embeddedURL’ is the dashboard URL which can be get from the AWS SDK.

And ‘container’ element is the parent HTML element where the dashboard can be embedded. It can be achieve in the following ways:

Option 1: By using the HTML element

containerDiv = document.getElementById("dashboardContainer");

Option 2: By using the Query Selector

containerDiv: "#dashboardContainer";

Step 3: Embed the dashboard

To embed the dashboard, we can call it by:

var dashboard = QuickSightEmbedding.embedDashboard(options);

This will return a dashboard object which can be used for further development. It will render the AWS Quicksight Embed URL in HTML iframe.

Step 4: Setup Load Callback

To want the application to be notified and respond when the AWS Quicksight dashboard is fully loaded, we can use the load callback.

Add the load callback in the dashboard object configuration as:

loadCallback: yourLoadCallback

Troubleshooting

1. Make sure the url which is provided in the Option object should not be encoded. Also, check that the URL provided from the server side is not encoded.
2. Change the setting to either “Allow from Websites I Visit” or “Always Allow”.

Complete AWS Quicksight Dashboard using code

import { Component } from '@angular/core';
import * as QuickSightEmbedding from 'amazon-quicksight-embedding-sdk';

@Component({
selector: 'app-dashboard',
templateUrl: './Dashboard.html',
})
export class DashboardComponent{

dashboard: any;
ngOnInit() {
this.GetDashboardURL();
}

public GetDashboardURL() {
this.RequestAPI('yourbackendapi.com/api/GetDashboardURL')
.subscribe((data) => {
let url = data["url"];
this.Dashboard(url);
});
}

public Dashboard(embeddedURL: string) {

var containerDiv = document.getElementById("dashboardContainer");
var options = {
url: embeddedURL,
container: containerDiv,
scrolling: "yes",
height: "700px",
width: "100%"
};

this.dashboard = QuickSightEmbedding.embedDashboard(options);
This.dashboard.on('load', this.onDashboardLoad)
}

private onDashboardLoad(payLoad) {
console.log("Do something when the dashboard is fully loaded.");
}

public RequestAPI(apiURL){
return this.http.get<Observable<any>>(apiURL,
{
headers: new HttpHeaders({
'Content-Type': 'application/json; charset=utf-8'
}),
});
}
}