How to add a custom UI component

Custom Deployment
1

I tried to create a new UI component by duplicate an exist one in openremote/ui/component, I also read this Developer Guide: UI apps and components · openremote/openremote Wiki · GitHub. But it seem not work, the Manager start normally but not record my changes in new component. Can someone help me with this? Please

2

Hi!

As you might’ve noticed, the frontend documentation can be lacking sometimes. We’ll work on this.

Creating a new component should be as simple as duplicating an existing component,
renaming everything to your own use case, and running either yarn install or
./gradlew clean installDist to add it to the yarn workspace.

.
Can you clarify what you mean with “not record any changes in new component” ?
Might depend on how you import / reuse the component files.

Feel free to share more details :slight_smile:

1 Like
3

“not record any changes in new component” indicates that I imported a new component in the file I need to utilise it (added next to or-attribute-input), duplicated or-attribute-input, and renamed all of it in index.ts to or-attribute-input-new. I also executed the installDist command. After that, my IDE followed the new file when I held down the Ctrl key and clicked on the new component. But the UI stays the same whether I modify the class or id in a new file. Did I have to execute npm run serve or installDist each time I changed a new file?

4

“Did I have to execute npm run serve or installDist each time I changed a new file?”
What are you exactly trying to achieve, may I ask? haha

As our components are built in TypeScript, they need to be compiled before they’re shown in the UI.
The ./gradlew modelWatch script, which is ran automatically in the background during npm run serve,
will do this on every file change you make. (common in most frontend development environments)

Of course don’t forget to reference the correct HTML element and import the correct file
when using it in a UI component / page.

1 Like
5

Thanks for your reply, I need to check to check it again now xD

6

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