# Need Help Creating Dashboard "Input Variable" waiting for user to type in a "Numeric Value"?

**URL:** <https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661>\
**Category:** Dashboard\
**Created:** [17 March 2023 10:52 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661 "2023-03-17T10:52:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![damica51](https://avatars.discourse-cdn.com/v4/letter/d/eb8c5e/32.png) [@damica51](https://discourse.nodered.org/u/damica51)\
**Post date:** [17 March 2023 10:52 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661/1 "2023-03-17T10:52:23Z")

</div>

I've been working with the Node-Red-Dashboard and I can't figure out how to make a "Blank Numeric Input" box waiting for the user to type in a value?

Also is there a better way of doing object arrangements so the display looks clean and neat?  
Tutorial?, Examples?

---

<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:** [20 March 2023 12:32 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661/2 "2023-03-20T12:32:41Z")

</div>

It would probably help if you were to share a picture of what you want things to look like.

---

<div class="post-metadata">

**Author:** ![damica51](https://avatars.discourse-cdn.com/v4/letter/d/eb8c5e/32.png) [@damica51](https://discourse.nodered.org/u/damica51)\
**Post date:** [20 March 2023 13:55 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661/3 "2023-03-20T13:55:31Z")

</div>

![ExampleNR](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/788159c58eae35a515e9a5bfa2f00a77b0a06d46.jpeg)

I am trying to convert this Plc/Hmi program over to Node Red. But the NR Dashboard leaves a lot of holes for a workable solution. (In my opinion).

This is my working screen, you just tap where is says enter value and a 10 digit keypad pops up.

I got most things working but I can't get a good looking/workable dashboard?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [20 March 2023 16:18 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661/4 "2023-03-20T16:18:41Z")

</div>

You will need to join the buttons and text inputs(set to numeric), then use a switch node to route start and stop  
e.g.

```auto
[{"id":"f069550701925cdb","type":"ui_text_input","z":"65617ffeb779f51c","name":"","label":"start time","tooltip":"","group":"2d4fe667.28f8ba","order":20,"width":0,"height":0,"passthru":false,"mode":"number","delay":"0","topic":"start_time","sendOnBlur":true,"className":"","topicType":"str","x":680,"y":4620,"wires":[["8ebf018954350d48"]]},{"id":"8ebf018954350d48","type":"join","z":"65617ffeb779f51c","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"3","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":870,"y":4660,"wires":[["e1513822ced47e2d"]]},{"id":"202a2c0dc07d67b7","type":"ui_text_input","z":"65617ffeb779f51c","name":"","label":"stop time","tooltip":"","group":"2d4fe667.28f8ba","order":21,"width":0,"height":0,"passthru":false,"mode":"text","delay":"0","topic":"stop_time","sendOnBlur":true,"className":"","topicType":"str","x":680,"y":4660,"wires":[["8ebf018954350d48"]]},{"id":"175f7bf017431ca0","type":"ui_button","z":"65617ffeb779f51c","name":"","group":"2d4fe667.28f8ba","order":22,"width":0,"height":0,"passthru":false,"label":"start","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"1","payloadType":"num","topic":"start","topicType":"str","x":690,"y":4700,"wires":[["8ebf018954350d48"]]},{"id":"bb2d699ef245e30c","type":"ui_button","z":"65617ffeb779f51c","name":"","group":"2d4fe667.28f8ba","order":23,"width":0,"height":0,"passthru":false,"label":"stop","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"0","payloadType":"num","topic":"stop","topicType":"str","x":690,"y":4740,"wires":[["8ebf018954350d48"]]},{"id":"e1513822ced47e2d","type":"switch","z":"65617ffeb779f51c","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"start","vt":"str"},{"t":"eq","v":"stop","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":1010,"y":4660,"wires":[["6c468a1d2f4d9e8e"],["9e05c9ae603d2a4d"]]},{"id":"6c468a1d2f4d9e8e","type":"debug","z":"65617ffeb779f51c","name":"start","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1090,"y":4600,"wires":[]},{"id":"9e05c9ae603d2a4d","type":"debug","z":"65617ffeb779f51c","name":"stop","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1090,"y":4720,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [20 March 2023 18:13 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661/5 "2023-03-20T18:13:08Z")

</div>

That is why node-red-contrib-uibuilder exists 😁

If you have some HTML already, it should be pretty easy to convert to using uibuilder.

Just make sure that any element on the page that you want to update from Node-RED has a unique HTML id or some other way of uniquely selecting it. Then you can use the `uib-update` node to change text, CSS class or styles, etc very simply.

---

<div class="post-metadata">

**Author:** ![damica51](https://avatars.discourse-cdn.com/v4/letter/d/eb8c5e/32.png) [@damica51](https://discourse.nodered.org/u/damica51)\
**Post date:** [23 March 2023 01:41 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661/6 "2023-03-23T01:41:20Z")

</div>

I've, been looking at UIBUILDER but still can't figure out how to make a numeric popup so user could input numeric variable.

This flow will be running on a Raspberry Pi - without keyboard or mouse just a 5" touch screen.

---

<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:** [23 March 2023 02:00 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661/7 "2023-03-23T02:00:44Z")

</div>

You need a standard `<input>` tag.

> **[\- HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)**
>
> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

It has loads of options for fine control.

The [`inputmode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#inputmode) attribute will steer mobile browsers to give a numeric-only popup keyboard.

If you need to always show a keyboard even on desktop browsers, I think you will need to create your own keypad display, probably using buttons with a CSS grid layout. Though you should note that it probably won't be very friendly for people with accessibility needs.

---

<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:** [22 April 2023 02:01 UTC](https://discourse.nodered.org/t/need-help-creating-dashboard-input-variable-waiting-for-user-to-type-in-a-numeric-value/76661/8 "2023-04-22T02:01:30Z")

</div>

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