This section explains how to embed the Bold BI data source into the sample application by integrating the item listing and designing modules.
NOTE: Node.js v14.16 to v18.18 are supported.
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, 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.
|Datasource Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)
|For Bold BI Enterprise edition, it should be like
site/site1. For Bold BI Cloud, it should be empty string.
|Your Bold BI application environment. (If it is cloud analytics server, use `BoldBI.Environment.Cloud`; if it is your own server, use `BoldBI.Environment.Enterprise`).
|Item id of the dashboard to be embedded in your application, For the datasource, DashboardId is not needed
|Get your EmbedSecret key from the Embed tab by enabling the
Enable embed authentication in the Administration page
|UserEmail of the Admin in your Bold BI, which would be used to get the Datasource List
|Token expiration time. (In the EmbedConfig.json file, the default token expiration time is 10000 seconds).
Open the terminal in Visual Studio code and and run this command to install the
http-server package, which enables the sample to run a local HTTP server.
npm install -g http-server
Run this command to initiate the HTTP server on a specific port(eg.
http-server -p 8000)
http-server -p <port number>
<port number>with the desired port number
Once the server runs, open your web browser and navigate to the
XMLHttpRequest built-in browser object, retrieve data from the
embedConfig.json file within the
DatasourceListing.html. If the
embedConfig.json file is not found, the
showError() function will throw an error
getToken() function generates an authorization token using the user’s email and embed secret key from the
apiRequest object. The obtained token is stored in the
showDatasourceListing() function makes a GET request to the
dashboardServerApiUrl/v2.0/items?ItemType=4 endpoint with the
accessToken as the authorization header. The
accessToken is obtained from the
getToken() function. The obtained data is stored in the
datasource variable is not empty, a div element is created for each datasource item and added to the panel element. This will make the datasource list visible.
When the create button is clicked on the data source page, the
openDesignerForCreate() function is activated. This function sets up the environment for creating a data source by removing existing content. Subsequently, it generates an embedded view using an
<iframe> element, which directs to the data source designer page.
openDesignerForEdit() method is invoked when we click any data source in the data source listing container. It retrieves the item ID and data source name from the properties of the clicked item and uses them to open the data source designer page for editing within the “datasource” element.