# Create custom ui node in Dashboard 2

**URL:** <https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801>\
**Category:** General\
**Tags:** node-red-dashboard, ui-widgets, dashboard-2\
**Created:** [8 May 2024 06:52 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801 "2024-05-08T06:52:35Z")\
**Posts on this page:** 17\
**Page:** 2

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 May 2024 09:48 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/21 "2024-05-22T09:48:59Z")

</div>

> [@greenDog](#):
>
> is the .umd.js file in the resources folder automatically generated when building the node

Yes

> [@greenDog](#):
>
> In the .vue file the html code has to be written in and the css code in ?

Also Yes.

---

<div class="post-metadata">

**Author:** ![greenDog](https://avatars.discourse-cdn.com/v4/letter/g/e8c25b/32.png) [@greenDog](https://discourse.nodered.org/u/greenDog)\
**Post date:** [22 May 2024 10:59 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/22 "2024-05-22T10:59:32Z")

</div>

In the .vue file there is already html code in the when you look at the ui-example repo. ([node-red-dashboard-2-ui-example/ui/components/UIExample.vue at main · FlowFuse/node-red-dashboard-2-ui-example · GitHub](https://github.com/FlowFuse/node-red-dashboard-2-ui-example/blob/main/ui/components/UIExample.vue))  
Should something already be displayed in the dashboard if you integrate the repo into the dashboard without changing anything?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 May 2024 11:19 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/23 "2024-05-22T11:19:47Z")

</div>

You have to follow the instructions for building it as described in [Building Third Party Widgets | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/contributing/widgets/third-party.html)

---

<div class="post-metadata">

**Author:** ![greenDog](https://avatars.discourse-cdn.com/v4/letter/g/e8c25b/32.png) [@greenDog](https://discourse.nodered.org/u/greenDog)\
**Post date:** [22 May 2024 13:18 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/24 "2024-05-22T13:18:59Z")

</div>

I have followed the instructions but it still does not work.

Dashboard 2 is working and other nodes are displayed on the dashboard. (Node-RED is installed locally on my PC)

First I downloaded the ui-example repo from github and installed it. At this point I did not change anything in the repo.  
Then I used the command 'npm run build'.

Did I make a mistake or does the ui-example repo not work for someone else either?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 May 2024 14:19 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/25 "2024-05-22T14:19:04Z")

</div>

You also have to go into the example node folder and run  
`npm install`  
that seems to be missing from the instructions. Also, since you installed the node using npm you have to restart node-red.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 May 2024 16:27 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/26 "2024-05-22T16:27:03Z")

</div>

> [@Colin](#):
>
> run  
> `npm install`  
> that seems to be missing from the instructions

Colin,  
Suppose he did not execute this command. How would he then have been able to execute ´npm run build´? Because that build requires Vite, which needs yo be installed via your command. Or am I just getting nuts...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 May 2024 16:45 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/27 "2024-05-22T16:45:44Z")

</div>

> [@BartButenaers](#):
>
> Suppose he did not execute this command. How would he then have been able to execute ´npm run build

Yes, I realised that after I posted, so either the build was not run, or maybe just needs a restart.

---

<div class="post-metadata">

**Author:** ![greenDog](https://avatars.discourse-cdn.com/v4/letter/g/e8c25b/32.png) [@greenDog](https://discourse.nodered.org/u/greenDog)\
**Post date:** [23 May 2024 05:49 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/28 "2024-05-23T05:49:43Z")

</div>

Yes, i ran `npm install` and for the `npm run build` i got this result:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/3592ec2cfe93a638f7b9f09c5ac8d95adb6e963a.png)

And after that i also restarted Node-RED, but it still does not work.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [23 May 2024 06:21 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/29 "2024-05-23T06:21:33Z")

</div>

Run the command to install the node again and show us the output from that command (copy/paste please, not screenshot).

Also, in settings.js, set the log level to Trace and show us the output when you start node red.

Also show us the contents of package.json

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 May 2024 07:32 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/30 "2024-05-23T07:32:50Z")

</div>

There are two `npm install` steps required:

1. `npm install` from within your example directory
2. `npm install /path/to/your/local/node-red-dashboard-example-node` from within your Node-RED directory

The former pulls in dependencies for `example`, and the latter adds the `example` to your Node-RED environment.

Re-reading the [docs](https://dashboard.flowfuse.com/contributing/widgets/third-party.html#developing-locally) this is not entirely clear, so I'll improve them now and get a PR opened.

---

<div class="post-metadata">

**Author:** ![greenDog](https://avatars.discourse-cdn.com/v4/letter/g/e8c25b/32.png) [@greenDog](https://discourse.nodered.org/u/greenDog)\
**Post date:** [23 May 2024 07:43 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/31 "2024-05-23T07:43:24Z")

</div>

Thank you for clarifictaion. Now it works 😃 👍

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [23 May 2024 08:02 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/32 "2024-05-23T08:02:53Z")

</div>

Docs are also updated for the future now too: [Building Third Party Widgets | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/contributing/widgets/third-party.html#developing-locally)

---

<div class="post-metadata">

**Author:** ![greenDog](https://avatars.discourse-cdn.com/v4/letter/g/e8c25b/32.png) [@greenDog](https://discourse.nodered.org/u/greenDog)\
**Post date:** [28 May 2024 06:26 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/33 "2024-05-28T06:26:34Z")

</div>

While working on my node, a new question came up.

Is it possible to change the style of an div and a keyframe in the js-script?  
My intention is to start and end an animation with a different start and end point every time a new message arrives on the node.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [30 May 2024 00:08 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/34 "2024-05-30T00:08:13Z")

</div>

Here is a nice example of an animated water tank, based on the value of `msg.payload`. It is taken from dashboard v1.0, It should be easy to convert to v2.0;

```auto
<style>
    .wrapper{
        position: absolute;
        width: 90%;
        height: 90%;
        margin: auto;
        inset: 0;
        overflow:hidden;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
    .txt{
        position: absolute;
        width: 100%;
        top: 45%;
        text-align: center;
        font-size: xx-large;
        font-weight: 700;
        user-select: none;
    }
    .frame{
        position: absolute;
        width: 100%;
        height: 100%;
        margin: auto;
        inset: 0;
        outline: 5px solid;
        outline-offset:-5px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
    .fluid{
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        background: #00a8ff;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
</style>
<div class="wrapper">
    <div class="fluid" style="height:{{msg.payload}}%"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [30 May 2024 00:21 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/35 "2024-05-30T00:21:48Z")

</div>

Another option is to inject styling in your JS code, e.g.:

```auto
	const newStyle = msg.payload;// e.g. "border:3px solid #add8e6;";
	const myStyleId = "some-unique-id";
	const styleTags = document.getElementsByTagName("style");
	for (let i = 0; i < styleTags.length; i++)
		if (styleTags[i].id === myStyleId)
		{
			styleTags[i].remove();			
			break;
		}
	const el = document.createElement("style");
	el.type = "text/css";
	el.innerText = newStyle;
	el.id = myStyleId;
	document.head.appendChild(el);

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 June 2024 08:58 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/36 "2024-06-16T08:58:34Z")

</div>

To make this Dashboard 2.0 friendly, you'd adjust:

```auto
<div class="wrapper">
    <div class="fluid" style="height:{{msg.payload}}%"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

```

to be:

```auto
<div class="wrapper">
    <div class="fluid" :style="'height:' + msg.payload + '%'"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

```

or, if you want to use [Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) syntax:

```auto
<div class="wrapper">
    <div class="fluid" :style="`height:${msg.payload}%`"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

```

Detail on why in our docs: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [14 September 2024 08:58 UTC](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801/37 "2024-09-14T08:58:52Z")

</div>

Closed on 14 September 2024 08:58 UTC

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

[Previous page](https://discourse.nodered.org/t/create-custom-ui-node-in-dashboard-2/87801.md?page=1)