Hi. How do I add custom widgets to the manager ui on insights dashboard. I have followed the tutorial and modified a copy of the index.ts file and created a custom widget from the example shown; but where do I put these files - in my mounted deployment directory? I have tried /manager/app and created a custom-widget directory and placed the files there, but the new widget is not showing up on insights.
Hey, if I remember correctly, you need to adjust index.ts under “\ui\component\or-dashboard-builder\src\”
import { MyCustomWidget } from “./widgets/my-custom-widget”;
and under “export function registerWidgetTypes(),” add:
widgetTypes.set(“my-custom-widget”, MyCustomWidget.getManifest());
Save your widget file under “\ui\component\or-dashboard-builder\src\widgets”
Then compile and create a Docker image:
./gradlew clean installDist
docker build -t openremote/manager:latest .
docker-compose -p openremote down -v
docker-compose -p openremote up -d
Good luck! Best regards,
Peter
Hi!
What exactly didn’t work in the documentation? (the one here)
Because I’m happy to improve it if you have suggestions.
As @PeterB described, if you have a clone of the OpenRemote repository,
you can modify the tiny bit of code that he described above.
All widgets can then be placed in the ui/component/or-dashboard-builder/widgets and
ui/component/or-dashboard-builder/settings folders respectively.
In the documentation I wrote that the ‘custom project template’ is more difficult,
so I encourage people to clone the repo, open source the widget, and write them that way.
Let me know if you need help! ![]()
Hi Martin,
The part I didn’t understand earlier from your documentation is where the "/ui/components/or-dashboard-builder/widgets/“ directory was located in the openremote-manager docker container. I assumed if this existed it could be mapped to my local deployment directory in “manager/app”. But when I read @PeterB reply I realised that you had to clone the OpenRemote repository, make the necessary changes of code and then compile and create a new docker image.
Therefore, in my case the part about compiling and building a docker image is what was missing from your documentation. This would have pointed me in the right direction with regards either cloning the repo or installing the modules needed with "npm i @openremote/or-dashboard-builder”
Also your documentation needs updating with regards this location, which currently shows "/ui/components/or-dashboard-builder/widgets/“ but is now “\ui\component\or-dashboard-builder\src\widgets”
Thanks!
Hi Peter,
Thanks for your input. I compiled and created a new openremote/manager image - all fine. However, container openremote-manager-1 now fails to start "dependency failed to start: container openremote-manager-1 has no healthcheck configured”? I am using the same docker-compose.yml file as before, which worked fine with the original image. Any ideas?
Thanks,
Antonio
Hi, maybe you’re referencing an old container name? What does your docker-compose.yml look like?
Hey Antonio, it looks like something went wrong with your build process. Here’s how to fix it:
First, navigate to your OpenRemote directory using PowerShell. For example, go to C:\dev\openremote or wherever you have your OpenRemote repository cloned.
Then run these command:
./gradlew clean installDist
Once that’s finished, you can build the Docker image. The command will read the Dockerfile from the manager’s build directory and create an image tagged as openremote/manager:latest.
(You can also use another tag like custom, then you have to adjust the docker-compose file)
docker build -t openremote/manager:latest ./manager/build/install/manager/
After the build completes successfully, verify that the image was created by checking your local Docker images.
Then you can start your containers:
docker-compose -p openremote up -d
Hi. My docker-compose.yml is fine and is pretty much the same as the one cloned from the repo. I followed your steps earlier and had no problem building the new image, I could see it in my docker desktop app, and it was also tagged latest. I just could not start it as it sees it as unhealthy?
Hi, check out my two build commands! The build command from my first post only works correctly if you are in the correct directory (cd manager/build/install/manager/)! It also runs if you are in the root of your directory but breaks the image because you are not in the right context.
So to be sure, as I said, navigate to the main directory and then run
./gradlew clean installDist
again. Then Docker Build again with the complete path specification:
docker build -t openremote/manager:latest ./manager/build/install/manager/
After this your container should start, just test it!
Hi Peter, thanks again for clarifying the build commands - it now works fine!