Documentation
Demos
Support
Blog
Download Free Trial
Search results

Custom theme

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: This custom theme feature only available in Cloud BI. The same feature will be available for embedded Bold BI from our next release.

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.

How to apply custom theme in Bold BI embedded application

Follow the steps to apply the custom theme to the dashboard in embedding.

How to use Bold BI wrapper inside your html page

  1. In your .html page, you need to add the following dependent scripts in the head tag of your page.

       <head>  
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>
       <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
   </head>

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

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

    How to apply custom theme using appearance option

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

    How to apply custom theme using application option

    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>

    How to apply custom theme using dashboard option

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

How to refer the custom theme file as external in your embedded application

  1. In your .html page of your application, you need to add boldbi.theme.definition.min.css as custom theme file and following dependent scripts in the head tag of your page. For demonstration we have set dark theme as custom theme.

       <head>  
       <link rel="stylesheet" type="text/css" href="themes/dark/boldbi.theme.definition.min.css" />
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>
       <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
   </head>

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

How to refer the custom theme file as external.

We have provided a custom theme sample. From these sample, you can able to generate the custom theme file({src directory}/boldbi-themestudio/themes) by following the steps in readme page.

Previous
Next