How to Customize Report Designer Widgets in Bold Reports Designer Application in React

The Bold Reports Designer application in React allows you to customize the available widgets using the filterReportItems API property. This feature enables you to control which components are accessible in the designer interface, ensuring a streamlined and user-friendly experience.

To get started, refer to our React Report Designer help documentation for instructions on creating a new report designer application.

Customizing Widgets

By using the filterReportItems property, you can specify which widgets should be displayed by filtering out unwanted ones from the list in the App.js file.

By default, the Basic Items widget section includes four elements: Textbox, Line, Image, and Rectangle.

Here’s an example of how to filter specific report items. In this case, both Image and Rectangle has been removed from the Basic Items Widgets.

var allReportItems = [
"Textbox", "Line", "Image", "Rectangle", "Tablix", "TablixWizard", "Matrix", "List", "Chart",
"RadialGauge", "LinearGauge", "Map", "Barcode", "Sparkline", "Pie", "Funnel", "DataBar", "Indicator", "SubReport",
"Column", "Bar", "Stacked Bar", "Stacked Column", "Stacked Column100%", "Range Column", "Range Bar",
"Exploded Pie", "Doughnut", "Pyramid", "Area", "Smooth Area", "Stacked Area", "Stacked Area100%", "Range Area",
"Smooth Range Area", "Smooth Line", "Stepped Line", "Line with Markers", "Smooth Line with Markers", "Scatter",
"Bubble", "Polar", "Radar", "Stacked Bar100%"
]; // Modify this list for the required widgets

var itemsToHide = ["Image", "Rectangle"]; // Modify this list as needed

var filteredItems = allReportItems.filter(item => !itemsToHide.includes(item));
function App() {
 return (
   <div style={designerStyle} className="App">
     <BoldReportDesignerComponent
       id="reportdesigner_container"
       serviceUrl="https://demos.boldreports.com/services/api/ReportingAPI"
       filterReportItems={filteredItems}>
     </BoldReportDesignerComponent>
   </div>
 );
} 

In the screenshot above, both Image and Rectangle widgets have been removed from the Basic Items section as per the provided code.

By using the filterReportItems API, you can control the available widgets in the Bold Reports Designer application in React based on your requirement. This ensures a more focused and efficient report design experience by exposing only the necessary components.

See Also:

Customizing Report Designer Widgets in Bold Reports Designer Application