Documentation
Demos
Support
Blog
Download Free Trial
Search results

Embed the dashboard in an iframe

A dashboard can be embedded in the create, edit and view modes in any application using URL. In create mode, a new dashboard can be created. In edit mode, existing dashboard can be edited. In the view, users can interact with the dashboard by filtering data, adding comments, and saving the filter views.

Steps to embed dashboard in view mode using URL

NOTE: A similar procedure should be followed to render the multi-tab dashboard in view mode.

  1. To get the embed URL, click the context menu of the respective dashboard and choose the Get Embed code option.

EmbedCodeOption

  1. Choose the mode value as View for rendering a dashboard in the View mode.

ModeOption

  1. By Default, Dashboard Comments, Widget Comments, Saved Views, Export, and SSO options are disabled. Enable this option by sliding the button given in the embed dialog.

EnableOption

Dashboard Comments Dashboard comment panel would be shown in embedded view if enabled this parameter.
Widget Comments Widget comment panel would be shown in embedded view if enabled this parameter.
Saved Views Dashboard views panel would be shown in embedded view if enabled this parameter.
Export Dashboard/Widget exporting options would be shown in embedded view if enabled this parameter.
SSO Single Sign-On authentication is enabled for embedded view if configured authentication is selected as an authentication parameter.

  1. Copy the embed URL by clicking the copy icon from the Embed Code dialog.
    CopyEmbedCode

  2. Embed the copied URL into other web applications.

  3. When you run the web application, it will show the login window or dashboard, based on the type of dashboard. When you click the login button and log in with valid user credentials, the dashboard will render automatically. To avoid login, use single sign-on method.

    EmbedLogin EmbedViewDashboard

NOTE: In the case of SSO enabled parameters, a login prompt will appear if you haven’t logged in and selected SSO authentication; if you have already logged in, the dashboard will be rendered based on the permission granted to the user to that dashboard.

Embed Dashboards using external SSO authentication

Bold BI supports embedding the dashboards into other web applications using the external Single Sign-On authentication in the iframe based embedding. The Bold BI application can be configured to support the Windows Active Directory, Azure Active Directory, OAuth 2.0 and OpenID Connect authentications.

Embed using Windows AD Authentication

The Bold BI application has been configured with the Windows Active Directory, the following steps show how to get the embed code with the Windows Active Directory SSO settings. Learn more about the configure Window Active Directory settings here.

  1. Click the context menu of the respective dashboard and choose the Get Embed code option. In the Embed Code dialog box, select mode as View. Enable the SSO and select the Windows Active Directory option as shown in the following image.

EmbedSSOWindows

  1. Copy the embed URL by clicking the copy icon from the Embed Code dialog and paste it into a web application that has configured the Windows Active Directory.

  2. Run the web application and get sign-in with the windows active directory. Now, the dashboard would be rendered automatically based on the permission given to the windows user.

Embed using Azure AD Authentication

The Bold BI application has been configured with the Azure Active Directory, the following steps show how to get the embed code with the Azure Active Directory SSO settings. Learn more about the configure Azure Active Directory settings here.

  1. Click the context menu of the respective Dashboard and choose Get Embed code option. In the Embed Code dialog, select mode as View. Enable the SSO and select the Azure Active Directory as shown in the following image.

EmbedSSOAzure

  1. Copy the embed URL by clicking the copy icon from the Embed Code dialog and paste it into a web application that has configured the Azure Active Directory.

  2. Run the web application and get sign-in with the Azure Active Directory. Now, the dashboard would be rendered automatically based on the permission given to the azure user.

Embed using OAuth 2.0 Authentication

The Bold BI application has been configured with the OAuth 2.0 , the following steps show how to get the embed code with the OAuth SSO settings. Learn more about the configure OAuth 2.0 settings here.

  1. Click the context menu of the respective Dashboard and choose Get Embed code option. In Embed Code dialog, select mode as View. Enable the SSO and select the OAuth 2.0 option as shown in the following image.

