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.
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 
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.
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.