New improvements and custom components in Dashbuilder
As you maybe already know, you can use Dashbuilder, a part of Business Central to create pages and dashboards. Pages are made of small components that can show data. Dashbuilder provides multiple components that users can drag to pages. I’m going to walk you through the new custom components added to Dashbuilder, that you can use to create your own dashboards with your own datasets.
Status and Monitoring Donuts
These are some React components that are inspired by the bits and parts used in Kogito dashboard. Here is an example of how the Kogito dashboard looks like.
We have two components that we can use to recreate the above dashboard in Dashbuilder, the status component and the monitoring donuts component. Let’s see how each of these components look like.
Similarly, you can add the monitoring donuts components, you can change the title, height, and width, according to your wish. Here’s how the monitoring donuts component looks like.
Putting these components together, you can create the above dashboard.
Improvements to Victory Charts
Victory charts component contains multiple charts to visualize your data, starting from bar to donut. You can add any chart of your choice to visualize any data from any dataset and customize the same to change the labels and values to make it look the way you want it to.
We have made it more customizable by adding column settings support. The supported column settings are provided by object ExternalColumnSettings which has the following attributes:
- columnName: The labels set by user in UI;
- valueExpression: A JavaScript expression that should be evaluated over the column value;
- valuePattern: A pattern to format column values.
Here’s how the customization will look like.
Map
This is one of the new components that we have added using Leaflet and React. Now, you can provide your own dataset and create visualizations of your geographic data on a world map using Dashbuilder.
We have the following component properties to make it customizable:
- Center Latitude and Longitude: To set the coordinates of center of the map;
- Disable Title: A checkbox to disable the title;
- Title: To set the title;
- Zoom: To set the zoom factor;
- Bubble max and min radius: To set bubble maximum and minimum radius for bubbles;
- Auto resize bubbles: A checkbox to auto resize bubbles relatively
Conclusion
There is no limit to what library/framework you want to use. We are still including more custom components to allow users to create interactive dashboards. You can find a list of all components here.
Huge shoutout to William Antônio Siqueira for coming up with integrating the Covid deaths database to the map component and for the super clear map GIF.