Add Data Table Widget in Insight

Custom Deployment
1

Hi everyone,

I would like to add a Widget Data Table to my Project.

I wanted to ask if there is documentation that explains how to add a new Widget or someone who tells me where to add the component to my Project.

Thank you for your help.

2

Hi! First of all, welcome!

Currently there is no documentation available on adding custom widgets.
You’re always able to develop a new one by cloning/forking the Manager repository.
All our frontend code consists completely out of web components using Lit HTML & Typescript.
I’ll describe it briefly for you:

.

The widget files are located in ui/app/component/or-dashboard-builder/src/widgets.

In this folder, you can add any widget you want. By extending on the OrWidgetEntity interface,
several functions are provided to customize the HTML content and the available settings.
All our widgets such as or-chart-widget are also in that folder, so you could copy stuff if needed.

The last step to register the widget in the registerWidgetTypes() method
inside the index.ts file of or-dashboard-builder:

widgetTypes.set("kpi", new OrKpiWidget());

.
Let me know if you have any questions or need help :wink:

4

Hi Martin,
We are also working on same topic: we exactly follow the steps guided here, unfortunately not succeed till now may be missing some steps, please correct me.

Step1: Go to the directory - ui/component/or-dashboard-builder/src/widgets
Step2: Copy the Gauge widget, modify it and add in the same folder with the name of or-card-widget.ts
Step3: Go to : ui/component/or-dashboard-builder/src/index.ts
Step4: Register newly developed widget here: export function registerWidgetTypes() {
widgetTypes.set(“linechart”, new OrChartWidget());
widgetTypes.set(“kpi”, new OrKpiWidget());
widgetTypes.set(“gauge”, new OrGaugeWidget());
widgetTypes.set(“map”, new OrMapWidget());
widgetTypes.set(“card”, new OrCardWidget());
Step 5: Run - docker-compose.yml

Unfortunately, can not see any changes into the application.

Please guide me, if any step I missed.

5

Yes those steps are correct.
Just make sure that you’ve edited the OrWidgetEntity details in OrCardWidget.

.
Can you explain me that last step? “Run - docker-compose.yml” ?

The docker-compose file runs instances of official OpenRemote releases, so it doesn’t take your code changes in to count. If running the dev-ui profile, you are only running the backend services (manager, database etc) which allows you to run custom frontends like these using npm run serve.
See here and here on the GitHub wiki.

6

Hi, small update!

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

1 Like
7

Hi,

I found an issue with your table and asset widget. But first of all, a small thank you for releasing them. I saw your pull request being merged, so I gave it a go. They are simple but handy. I have issues with the visualisation of alarms generated by assets. So, the table view, sorted on alarms, comes close to a solution.

The widgets are working fine inside openremote. The moment you open them in an external window as a dashboard, they do not show any data. All other widgets do show data. It does not matter if the logged-in user has admin or restricted rights.

Best regards

Peter

8

Hi Peter!

Thanks for sharing, great to hear!
Already applied them in a home setup of mine as well haha
We still got lots of ideas for the Insights page, so maybe one day I’ll find the time :joy:

About the bug;
Yes, good spot. Silly me. I forgot to add the reference to the new widgets in the standalone Insights app.
Will add this to a fix I’m working on :grin:

Thanks a lot for reporting!

9

Hi Martin,

I have played around with the table widget and attribute widget. Of course, there are plenty of ideas you can think about. None of the standard solutions you will provide will ever be enough for any particular use case, but you can try to get as close to it as you can get.

  • The table widget is perfect for how it is made and serves its purpose. But if the table shows an anomaly in an asset, you must manually copy the asset name and find it in the tree. To increase usability, you can make it so that if you press the name, the same popup will show, like in the map view. Only the most essential attributes that are marked to be shown in the Dashboard are being shown. And the code for that popup has already been made.

  • I have read your manual on how to write custom widgets. Simply perfect. I will get there soon to write them myself. But can you make it really modular so you can use it straight from the custom repository? Second, If you can set up a plugin architecture for widgets, you will have plenty of widgets you do not need to maintain. For example, every community widget is in its own git repository. If I want to have a community widget, I just add the widget in a particular folder as a submodule. You are really close to such architecture. Besides data collection and decision-making is data reporting one of the key features of the platform.

Have a nice weekend and keep up with the job!

1 Like
10

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.