Custom theme allows you to customize the appearance of the Bold BI embedded dashboard. Using the custom theme option, the dashboard can be customized with a variety of themes that are available on the Bold BI server.
NOTE: To set custom theme, you should upload the custom theme files in Bold BI Server, please go through this link for more details about uploading custom theme files.
appearance
- This member used to set the custom theme in the embedded dashboard.application
- This member used to set the custom theme for button, menu, popup areas as branding color.dashboard
- This member used to set custom theme in dashboard with combination of appearance
and application
members.isLocalTheme
- This member needs to be set as true
while you directly refer the theme file in your embedding application.Name | Type | Description |
---|---|---|
appearance | string | This member used to set the custom theme in the embedded dashboard. |
application | string | This member used to set the custom theme for button, menu, popup areas as branding color. |
dashboard | string | This member used to set the custom theme in dashboard with combination of appearance and application. |
isLocalTheme | boolean | This member needs to be set as true while you directly refer the theme file in your embedding application. Note:Default value is false. |
Follow the steps to apply the custom theme to the dashboard in embedding.
In your .html page, you need to add the following dependent script in the head tag of your page.
<head>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v5.3.53/boldbi-embed.js"></script>
</head>
In the body tag, you need to create the div element with your own id name. This element will be used for dashboard embedding.
<body>
<div id="dashboard_container"></div>
</body>
In the body tag, you need to add the function to create BoldBI instance with following properties and call that function in the body using the onload
attribute as follows. Also, call the loadDashboard()
function.
<body onload="embedSample()">
<div id="dashboard_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
dashboardSettings :
{
themeSettings : {
appearance :"dark",//By default light theme would be set.
}
}
});
boldbiEmbedInstance.loadDashboard();
}
</script>
</body>
When you set custom theme for application
option, you have to set custom theme for appearance
option too. otherwise light
theme would be applied for appearance
option.
<body onload="embedSample()">
<div id="dashboard_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
dashboardSettings :
{
themeSettings : {
appearance :"dark",
application : "darkviolet",//Need to mention the name under which you have saved the application theme file in Bold BI server.
}
}
});
boldbiEmbedInstance.loadDashboard();
}
</script>
</body>
When you set custom theme for dashboard
option, you need not to set custom theme value for appearance
and application
options.
<body onload="embedSample()">
<div id="dashboard_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
dashboardSettings :
{
themeSettings : {
dashboard : "greenMist",// Need to mention the name under which you have saved the dashboard theme file in Bold BI server.
}
}
});
boldbiEmbedInstance.loadDashboard();
}
</script>
</body>
Here the dashboard is rendered in dark theme as given in appearance
option and application buttons, loading indicator are applied with darkviolet theme as specified in application
option.
boldbi.theme.definition.min.css
as custom theme file and following dependent script in the head tag of your page.For demonstration we have set dark
theme as custom theme.
```js
<head>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v5.3.53/boldbi-embed.js"></script>
</head>
```
Need to set isLocalTheme
option as true
while referring the custom theme file as external.
<body onload="embedSample()">
<div id="dashboard_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
dashboardSettings: {
themeSettings : {
isLocalTheme : true, //The default value is false.
}
}
});
boldbiEmbedInstance.loadDashboard();
}
</script>
</body>
A custom theme sample is provided. From this sample, you can generate the custom theme file({src directory}/boldbi-themestudio/themes) by following the steps in readme page.