Dashboard Iframe Embedding with JavaScript

This application aims to demonstrate how to embed the Bold BI dashboard into a JavaScript-based web application using an iFrame by integrating the Dashboards Listing, Designing and Viewing modules.

Dashboard view

Prerequisites

• Node.js
• Visual Studio Code

NOTE: Node.js v14.16 to v18.18 are supported.

Supported browsers

• Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari.

Configuration

• Please ensure that you have enabled embed authentication on the embed settings page. If it is not currently enabled, please refer to the following image or detailed instructions to enable it.

  

• To download the embedConfig.json file, please follow this link for reference. Additionally, you can refer to the following image for visual guidance.

  

• Copy the downloaded embedConfig.json file and paste it into the designated location within the application. Please ensure that you have placed it in the application as shown in the following image.

  

Run a Sample Using the Command Line Interface

1. Open the command line interface and navigate to the specified file location where the project is located.

2. Run this command in the terminal to install the http-server package, which enables the sample to run a local HTTP server.

      npm install -g http-server

3. Run this command in the terminal to initiate the HTTP server on a specific port(eg. http-server -p 5555)

      http-server -p <port number>

   NOTE: Replace <port number> with the desired port number

• Once the server is running, you can open your web browser and navigate to the DashboardListing.html file(eg. http://localhost:5555/DashboardListing.html).

Developer IDE

• Visual studio code(https://code.visualstudio.com/download)

Run a Sample using Visual Studio Code

• Open the sample in Visual studio code.

• Run this command in the terminal to install the http-server package, which enables the sample to run a local HTTP server.

     npm install -g http-server

• Run this command in the terminal to initiate the HTTP server on a specific port(eg. http-server -p 5555)

     http-server -p <port number>

  NOTE: Replace <port number> with the desired port number

• Once the server is running, you can open your web browser and navigate to the DashboardListing.html file(eg. http://localhost:5555/DashboardListing.html).

  

Please refer to the help documentation to know how to run the sample.

Important notes

In a real-world application, it is recommended not to store passwords and sensitive information in configuration files for security reasons. Instead, you should consider using a secure application, such as Key Vault, to safeguard your credentials.

Online demos

Look at the Bold BI Embedding sample to live demo here.

Documentation

A complete Bold BI Embedding documentation can be found on Bold BI Embedding Help.