string
Defines the ID of the dashboard to be embedded from your Bold BI application.
""
(empty)Example
var dashboard = BoldBI.create({
dashboardId: "5cb065f7-dabb-4b0c-9b45-c60a5730e963"
});
dashboard.loadDashboard();
string
Stores the dashboard path in the format of category name followed by dashboard name.
/{category-name}/{dashboard-name}
""
(empty)Example
var dashboard = BoldBI.create({
dashboardPath: "/Samples/Sample Dashboard"
});
dashboard.loadDashboard();
string
The ID of a div element in which the dashboard will be initialized and rendered.
""
(empty)Example
<div id="container"></div>
<script>
var dashboard = BoldBI.create({
embedContainerId: "container",
});
dashboard.loadDashboard();
</script>
string
This property is used to pass the access token generated by the Embed Authorization Server, helping reduce redundant API calls and improve performance. Supported from version 12.1—ensure you’re using the compatible SDK and build. You can either provide the token directly or configure an authorization server. If the server is configured, setting the token manually is not required. A sample implementation is available to demonstrate how the API works.
""
(empty)Example
var dashboard = BoldBI.create({
embedToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImRldm9wc0Bib2xkYmkuY29tIiwidXBuIjouYm9sZGJpZGVtby5jb20vYmkvc2l0ZS9zaXRlMSIsImF1ZCI6Imh0dHBzOi8vaG90Zml4LXdpbmRvd3MuYm9sZGJpZGVtby5jb20vYmkvc2l0ZS9zaXRlMSJ9.JzbqVr6Brv1mAEvnbHnE-FuShos"
});
dashboard.loadDashboard();
object
Specifies the type of Bold BI application, either Cloud or Enterprise edition.
BoldBI.Environment.Cloud
BoldBI.Environment.Enterprise
BoldBI.Environment.Enterprise
Example
var dashboard = BoldBI.create({
environment: BoldBI.Environment.Enterprise
});
dashboard.loadDashboard();
number
This property allows you to set the expiration time for the access token, in seconds. You can customize the duration based on your application’s needs. The maximum allowed value is 604800 seconds (7 days). The minimum recommended value depends on your security and session requirements.
86400
(24 hours)Example
var dashboard = BoldBI.create({
expirationTime: 100000
});
dashboard.loadDashboard();
string
This parameter allows users to filter dashboard data dynamically by passing values through the URL parameters or dashboard parameters.
{column_name}={value1},{value2},{value3}
or IN({value1},{value2})
{parameter_name}={parameter_value}
or IN({value1},{value2})
{column_name1}={value1}&{column_name2}={value2}
{parameter_name}={parameter_value}&{parameter_name1}={parameter_value1}
{column_name}={value1},{value2}&{parameter_name}={parameter_value}
or vice versa""
(empty)Examples URL Parameter
var dashboard = BoldBI.create({
filterParameters: "Continent=Asia,Africa,Europe"
});
dashboard.loadDashboard();
Dashboard Parameter (Literal)
var dashboard = BoldBI.create({
filterParameters: "Department_DP=Sales"
});
dashboard.loadDashboard();
Dashboard Parameter (List)
var dashboard = BoldBI.create({
filterParameters: "Department_DP=IN(Sales,Marketing)"
});
dashboard.loadDashboard();
Multiple URL Parameters
var dashboard = BoldBI.create({
filterParameters: "Continent=Asia&Direction=East"
});
dashboard.loadDashboard();
Multiple Dashboard Parameters
var dashboard = BoldBI.create({
filterParameters: "Department_DP=Sales&Feedback=Good"
});
dashboard.loadDashboard();
Combination of URL and Dashboard Parameters
var dashboard = BoldBI.create({
filterParameters: "Continent=Asia,Africa,Europe&Department_DP=Sales"
});
dashboard.loadDashboard();
string
Defines the height of the embedding module in percentages or pixels.
Example
var dashboard = BoldBI.create({
height: "800px"
});
dashboard.loadDashboard();
object
Defines the dashboard rendering mode.
BoldBI.Mode.View
BoldBI.Mode.Design
BoldBI.Mode.Connection
BoldBI.Mode.DataSource
BoldBI.Mode.View
Example
var dashboard = BoldBI.create({
mode: BoldBI.Mode.View,
});
dashboard.loadDashboard();
string
Set the nonce property if Content Security Policy (CSP) is enabled in the client application. This allows Bold BI’s script files to load and execute securely by matching the nonce value declared in the CSP meta tag.
""
(empty)nonce
member and the meta tag.Example
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-8beb50ac-fc1d-4106-ba6b-798835ac0c1b'">
var dashboard = BoldBI.create({
nonce = "8beb50ac-fc1d-4106-ba6b-798835ac0c1b"
});
dashboard.loadDashboard();
string
The URL of the Bold BI application.
""
(empty)Example
var dashboard = BoldBI.create({
serverUrl: "https://mydashboard.com/bi/site/site1",
});
dashboard.loadDashboard();
string
Authenticates the dashboard without implementing the Authorization server endpoint. Required only if the Authorization url API is not configured. Refer to the token generation documentation for details.
""
(empty)Example
var dashboard = BoldBI.create({
token: "NjQ2ZDgwZjgtN2Q3MS00ZDQwLWFkNTItYTdkNDRhOGE2NmVi", // Use the generated API key
});
dashboard.loadDashboard();
To learn about the available limited supporting methods in embedding.
string
The unique ID of a Dashboard View to render the dashboard with filter view applied.
""
(empty)Example
var dashboard = BoldBI.create({
viewId: "b64aebef-58ca-4033-b81a-39350c849b75"
});
dashboard.loadView();
string
The name of a Dashboard View to render the dashboard with filter view applied. dashboardId
is mandatory to use along with this member.
""
(empty)Example
var dashboard = BoldBI.create({
dashboardId: "5cb065f7-dabb-4b0c-9b45-c60a5730e963",
viewName: "view 1"
});
dashboard.loadView();
string
Defines the width of the embedding module in percentages or pixels.
Example
var dashboard = BoldBI.create({
width:"1200px", //The dashboard is now rendered with a width of 1200px.
});
dashboard.loadDashboard();
string
Any application that embeds a Bold BI dashboard and widget needs to authenticate with the Bold BI server. This authentication flow requires sending confidential information such as user email, group details, and embed signature to the Bold BI server. Therefore, you must implement this authentication flow in your server application and provide the URL for connecting to your server in the Bold BI embed instance. Refer to the authorization server documentation for details.
""
(empty)Example
var dashboard = BoldBI.create({
authorizationServer: {
url:"https://serversample.com/embed-details/get",
}
});
dashboard.loadDashboard();
object
Transmits custom data or header values to the embedding application’s Authorization Server. As a result, you may find this value in the headers of the Authorization Server API.
{}
(empty object)Example
var dashboard = BoldBI.create({
authorizationServer:{
headers: {
"Cookie": "Set-Cookie: sessionId=38afes7a8",
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether Bing Map-related files need to be downloaded.
false
true
if the dashboard contains a Bing Map widget.Example
var dashboard = BoldBI.create({
settings: {
bingMapRequired: false
}
});
dashboard.loadDashboard();
boolean
Enables or disables the display of error messages inside the dashboard container. The onError
event is a callback function used to catch and handle errors that occur during the dashboard embedding process.
false
true
to suppress embedded error UI and handle errors via a custom callback.Example
var dashboard = BoldBI.create({
settings: {
hideErrorMessage: true,
events: {
onError: function (args) {
var dashboardContainer = document.getElementById("dashboard");
dashboardContainer.innerHTML = "Authorization is failed. Please provide valid authorization server.";
}
}
}
});
dashboard.loadDashboard();
boolean
Restricts the mobile view on desktop when the browser width reaches a specified threshold.
false
Example
var dashboard = BoldBI.create({
settings: {
restrictMobileView: true
}
});
dashboard.loadDashboard();
Note: Please use the SDK and Bold BI server from the same version. Starting from version 13.1, the AI Assistant settings are restructured.
enabled
boolean
Enables the AI Assistant for generating and modifying widgets using natural language queries. The AI Assistant enhances widget creation and customization by leveraging advanced AI models, making data visualization more intuitive and accessible. This feature is available in both Cloud and Enterprise editions for Dashboard Viewer, and Dashboard Designer embeddings.
false
Example
var dashboard = BoldBI.create({
settings: {
aiAssistant: {
enabled: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the AI Chat Help
icon in the AI Assistant window. Requires the aiassistantenabled to be set.
false
Example
var dashboard = BoldBI.create({
settings: {
aiAssistant: {
enabled: true,
hideChatHelp: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the AI Data Usage
icon in the AI Assistant window. Requires the aiassistantenabled to be set.
false
Example
var dashboard = BoldBI.create({
settings: {
aiAssistant: {
enabled: true,
hideUsageAnalytics: true
}
}
});
dashboard.loadDashboard();
boolean
Customizes the title of the AI Assistant as desired. Requires the enabled member API.
false
Example
var dashboard = BoldBI.create({
settings: {
aiAssistant: {
enabled: true,
name: "Embedded AI"
}
}
});
dashboard.loadDashboard();
summary.enabled
boolean
Specifies whether to show or hide the dashboard and widget summary option. Requires the enabled member API.
false
var dashboard = BoldBI.create({
settings: {
aiAssistant: {
enabled: true,
summary: {
enabled: true
}
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the AI Dashboard Summary
option in the dashboard banner. Requires both aiassistantenabled and summaryenabled member APIs.
false
settings.aiAssistant.summary.dashboard
.Default value
Example
var dashboard = BoldBI.create({
settings: {
aiAssistant: {
enabled: true,
summary: {
enabled: true,
dashboard: true
}
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the AI Widget Summary
option in the widgets. Requires both aiassistantenabled and enableAiSummary to be set.
false
settings.aiAssistant.summary.widget
.Example
var dashboard = BoldBI.create({
settings: {
aiAssistant: {
enabled: true,
summary: {
enabled: true,
widget: true
}
}
}
});
dashboard.loadDashboard();
boolean
The hideHelpLink
option allows you to show or hide the help icon in the AI Assistant chat window.
Default value
Example
var dashboard = BoldBI.create({
settings: {
brand: {
hideHelpLink: true
}
}
});
dashboard.loadDashboard();
string
The domain
option allows you to define a link to your custom domain help documentation application instead of using our Bold BI help documentation link in the help icon of AI Assistant chat window.
Default value : empty
Example
var dashboard = BoldBI.create({
settings: {
brand: {
domain: "https://yourdomain.com"
}
}
});
dashboard.loadDashboard();
string
The name
option allows you to customize the name in the AI Assistant chat window.
Default value : empty
Example
var dashboard = BoldBI.create({
settings: {
brand: {
name: "Demo"
}
}
});
dashboard.loadDashboard();
integer
Customize the margins of the dashboard using the corresponding integer values.
null
Example
var dashboard = BoldBI.create({
settings: {
designCanvas: {
margin: 30
}
}
});
dashboard.loadDashboard();
The dashboard server provides a dynamic connection string feature for fetching the data used to render the dashboard.
boolean
Specifies whether to show or hide the dynamic connection string feature.
false
Example
var dashboard = BoldBI.create({
settings: {
dynamicConnection: {
enabled: false
}
}
});
dashboard.loadDashboard();
string
This property holds the values that will be passed to the API in the dynamic connection string feature. This allows the user to use this identity in their API for validation and providing the required connection string.
""
(empty)Example
var dashboard = BoldBI.create({
settings: {
dynamicConnection: {
enabled: false,
identity: ""
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the CSV
export option.
true
Example
var dashboard = BoldBI.create({
settings: {
export: {
csv: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Excel
export option.
true
Example
var dashboard = BoldBI.create({
settings: {
export: {
excel: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Image
export option.
true
Example
var dashboard = BoldBI.create({
settings: {
export: {
image: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the PDF
export option.
true
Example
var dashboard = BoldBI.create({
settings: {
export: {
pdf: true
}
}
});
dashboard.loadDashboard();
boolean
Displays or hides the dashboard localization dropdown in the dashboard banner.
false
Localize Dashboard
option in the Bold BI Server dashboard designer. The dropdown is visible by default; use hideDropdown
to hide it.Example
var dashboard = BoldBI.create({
settings: {
language: {
hideDropdown: true
}
}
});
dashboard.loadDashboard();
string
Contains the value to change the dashboard’s localization during initial rendering.
""
(empty)Localize Dashboard
option in the Bold BI Server dashboard designer to enable language changes via code
.Example
var dashboard = BoldBI.create({
settings: {
language: {
code: "fr-FR"
}
}
});
dashboard.loadDashboard();
The locale
allows you to change the localization of the dashboard, modifying data based on the specified localization.
string
Holds the value to change the language of the dashboard, data source, or widget.
en-US
Example
Note: The
fr-FR
language file has been generated in the Bold BI Server installed location.
var dashboard = BoldBI.create({
settings: {
locale: {
appLocale: "fr-FR"
}
}
});
dashboard.loadDashboard();
string
Holds the value to change the dashboard’s culture, affecting formats like currency.
en-US
Auto (English(en-US))
. After setting a custom culture, the widget reflects the new format.Example
var dashboard = BoldBI.create({
settings: {
locale: {
culture: "en-US"
}
}
});
dashboard.loadDashboard();
Additional Info:
- Default currency culture:
- Default grid view:
- Modified culture:
- Refer to Embedding In Your Application for setup steps. Use the
cultureSettings
API to adjust the culture post-embedding.
string
Configures the custom theme for the embedded dashboard. This member allows you to set the overall visual style of the dashboard.
light
Example
var dashboard = BoldBI.create({
settings: {
theme: {
appearance: "dark"
}
}
});
dashboard.loadDashboard();
string
Sets the custom theme for buttons, menus, and popup areas as the branding color.
application
theme, you must also specify the appearance
theme; otherwise, the default light
theme will be applied to appearance
. Custom theme files must be uploaded to the Bold BI Server.Example
var dashboard = BoldBI.create({
settings: {
theme: {
appearance: "dark",
application: "darkviolet" // Name under which the application theme file is saved in Bold BI Server.
}
}
});
dashboard.loadDashboard();
string
Sets a custom theme for the dashboard by combining the appearance
and application
members.
dashboard
option, there is no need to set appearance
or application
separately. Custom theme files must be uploaded to the Bold BI Server.Example
var dashboard = BoldBI.create({
settings: {
theme: {
dashboard: "greenMist" // Name under which the dashboard theme file is saved in Bold BI Server.
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to directly reference a custom theme file in your embedding application. Set to true
when referencing an external theme file (e.g., boldbi.theme.definition.min.css
). Include the theme file in the HTML <head>
tag.
false
Example
<head>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v13.1.10/boldbi-embed.js"></script>
<link rel="stylesheet" href="/path/to/theme/file/darkviolet.css">
</head>
<body onload="embedSample()">
<div id="dashboard_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
settings: {
theme: {
localTheme: true
}
}
});
boldbiEmbedInstance.loadDashboard();
}
</script>
</body>
string
Customizes the font of Bold BI embedded modules, such as the viewer, designer, data source, and pinboard embedding. The font file must be uploaded to the Bold BI Server. Use the name provided during upload. Refer to the Font documentation for details.
Example
var dashboard = BoldBI.create({
settings: {
theme: {
fontFamily: "Patrick-hand" // Name under which the font family file is saved in Bold BI Server.
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the display of all columns in the table in the View Underlying Data
of the widget.
false
Example
var dashboard = BoldBI.create({
settings: {
viewData: {
allColumns: true // Column options are all checked in the dashboard viewer.
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the “Select Column” button in the view underlying data
of the widget.
true
Example
var dashboard = BoldBI.create({
settings: {
viewData: {
columnSelection: false // Select column button will be hidden in the dashboard viewer.
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the export option in the view underlying data
of the widget.
true
Example
var dashboard = BoldBI.create({
settings: {
viewData: {
exporting: false // The Export option will be hidden in the dashboard viewer.
}
}
});
dashboard.loadDashboard();
Specifies whether or not to update the Dashboards name in the header section for a Single Tab Dashboard. For Multi Tab Dashboard, it specifies the unique ID of the dashboard and the name in which it should be rendered.
""
(empty)[]
(empty array)dashboardId
and displayName
pairs.Example (Single Tab Dashboard)
var dashboard = BoldBI.create({
settings: {
viewer: {
dashboardName: "name"
}
}
});
dashboard.loadDashboard();
Example (Multi Tab Dashboard)
var dashboard = BoldBI.create({
settings: {
viewer: {
dashboardName: [
{ dashboardId: "fb63ae99-83b6-4752-97b7-890182a3729f", displayName: "value 1" },
{ dashboardId: "77fd95ce-ec8b-4f68-817c-f41cabfabd3a", displayName: "value 2" }
]
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Dashboard Parameter
icon in dashboard banner.
true
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
dashboardParameter: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Edit
icon in dashboard banner.
false
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
edit: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Export
button in dashboard banner.
true
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
export: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Full Screen
icon in dashboard banner.
false
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
fullScreen: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the header panel in the Dashboard Viewer.
true
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
header: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Refresh
icon in dashboard banner.
true
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
refresh: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Metrics
option in the dashboard banner.
true
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
metrics: true
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Option
icon in dashboard banner.
true
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
moreOption: true
}
}
});
dashboard.loadDashboard();
The auto refresh feature allows you to configure the scheduled refreshing process of the dashboard. It is used to refresh the data based on the specified time.
boolean
Enables or disables the auto-refresh feature for the dashboard.
false
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
autoRefresh: {
enabled: false
}
}
}
});
dashboard.loadDashboard();
number
Specifies the hourly time interval for auto-refreshing data.
0
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
autoRefresh: {
enabled: false,
hourlySchedule: {
hours: 1
}
}
}
}
});
dashboard.loadDashboard();
number
Specifies the minute-by-minute time interval for auto-refreshing data.
0
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
autoRefresh: {
enabled: false,
hourlySchedule: {
minutes: 10
}
}
}
}
});
dashboard.loadDashboard();
number
Specifies the second-by-second time interval for auto-refreshing data.
0
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
autoRefresh: {
enabled: false,
hourlySchedule: {
seconds: 30
}
}
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to show or hide the Filter Overview
icon in the dashboard banner.
true
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
filterOverview: {
enabled: true
}
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to display or hide the Save As option in the Filter Overview
section of the dashboard banner.
false
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
filterOverview: {
enabled: true,
saveAs: true // To enable save as option in filter overview
}
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to display or hide the Save option in the filter overview
section of the dashboard banner.
false
Example
var dashboard = BoldBI.create({
settings: {
viewer: {
filterOverview: {
enabled: true,
save: true // To enable save option in filter overview
}
}
}
});
dashboard.loadDashboard();
boolean
Specifies whether to display or hide the View Saved Filter option in the Filter Overview
section of the dashboard banner. When clicked, it triggers the onSavedFilterClick
event, allowing customization of the views dialog and additional actions.
false
Example
var dashboard = BoldBI.create({
mode: BoldBI.Mode.View,
settings: {
viewer: {
filterOverview: {
enabled: true,
viewSavedFilter: true // To enable view saved filters option in filter overview
}
},
events: {
filters: {
onSavedFilterClick: function (args) {
// Retrieves the array of view information from 'args.viewInfos' and perform further actions.
console.log(args.viewInfos); //The 'args.viewInfos' contains a list of views in the form of an array.
}
}
}
}
});
dashboard.loadDashboard();
string
Allows embedding the dashboard with views by passing the viewId
value, viewName
, and query string in the filterParameters
.
""
(empty)viewName
and query string via the REST API.Example
var dashboard = BoldBI.create({
settings: {
viewer: {
filterOverview: {
enabled: true,
viewId: '0732e6c9-f7d6-469a-85e0-a7a4b22dbb2a' // View ID
viewName: 'Filter View' // View name
}
}
},
filterParameters: 'filterQuery=[{"ucn":"Column1","cn":"Orderdate","rn":"ComboBox2","ir":false,"ims":false,"fi":"92884626db4ffba31a49504a4864e4","ipw":false,"dimfi":{"c":"Include","t":["2022"]}}]', //query string of the respective view
});
dashboard.loadDashboard();
string
Allows embedding the dashboard with views by passing the viewName
value and query string in the filterParameters
.
""
(empty)viewName
and query string via the REST API.Example
var dashboard = BoldBI.create({
settings: {
viewer: {
filterOverview: {
enabled: true,
viewName: 'Filter View' // View name
}
}
},
filterParameters: 'filterQuery=[{"ucn":"Column1","cn":"Orderdate","rn":"ComboBox2","ir":false,"ims":false,"fi":"92884626db4ffba31a49504a4864e4","ipw":false,"dimfi":{"c":"Include","t":["2022"]}}]', //query string of the respective view
});
dashboard.loadDashboard();
string
Customize the box shadow of the widgets.
""
(empty)Example
var dashboard = BoldBI.create({
settings: {
viewer: {
widgetContainer: {
boxShadow: "10px 10px lightblue"
}
}
}
});
dashboard.loadDashboard();
integer
Customize the margins of the widget with the corresponding integer values.
null
px
suffix; only integer values are supported.Example
var dashboard = BoldBI.create({
settings: {
viewer: {
widgetContainer: {
margin: 20
}
}
}
});
dashboard.loadDashboard();