EmbedSSOOAuth

  1. Copy the embed URL by clicking the copy icon from the Embed Code dialog and paste it into a web application that has configured the OAuth 2.0 authentication.

  2. Run the web application and get sign-in with the configured OAuth provider. Now, the dashboard would be rendered automatically based on the permission given to the OAuth user.

Embed using OpenID Connect Authentication

The Bold BI application has been configured with the OpenID Connect , the following steps show how to get the embed code with the OpenID SSO Settings. Learn more about the configure OpenID settings here.

  1. Click the context menu of the respective Dashboard and choose Get Embed code option. In Embed Code dialog,s elect mode as View. Enable the SSO and select the OpenID option as shown in the following image.

EmbedSSOOpenID

  1. Copy the embed URL by clicking the copy icon from the Embed Code dialog and paste it into a web application that has configured the OpenID Connect authentication.

  2. Run the web application and get sign-in with configured OpenID. Now, the dashboard would be rendered automatically based on the permission given to the OpenID user.

Public embedding

If you want to embed the dashboard without user authentication, then make the dashboard public and then embed it. The public dashboard will be rendered automatically without credentials. You cannot enable the comments panel for public dashboard embedding.

NOTE: Embedding the public dashboard will not work when public dashboard setting is disabled. Learn more about the dashboard settings here.

Private embedding

Private dashboards can be embedded, which are accessible to users in the Bold BI, who has the read permission, and these dashboards would be requested to login to Bold BI server before rendering. So embedded dashboard will show the login page whenever private dashboards are embedded and the user is not authenticated yet.

NOTE: By default, dashboard access mode will be set to private until it is changed to the public by the owner of the dashboard.

Advanced security

Using the dashboard security option, you can control which websites, IP addresses, and applications can embed the dashboard. Learn more about dashboard security here.

NOTE: Learn more details about embedding dashboard sample here.

Available parameter

Name Type In Dashboards In Widgets
dashboard_comments boolean Show/hide dashboard comments NA
widget_comments boolean NA Show/hide widget comments
embed_dashboard_views_edit boolean Enable/Disable the Save and Save As view option in the filter overview dropdown. NA
embed_dashboard_favorite boolean Enable/Disable the favorite icon in the dashboard toolbar. NA
views boolean Show/hide dashboard views NA
export boolean Show/hide dashboard export option Show/hide widget export option
hide_header boolean Show/hide dashboard header NA
hide_tool string Show/hide the dashboard options with Predefined values:
tm-Theme,
dp-Dashboard Parameter,
fo-Filter Overview,
fs-FullScreen,
rf-Refresh,
om-Option Menu

Example:
&hide_tool=tm,fo,fs,dp,rf,om		 NA
hide_widget_tool string NA Show/hide the widget options with Predefined values:
fr-Filter,
fs-FullScreen,
om-Option Menu

Example:
&hide_widget_tool=fr,fs,om
hassso boolean Enable/Disable SSO Authentication Enable/Disable SSO Authentication
externallogin string Predefined values:
windowsad,
azuread,
oauth,
openid		 Predefined values:
windowsad,
azuread,
oauth,
openid
embed_theme string Dashboard theme(custom) which will be applied for entire dashboard. Dashboard theme(custom) which will be applied for all widgets.
embed_datasource_filter object The embedded dashboard can be filtered with passed Dashboard Parameter and URL Parameter.

Example:
&embed_datasource_filter=&&dashboardparametername=parametervalue&urlparametername=parametervalue. 		The embedded dashboard can be filtered with passed Dashboard Parameter and URL Parameter.

Example:
&embed_datasource_filter=&&dashboardparametername=parametervalue&urlparametername=parametervalue.

How to pass the Dashboard Parameter and URL Parameter filters in iFrame URL

