Embed dashboard in other platforms

The samples have been created in other platforms to embed the Bold BI Dashboard. Here, you can set the server and dashboard details as the embed details, then the dashboard will be rendered after passing the authorization. The platforms are:

• ColdFusion
• Java Servlet
• Django
• Ionic

NOTE: The best way to get started would be reading the Getting Started section of the documentation. The Getting Started guide gives you enough information that you need to know before working on the sample.

ColdFusion sample to embed dashboard

1. Please download the BoldBI ColdFusion Embed sample from the attached file.

2. You need to set the following properties in the BoldBIEmbed.html and embedDetails.cfc file as follows.

   

   

   ServerUrl	Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://dashboard.syncfusion.com/bi/site/site1)
   DashboardID	Provide the dashboard id of the dashboard you want to embed here.Please refer below how to get the dashboard id.
   UserEmail	UserEmail of the Admin in your Bold BI, which will be used to get the dashboards list
   EmbedSecret	You can get your EmbedSecret key from embed tab by enablingEnable embedauthentication in Administration page as mentioned in next step.

3. You can get your Embed Secret key from the administrator setting section. Please refer to this link for more details.

4. Run your ColdFusion application.

How this sample works

1. Based on the dashboardId provided in the BoldBIEmbed.html,authorize the server URL by calling the GetEmbedDetails function as follows.

2. In the above authorization, generate the SignatureUrl with the provided EmbedSecret key and validate the embed details in Bold BI. Once details are validated, the dashboard starts to render.

3. In the BoldBIEmbed.html, change the dashboard Id of the respective dashboard as you wish to embed.

Java Servlet sample to embed dashboard

1. Please download the Java Servlet project from this link.

2. You need to set your embed property details in the index.jsp and BoldBI.java.

3. You can get your Embed Secret key from the administrator setting section. Please refer to this link for more details.

4. Run your Java Servlet project.

How this sample works

1. Based on the dashboardId provided in the index.jsp, authorize the server by calling the doPost function using the AuthorizeURL(http://localhost:8080/BoldBIEmbed/BoldBI.do) with the provided EmbedProperties values.

2. In the above authorization, generate the SignatureURL with the provided EmbedSecret key and embed details, which can be validated in the Bold BI Server API, and returns the token. Based on the returned token, the dashboard will be started to render in the index.jsp.

3. In the index.jsp, change the dashboard Id of the respective dashboard based on your requirement.

Django sample to embed the dashboard

1. Please download the Django sample from the attached file.

2. You need to set the following properties in the models.py file as follows.

<meta charset="utf-8"/>
<table>
<tbody>
    <tr>
        <td align="left">RootUrl</td>
        <td align="left">Dashboard Server BI URL (ex: http://localhost:5000/bi, http://dashboard.syncfusion.com/bi)</td>
    </tr>
    <tr>
        <td align="left">SiteIdentifier</td>
        <td align="left">For Bold BI Enterprise edition, it should be like <code>site/site1</code>. For Bold BI Cloud, it should be empty string.</td>
    </tr>
    <tr>
    <td align="left">DashboardId</td>
        <td align="left">Provide the dashboard id of the dashboard that you want to embed here.</td>
    </tr>
    <tr>
        <td align="left">UserEmail</td>
        <td align="left">UserEmail of the Admin in your Bold BI, which will be used to get the dashboards list.</td>
    </tr>
    <tr>
    <td align="left">EmbedSecret</td>
        <td align="left">You can get your EmbedSecret key from embed tab by enabling<code>Enable embedauthentication</code> in Administration page as mentioned in next step.</td>
    </tr>    
</tbody>
</table>

3. You can get your Embed Secret key from the administrator setting section. Please refer to this linkfor more details.

4. Run your Django application.

How this sample works

1. Based on the provided embed details with the dashboard, authorize the server URL by calling the get embed details function (views.py/get_embed_details) call with the provided EmbedProperties values

Learn more about authorize server here

NOTE: Remove the CSRF Token from the headers, if your application does not have CSRF middleware (django.middleware.csrf.CsrfViewMiddleware).

2. In the above authorization, generate the SignatureUrl using the provided EmbedSecret key and validate embed details in Bold BI. Once details are validated, the dashboard starts to render.

3. In the models.py, change the dashboard Id of the respective dashboard that you want to embed.

Ionic sample to embed dashboard

1. Please download the Ionic project.

2. You need to set the following properties in the home.service.ts and the dashboard id in the home.page.ts files as follow.

<meta charset="utf-8"/>
<table>
<tbody>
    <tr>
    <td align="left">apiHost</td>
    <td align="left">Java Servlet Core application would be run on http://localhost:61377/, which needs to be set as apiHost</td>
    </tr>
    <tr>
        <td align="left">environment</td>
        <td align="left">Your Bold BI application environment. (If Cloud, you should use <code>cloud</code>, if Enterprise, you should use <code>enterprise</code>)</td>
    </tr>
    <tr>
        <td align="left">RootUrl</td>
        <td align="left">Dashboard Server BI URL (ex: http://localhost:5000/bi, http://dashboard.syncfusion.com/bi)</td>
    </tr>
    <tr>
        <td align="left">SiteIdentifier</td>
        <td align="left">For Bold BI Enterprise edition, it should be like <code>site/site1</code>. For Bold BI Cloud, it should be empty string.</td>
    </tr>
    <tr>
    <td align="left">DashboardId</td>
        <td align="left">Provide the dashboard id of the dashboard that you want to embed here.</td>
    </tr>
    <tr>
        <td align="left">UserEmail</td>
        <td align="left">UserEmail of the Admin in your Bold BI, which will be used to get the dashboards list.</td>
    </tr>
    <tr>
    <td align="left">EmbedSecret</td>
        <td align="left">You can get your EmbedSecret key from embed tab by enabling<code>Enable embedauthentication</code> in the Administration page as mentioned in the next step.</td>
    </tr>    
</tbody>
</table>

3. You can get your Embed Secret key from the administrator setting section. Please refer to this link for more details.

4. Run your Ionic application.

How this sample works

1. Based on the dashboardId provided in the home.page.ts, authorize the server URL by calling the GetEmbedDetails function as follows.

2. The SignatureUrl will be generated with the provided EmbedSecret key and validate the embed details in Bold BI. Once details are validated, the dashboard starts to render using the renderDashboard() method available in the home.page.ts.

3. In the home.page.ts, change the dashboard Id of the respective dashboard as you wish to embed.