New improvements and custom components in Dashbuilder

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.

Image of Kogito Dashboard

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.

Here’s how you can add a status component

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.

Here’s how you can add a monitoring donuts component

Putting these components together, you can create the above dashboard.

Recreating a Kogito 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.

Victory charts customization

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
Map component in action

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.

This post was original published on here.
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments