# Ui Builder Script to get output

**URL:** <https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [19 February 2023 02:16 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407 "2023-02-19T02:16:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [19 February 2023 02:16 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/1 "2023-02-19T02:16:28Z")

</div>

Hello,

today i tryed the Ui builder and i have some nice Buttons that i tryed to use.  
The Frontend works great but can someone help me how i send something to node red when i push a Button and how i can switch a Button from Node Red on and off?

Thx in Advance

[html.txt](https://discourse.nodered.org/uploads/short-url/cpk6M83osuohGsd2nPtiX2WIPc.txt) (2.0 KB)

[css.txt](https://discourse.nodered.org/uploads/short-url/3h78I0iiu8XGpJmZKhdyxaQRFYl.txt) (2.2 KB)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 February 2023 04:36 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/2 "2023-02-19T04:36:50Z")

</div>

> [@Worscht](#):
>
> how i send something to node red when i push a Button

**index.js** file :

```auto
/* eslint-disable strict */
/* jshint browser: true, esversion: 6, asi: true */
/* globals uibuilder */
// @ts-nocheck

/** Minimalist code for uibuilder and Node-RED */
"use strict";

// run this function when the document is loaded
window.onload = function () {
  // Start up uibuilder - see the docs for the optional parameters
  uibuilder.start();

  // select all buttons
  const buttons = document.querySelectorAll(".am__input");

  // add click event to all buttons
  buttons.forEach((elem) => {
    elem.addEventListener("click", (event) => {

      uibuilder.send({
        topic: `${event.target.id}`,
        payload: event.target.checked,
      });

    });
  });

  // Listen for incoming messages from Node-RED
  uibuilder.onChange("msg", function (msg) {
    console.info("[indexjs:uibuilder.onChange] msg received from Node-RED server:", msg);
  });
};

```

**Explanation:**

1. select all buttons of **.am\_\_input** class with querySelectorAll
2. loop through all the elements and add a click event listener to them that
3. executes a dynamic uibuilder send command with the id of the button as a topic and its state (true/false) if its checked or not

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d8ade1573c43de2f4ba274d8bef07a0e308e9d90.png)

ps. something similar can be done for the reverse .. receiving a msg in uibuilder.onChange to toggle the button

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 February 2023 12:32 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/3 "2023-02-19T12:32:48Z")

</div>

Couple of things to add to that.

Firstly, if using uibuilder v6, please think about switching to the "new" client library. Then you no longer need to load the [socket.io](http://socket.io) library nor do you need `uibuilder.start()` and you get access to all the new goodies coming along. Including the improved version of `uibuilder.eventSend(event)`.

Secondly, as indicated above, rather than attaching a standard `uibuilder.send`, you can use eventSend which gives you extended information such as whether the user was holding down a modifier key (ctrl, shift, ...) when they pressed the button, what page name it came from, etc. Saves you a whole bunch of work.

> [@Worscht](#):
>
> The Frontend works great but can someone help me how i send something to node red when i push a Button

Have you looked at the examples that are included when you install uibuilder? Worth taking a look at. Also have a look through the standard templates since some of them include buttons already pre-configured for you.

As Andy has indicated, all you need is to add an `onclick` event handler that either is set to `uibuilder.eventSend(event)` or set to a function of your own that calls `uibuilder.send({....})`.

> [@Worscht](#):
>
> how i can switch a Button from Node Red on and off?

To do this, you need to change the button's `disabled` property to true/false.

```auto
uibuilder.onChange('msg', (msg) => {
   // You need something in the msg to identify what to do
   if (msg.topic === 'chg-button1') {
      // Assumes that your button has id="button1"
      $('#button1').disabled = msg.payload
   }
})

```

Final note - if you were to use the new client library `uibuilder.iife.min.js` in place of the older `uibuilderfe.min.js`, you could also make use of the low-code capabilities. In that case, you can send a special message from Node-RED without the need for any code in the front end. For example, this should disable a button.

```auto
msg._ui = [
    {
        "method": "update",
        "components": [
            {
                // The type prop lets you use a CSS Selector, this will disable all buttons.
                // Alternatively set to `#myid` or some more complex selector as needed.
                "type": "button",
                "properties": {
                    "disabled": true
                }
            }
        ]
    }
]

```

Obviously, you could set that up with a simple change node set to JSONata can make the true/false part taken from payload: `"disabled": payload`.

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [19 February 2023 15:53 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/4 "2023-02-19T15:53:33Z")

</div>

@UnborN @TotallyInformation

Thx for the Help.

with that index.js it is Working and i was albe to use it also on a slider that he gives out the value between 0-100

With the new Library i got some glitches in my css need to look why that happens.

But iam not able to trigger the Slider or Button from Node Red.

can u help me with an Example?

The Sliders Id is "Brighness" an i also used class="am\_\_input"

When i wanne set the Slider now to 80 do i need a function node where i put the Id and the Value or where can i send the Value to the uibuilder ?

Here is the Slider Hmtl/CSS/JS:

[html.txt](https://discourse.nodered.org/uploads/short-url/eYbBcrY3irlQBE4gEwFcuNVucOp.txt) (1.1 KB)  
[css.txt](https://discourse.nodered.org/uploads/short-url/60ayoZTPGPBwblpNKQFfMyYUKML.txt) (2.1 KB)  
[js.txt](https://discourse.nodered.org/uploads/short-url/b7SdaFkDxlJHfUDyKWplXnqyaZ8.txt) (958 Bytes)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 February 2023 16:58 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/5 "2023-02-19T16:58:29Z")

</div>

> [@Worscht](#):
>
> With the new Library i got some glitches in my css need to look why that happens

Ah, it might be forcing a load of an extra CSS file - check your network tab in browser dev tools for a CSS file load you didn't expect. I can't remember whether I fixed that in v6.0 or not. I thought I had though.

> [@Worscht](#):
>
> But iam not able to trigger the Slider or Button from Node Red.

To change any input tag from node-red using the new client library, you can use the `msg._ui` low-code feature. To change your specific slider, this should work. Send a message with msg.\_ui set to this:

```auto
[
    {
        "method": "update",
        "components": [
            {
                "id": "Brightness",
                "properties": {
                    "value": 80
                }
            }
        ]
    }
]

```

No client-side code needed. To make it easy to set to any value based on the payload of an incoming message, you can use a change node. Try this partial flow:

```auto
[{"id":"29515e346307ce01","type":"change","z":"c51f51da7ee02d68","name":"","rules":[{"t":"set","p":"_ui","pt":"msg","to":"[\t {\t \"method\": \"update\",\t \"components\": [\t {\t \"id\": \"Brightness\",\t \"properties\": {\t \"value\": payload\t }\t }\t]\t }\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":2040,"wires":[["59ced185ee899b64"]]},{"id":"233719e10e85b81b","type":"inject","z":"c51f51da7ee02d68","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"80","payloadType":"num","x":190,"y":2040,"wires":[["29515e346307ce01"]]}]

```

```auto

```

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [19 February 2023 18:26 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/6 "2023-02-19T18:26:11Z")

</div>

> [@TotallyInformation](#):
>
> uibuilder.iife.min.js

Ah Thx a lot that Works fine.

When i use the new Library i find this css File that did not show up with the Old one:

![2css](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c9fbecde414a11b6f4bf648dcd1502a855562b1.png)

uib-brand.css

I guess i cant do anything agianst that behavior?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 February 2023 18:43 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/7 "2023-02-19T18:43:34Z")

</div>

> [@TotallyInformation](#):
>
> check your network tab in browser dev tools for a CSS file load you didn't expect. I can't remember whether I fixed that in v6.0 or not. I thought I had though.

it seems to be loading those uib css files even if an existing user index.css is present

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

i remember you made some fixes for an [issue](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/184) i had with the `loadStylesheet: false` option .. dont know if its related

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 February 2023 18:49 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/8 "2023-02-19T18:49:21Z")

</div>

> [@Worscht](#):
>
> uib-brand.css
> 
> I guess i cant do anything agianst that behavior?

Just check to make sure that you aren't manually loading that in the `index.css` file - it may still contain the line: `@import url("./uib-brand.css");`. If it does, comment it out.

Otherwise, the quickest workaround would be to copy the `front-end/uibuilder.iife.min.js` file from the v6.1.0 branch on GitHub to your installed version of uibuilder.

What is supposed to happen is that if you haven't loaded any CSS at all, the uibuilder client will auto-load the brand-css file.

[node-red-contrib-uibuilder/uibuilder.module.js at main · TotallyInformation/node-red-contrib-uibuilder (github.com)](https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/src/front-end-module/uibuilder.module.js#L1877-L1886)

If you put `uibuilder.logLevel = 3` at the start of your index.js file, you should be able to spot what is happening by searching for the log messages shown in the link above.

Hopefully it is just your index.css file loading the brand css. If not, let me know and I'll see if I can get a bug-fix release out for v6.0.

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [19 February 2023 19:34 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/9 "2023-02-19T19:34:52Z")

</div>

I cleared the CSS File completly before Adding the new CSS for the Buttons.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 February 2023 21:03 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/10 "2023-02-19T21:03:38Z")

</div>

Sorry to mess you about but can you try putting each of these two commands into your browser's dev tools console for the page please and let me know what they output?

```auto
document.styleSheets.length

```

```auto
document.styleSheets[0].cssRules.length

```

Also, try putting a dummy style into the index.css file, something like:

```auto
.mydummy {color:red;}

```

will do it.

That would - should - take the `document.styleSheets[0].cssRules.length` to \>0 which should stop the brand css from loading.

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [19 February 2023 21:18 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/11 "2023-02-19T21:18:14Z")

</div>

> [@TotallyInformation](#):
>
> `document.styleSheets[0].cssRules.length`

Like that ? or where do i need to put it ?

Also theres a failure.

 ![log](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b38e787e274f11cdb4e90d59010f7364f51e4492.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 February 2023 21:58 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/12 "2023-02-19T21:58:53Z")

</div>

Well interesting. Thanks for that. But it is saying that it ISN'T loading that stylesheet! But of course, it is!

I've now had a chance to check on my test systems. I can see that the problem is still existing in v6.0 but has been fixed in the upcoming v6.1

So, here is the cheeky workaround. 😲

Create a completely blank new css file in the same folder as `index.css` and load it in your `index.html.

I did this all from the uibuilder node. First I created an empty `index1.css` file  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3a257aae003cd821f66f680f113d3f072efa266d.png)

Then I loaded it in the html

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/dada8385d18286bd32a78775a499158bbdec7f12.png)

That will do the trick and it really won't impact your app. You will be able to tidy it up when v6.1 is out.

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [19 February 2023 22:16 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/13 "2023-02-19T22:16:26Z")

</div>

Yes like that it Works, thx a Lot for all the Help !

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [26 February 2023 02:04 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/14 "2023-02-26T02:04:40Z")

</div>

Hi, i just run in to an Problem.

The Slider iam Using, Today i had some Time and i wanted to integrate it to my Dashboard and then i find out that It wont work with my Touch Display. I have an Little Pc something like an Nuc that runs Debian 11 with an Touch Monitor where My Dasboard is running.

When i run the Site with the Silder and i touch on it it doesnt Work but when i Click on it with my Mouse it Works and gives an output to Node Red. I also have an Windows PC where it Works with my Mouse and on my Android Pghone it also doesnt Work with the Touch Funktion.

Do i need to set something special in the Script that it is useable with the touch funkion?

Edit:

I use IO Broker and embedded the Slider there in a other Site, can that cause the Problem?  
Before i always used this Method for html/css for Node Red and there it always worked like that

> [Front-end Website with Node-RED: Example Form (flow) - Node-RED](https://flows.nodered.org/flow/1bffe6808d37bd96cce283939983e758)

Edit 2:

Ok it sems the Problem is the Slider with the other Html/Css Nodes i got the same Problem

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 February 2023 11:13 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/15 "2023-02-26T11:13:01Z")

</div>

> [@Worscht](#):
>
> The Slider iam Using, Today i had some Time and i wanted to integrate it to my Dashboard and then i find out that It wont work with my Touch Display. I have an Little Pc something like an Nuc that runs Debian 11 with an Touch Monitor where My Dasboard is running.

Just to be clear - are you using a uibuilder page embedded into a Node-RED Dashboard? If so, have you tried the page stand-alone?

> [@Worscht](#):
>
> I use IO Broker and embedded the Slider there in a other Site, can that cause the Problem?

I'm sorry, but I'm not following that. What is "IO Broker"?

> [@Worscht](#):
>
> Ok it sems the Problem is the Slider with the other Html/Css Nodes i got the same Problem

I think you will need to share some code.

uibuilder itself does not do any special handling for touch. Some of the examples and templates have an on-click handler as an example for a button. But if you are using a slider on a uibuilder page with v6.0, no special touch handlers are defined - it would be down to whatever your browser does.

However, I believe that Dashboard, which uses AngularJS, does do some touch handling. So maybe an embedded page in Dashboard might inherit something?

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [26 February 2023 16:14 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/16 "2023-02-26T16:14:07Z")

</div>

So now i found out this behavior only apears in Chromium Browser when i use Firefox it works normaly.

Its rly weird since when i push on it with my Finger the slider is moving like it should but thers just no output to NodeRed , but when i use my Mouse and click on it i get an output.

I cheked it with the embededd Page and also i loaded the Slider diretcly in Chromium same result.

[flows (6).json](https://discourse.nodered.org/uploads/short-url/8ORIpNA4jlfcTeVL2KvN9XaKyRL.json) (4.8 KB)

This is the Code for the Slider but i think thats a Problem that Chromium got.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 February 2023 18:16 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/17 "2023-02-26T18:16:35Z")

</div>

Hi, can you reply to my other questions? That way, we may be able to get to the bottom of it. Thanks.

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [26 February 2023 19:15 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/18 "2023-02-26T19:15:17Z")

</div>

> Just to be clear - are you using a uibuilder page embedded into a Node-RED Dashboard? If so, have you tried the page stand-alone?

> I'm sorry, but I'm not following that. What is "IO Broker"?

Not an Node Red Dashboard but an Dasboard from IoBroker what is basicly something like Home Assistant.

I tryed it Standalone and it behaves the same like embendded.

Iam Using Chromium on Debian 11 i also upgraded the system today.

On my Android phone it also doesnt Work, but i tryed on an I phone just now with Safari and Google Chrome and there it is working. Standalone or emedded both works

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 February 2023 19:46 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/19 "2023-02-26T19:46:45Z")

</div>

OK, thanks for that, makes it a bit clearer but not sure what is going on.

> [@Worscht](#):
>
> The Slider iam Using

Is that not a standard input range field? I just built a quick form with an input range field and it worked fine on Edge for Android which is based on Chromium.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd2fb81ac30ca4d0f172a5581470c0ef907b3aa2.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4cdc44b9c34f95164ecc8509ea77735dba465e0b.png)

---

<div class="post-metadata">

**Author:** ![Worscht](https://avatars.discourse-cdn.com/v4/letter/w/8797f3/32.png) [@Worscht](https://discourse.nodered.org/u/Worscht)\
**Post date:** [26 February 2023 22:08 UTC](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407/20 "2023-02-26T22:08:35Z")

</div>

i tryed now with Opera Edge Chromium and Firefox it only works with Firefox.

and you get the value output in Node Red? can you show me the Html/Css/Js from your simple slider so i can check if that works here.

[Next page](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407.md?page=2)