When creating reports for analytics, there is a wide range of options available, from creating them from scratch to selecting an existing one. Based on a few key reasons that we’ll explain later, we chose Amazon QuickSight as the best option. So, embedding Amazon Quicksight into Auditate’s web application became the next step. This implementation came with some challenges that we would like to share with all of you and help you make that journey easier.

Background

Amazon Quicksight is a quick and easy-to-use analytics tool for building visualizations of data, performing various analyses, and providing actionable insight from data.

One of the benefits of AWS QuickSight is the ability to connect directly to your data source and build visualizations immediately after connecting the data.

The following illustration below shows the basic workflow.

(image taken from Amazon’s official website)

Amazon QuickSight is a fully managed cloud-based service that can combine data from a variety of sources and make that data accessible in a single dashboard. On top of this, Amazon QuickSight also offers the following major benefits:

Easy to set up and use

QuickSight allows users to get going quickly without requiring any complex server setups, data models, or capacity planning.

View customization

In QuickSight, users can customize visuals in a few key ways including: choose fields, Filters and choose the visual type. These features allow you to customize the display of your information according to your business focus.

Fast performance

QuickSight's in-memory calculation engine automatically replicates data for high availability while saving time, money, and resources.

The low total cost of ownership

With a pay-per-session model for dashboard readers (consumers), users avoid upfront licensing costs.

Ability to create embedded dashboards and APIs

Using single sign-on (SSO) and APIs, users can create interactive visualizations and dashboards then embed them into applications and web portals.

Compatible with multiple data sources

QuickSight offers compatibility with a wide variety of sources. This compatibility allows users to gain insights from SaaS applications, third-party databases, native AWS services, private Amazon virtual private cloud (Amazon VPC) subnets, and more.

Embedding Amazon QuickSight

To embed Amazon QuickSight in a web application, you can follow these 6 steps:

1. Have an IAM user with the necessary permissions.

2. Set up the QuickSight dashboard and prepare permissions or services to consume the dashboard.

As a primary best practice, we always automate the deployment of the AWS resources required for our implementation. Typically, we work with Infrastructure as Code (IaC) to automate this process.

Before starting to review code, it is useful to understand the flow of resources that QuickSight needs to work correctly. For this, Amazon offers a Workshop where you can learn step-by-step how to configure them. 

Amazon directly delivers an example of a Cloudformation file containing the necessary resources to create, configure and implement what is needed to use QuickSight from our application. 

3. Create Lambda to consume Amazon QuickSight Service.

Before continuing, we need to mention the importance of understanding the needs of the project. Based on your needs, you can choose the QuickSight API that best fits your project.

Currently, QuickSight has two APIs: GenerateEmbedUrlForAnonymousUser and GenerateEmbedUrlForRegisteredUser.

For both APIs, it is also necessary to know what kind of user experience we want. The CDK to implement QuickSight provides four ways:

1. Dashboard Embedding provides an interactive read-only experience. The level of interactivity is set when the dashboard is published.
2. Visual Embedding provides an interactive read-only experience.
3. Console embedding or embed Session provides the QuickSight authoring experience. Embedded authoring experience allows the user to create QuickSight assets, just like they can in the AWS console for QuickSight. A custom permission profile controls exactly what the user can do in the console. The profile can remove abilities such as creating or updating data sources and datasets. You can also set the default visual type. Embedded consoles currently don't support screen scaling in formatting options.
4. QSearchBar Embedding provides the QuickSight Q search bar experience.

We highly recommend reading the official documentation to understand the approach your project needs.

4. Configure a secure local environment as HTTPS.

Another important point in the process of developing or implementing QuickSight service in an application is to always have a development environment before making any changes to production. This ensures that our tests do not affect our customer.

Typically, the developer tests locally and their domain runs in HTTP format, however, QuickSight has a policy of not allowing dashboard display on any domain without certificates.

For this reason, consider configuring your development environments that are currently in HTTP to HTTPS. 

5. Configure the list of domains that QuickSight will allow to embed your dashboard.

Amazon allows you to register up to 100 domains, the only request is that the domains (such as development, staging and production) must use HTTPS.

6. Finally, embed the QuickSight dashboard in the application.

The amazon documentation presents a simple example of how to embed the dashboard in your HTML, but if your code is React, the complexity of translating the code is minimal.

The Challenges and Solutions

Embedding Amazon QuickSight presented us with a few challenges that we needed to overcome to be able to display and share reports with the customers in a secure and effective way. Here is the list of challenges followed by the solution we found:

1. Challenge: QuickSight has its own user registration and group management to whom permissions must be granted to be able to view the dashboards. Solution: A recommendation is to manage a pre-registration of users as part of your application to avoid a few seconds of waiting for the first launch and therefore not get an error. Another point is if the pre-registration was not successful you can re-provision the registration at the time of mounting the dashboard.
2. Challenge: QuickSight has a feature to handle filters that provide the most appropriate graphs to each type of user. These filters are determined from the console but the parameters are sent from the frontend. Solution: If you need to view information from a single client, you will have to send your identifier parameter to make the filter.
3. Challenge: The URL only works if it is used with the authentication code that comes with it. Also, QuickSight URLs have an expiration time that you can configure. Solution: Verify that the URL contains the authcode parameter.
4. Challenge: Using an encoded URL breaks the authcode in the URL by changing it. Solution: Make sure the URL you provide in options is not encoded. Avoid using an encoded URL Also, check that the URL sent in the response from the server side is not encoded.
5. Challenge: QuickSight can provide a list of available dashboards for the authorized user or it can provide only the URL of a dashboard. Without configuring the dashboard ID, QuickSight shows a default page to select the dashboard instead of directly displaying the enabled dashboard for the user. Solution: When wanting a URL of a dashboard, it is necessary to configure the dashboard id.

After overcoming these challenges, we were finally able to display nice, versatile and secured reports such as the report below.

Conclusion

Amazon QuickSight was easy and straightforward to implement and we were able to display reports successfully. However, we experienced a few challenges when embedding it in an existing web application. We were able to resolve each of these challenges with excellent results allowing our customers to access and explore deeper insights in an interactive visual environment.

People in any organization make decisions that affect their businesses. To make these decisions effectively, it is important to have the right information at the right time. The QuickSight dashboard offers the information they need to make the decision and predict the results of the decision. Overall, creating it is well worth the effort.