Search results

Data Source view

This section explains how to embed the Bold BI data source into the sample application by integrating the item listing and designing modules.

DatasourceListingSample

Prerequisites

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

How to run the sample

  • Please get the Iframe DataSource embedding Javascript sample from GitHub.

  • 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.

    Embed Settings

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

    Embed Settings Download EmbedConfig Properties

  • 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.

    EmbedConfig image

    ServerUrl Datasource Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)
    SiteIdentifier For Bold BI Enterprise edition, it should be like site/site1. For Bold BI Cloud, it should be empty string.
    Environment 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`).
    DashboardId Item id of the dashboard to be embedded in your application, For the datasource, DashboardId is not needed
    EmbedSecret Get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the Administration page
    UserEmail UserEmail of the Admin in your Bold BI, which would be used to get the Datasource List
    ExpirationTime 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>

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

  • Once the server runs, open your web browser and navigate to the DatasourceListing.html file(eg. http://localhost:8000/DatasourceListing.html).

    DatasourceListingSample

How the Sample works

  • Utilizing 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

    Datasource_iframe_js_embedconfigScript

  • The 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 accessToken variable.

    Datasource_iframe_js_gettoken

  • 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.

    Datasource_iframe_js_DatasourceListing

  • If 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.

    Creating a new Data Source

    • 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.

      Datasource_create_button

      Datasource_iframe_js_create

    Editing an existing Data Source

    • The 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.

      Datasource_iframe_js_edit