In iFrame URL, you can pass separate and both types of filters(Dashboard Parameter/URL Parameter) values at the same time.

Pass your filters to the embed_datasource_filter parameter in the iFrame URL as like below.

Example for passing Dashboard Parameter in iFrame URL

<iframe src='http://test.boldbi.com/bi/en-us/site/site1/dashboards/8428c9d9-85db-418c-b877-ea4495dcddd7/Predictive%20Analytics/Personal%20Expense%20Analysis?isembed=true&embed_datasource_filter=&&dashboardparametername=parametervalue' id='dashboard-frame' width='100%' height='600px' allowfullscreen frameborder='0'></iframe>

Example for passing URL Parameter in iFrame URL

<iframe src='http://test.boldbi.com/bi/en-us/site/site1/dashboards/8428c9d9-85db-418c-b877-ea4495dcddd7/Predictive%20Analytics/Personal%20Expense%20Analysis?isembed=true&embed_datasource_filter=&urlparametername=parametervalue' id='dashboard-frame' width='100%' height='600px' allowfullscreen frameborder='0'></iframe>

Example for passing both Dashboard and URL Parameters in iFrame URL

<iframe src='http://test.boldbi.com/bi/en-us/site/site1/dashboards/8428c9d9-85db-418c-b877-ea4495dcddd7/Predictive%20Analytics/Personal%20Expense%20Analysis?isembed=true&embed_datasource_filter=&&dashboardparametername=parametervalue&urlparametername=parametervalue' id='dashboard-frame' width='100%' height='600px' allowfullscreen frameborder='0'></iframe>

  • In the iframe URL, the dashboard parameter filter must be started with a double ampersand &&. For more details, refer to this link.

  • In the iframe URL, the URL filter parameter must be started with a single ampersand &. For more details, refer to this link.

How to embed the dashboard in create mode using the URL

  1. To create a new dashboard, change the embed URL, as shown in the following image. EmbedDashboardCreate

  2. Embed the above embed URL into any web application.

  3. Run the web application; it will show the login window or dashboard based on the type of dashboard. Click the login and enter the valid user credentials, and then the create page will render automatically. EmbedLogin
    EmbedCreateDashboard

Steps to embed dashboard designer using URL

  1. To get the embed URL, click the context menu of the respective dashboard and choose the Get Embed code option.

EmbedCodeOption

  1. Select the mode value as Edit for rendering a dashboard to edit or design.

ModeOption

  1. By default, the SSO options are disabled. Enable this option by sliding the button given in the embed dialog.

EnableOption

SSO The Single Sign-On authentication is enabled to support embedding the dashboard designer into other web applications if the configured authentication is selected as an authentication parameter.

  1. Copy the embed URL by clicking the copy icon from the embed code dialog.
    CopyEmbedCodeForDesgin

  2. Embed the copied URL into other web applications.

  3. When you run the web application, it will show the login window or designer dashboard. When you click the login button and log in with valid user credentials, the dashboard designer will render automatically.

To avoid login, use the Single Sign-On. EmbedLogin EmbedDesignDashboard

NOTE: For Single Sign-On click the context menu of the respective dashboard and choose the Get Embed code option. In the Embed Code dialog box, select Edit as the Mode value. Enable the SSO and the select any one of these:Windows Active Directory, Azure Active Directory, OAuth 2.0 and OpenID Connect authentications. Similar to the view mode Single Sign-On.

Embedding dashboard with filter parameter

You can pass parameters to a dashboard by including them in a dashboard URL in embedding. Passing parameter values within URL will apply filter in the dashboard on initial load itself. You can learn more details here.

Dynamic connection string for dashboard embedding

The Dynamic Connection String feature enables you to modify the connection string of the data sources in dashboard view mode. This feature is applicable only to the dashboards embedded using the Dashboard Embedding feature. Dashboards in the Bold BI application will be rendered using the connection string used while creating the data source. Learn more details here.

Previous
Next