How to create and publish Bold Report Viewer as a Custom widget in Bold BI?

Published:

A Report Viewer custom widget is used to view the Bold Report viewer inside the Bold BI application

Step 1: Create custom widget template files with the Bicw Utility. For further doubts, you can refer to the documentation link.

Step 2: Then generate the custom GUID with any online tool and replace the GUID available in the sourcefile.js and widgetconfig.json as in the below code.

sourcefile.js

bbicustom.dashboard.registerWidget({  
   guid:"21f73a6e-08da-4910-b70d-c395d781710e",  
   widgetName:"ReportViewer"
})

widgetconfig.json

{ "widgetName": "ReportViewer",
"guid": "21f73a6e-08da-4910-b70d-c395d781710e",
"displayName": "ReportViewer"
}
Step 3: Refer to the needed dependency files (JS, CSS) in the widgetconfig.json file, as shown in the below code, to render the report viewer inside the Bold BI application.

widgetconfig.json

{  
  "widgetName": "ReportViewer",
  "guid": "21f73a6e-08da-4910-b70d-c395d781710e",
  "displayName": "ReportViewer",
  "category": "Miscellaneous",
  "description": "Sample widget for getting start",
  "srcFile": "src/sourcefile.js",
  "version": "5.2.0.0",
  "mobileModeHeight": 0,
  "dependencies": {
    "scripts": [
       "src/widget.js",
       "https://cdn.boldreports.com/4.2.52/scripts/common/bold.reports.common.min.js",
       "https://cdn.boldreports.com/4.2.52/scripts/common/bold.reports.widgets.min.js",
       "https://cdn.boldreports.com/4.2.52/scripts/common/bold.report-designer-widgets.min.js",
       "https://cdn.boldreports.com/4.2.52/scripts/bold.report-viewer.min.js",
       "https://cdn.boldreports.com/4.2.52/scripts/bold.report-designer.min.js"
    ],
    "styles": [
       "style/widget.css",
       "https://cdn.boldreports.com/4.2.52/content/material/bold.reports.all.min.css",
       "https://cdn.boldreports.com/4.2.52/content/material/bold.reportdesigner.min.css"
    ]
  }
}

Step 4: Also, find the code changes in sourcefile.js to render the report viewer in bold, as shown in the below image.

sourcefile.js

bbicustom.dashboard.registerWidget({
    guid:"21f73a6e-08da-4910-b70d-c395d781710e",
    widgetName:"ReportViewer",
    init: function () {
          $(this.element).addClass('customReportViewer');
          $("#"+this.element.id).boldReportViewer({
               reportServiceUrl:"https://demos.boldreports.com/services/api/ReportViewer",
               reportPath: '~/Resources/docs/sales-order-detail.rdl'
          });    
    }
});

Note: For example, we have used the reportServiceUrl and reportPath as in the above image. You can modify it as per your requirements.

Step 5: After modifying the sourcefile.js and widgetconfig.json as per our requirements, we need to pack the custom widget files with the Bicw utility. For more information on how to pack custom widgets, you can refer to the link.

Note: We have attached the already created ReportViewer custom widget for your reference.

Step 6: Then publish the custom widget to the Bold BI application with the use of a help link. Custom widget publishing through the UI is supported only in the Bold BI on-premises build.

Step 7: Once published, find the ReportViewer custom widget under the Miscellaneous section of the designer panel, as shown in the following image.

Step 8: Drag and drop the custom widget into the designer canvas and resize it to the required size so that the report viewer gets rendered as in the below image

Repore Viewer rendered image

ReportViewer.bicw

Bicw Utility.zip

Was this article useful?

Dislike

Written by Sathish Kanniyappan

Updated

Comments (0)

How to create and publish Bold Report Viewer as a Custom widget in Bold BI?

Access denied