Can we Create Custom Widgets in the Insights Section to Create Dashboard?

[aniketbabuta]

Hello team,

Currently there are limited number of widgets (Line, KPI, Gauge, Map, Image) with which we can create a dashboard.
Is there any way to customize widgets in insights section and add more functionality? Can we do this in the custom project repo?

Thanks & Regards,
Aniket Babuta

[Pierre]

Add Bar Chart/ New Widgets to Custom Deployment

Hi, small update! We’ve improved the creation of custom widgets with a recent update. I wrote a documentation page showing how to create one, take a look if you want!

[aniketbabuta]

Hello Pierre,

Thanks for the reply. I have created a custom widget as per tutorial. I want to test the changes. Is there any tutorial to setup the development environment to test changes in the web UI?

Also. Can you please share any example of custom-widget created and deployed in case you have one created.

Thanks

[martin.peeters]

Hi! First of all, welcome!

There is extensive documentation on the GitHub wiki on setting up a development environment.
See how to configure your IDE here, and a guide to setup the UI here;

Developer Guide: UI apps and components

It should be very similar if you’re used to UI development in other projects/apps.

To test widgets you need to run the Manager UI using npm run serve, and go to
the Insights page to test them. You probably followed the tutorial on how to create the widgets.
On the same page you can also find a tutorial on how to add your widgets to the Insights page.

Regarding your other question;
The custom-widget in the documentation is just a plain example I made; it doesn’t do much
You can look in the ui/components/or-dashboard-builder/widgets directory, and take widgets like the chart as an example. Always feel free to ask questions