# How to create a number panel that is able to input a 7 digit number

**URL:** <https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825>\
**Category:** Dashboard\
**Created:** [23 January 2024 09:28 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825 "2024-01-23T09:28:11Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonAngel](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MoonAngel](https://discourse.nodered.org/u/MoonAngel)\
**Post date:** [23 January 2024 09:28 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/1 "2024-01-23T09:28:11Z")

</div>

Hey everyone i am a student and the company i have an internship in introduced me to node red. all of this is new to me and i feel kinda stuck haha, especially because none of my dev friends even heard about this so i had almost no one to share his wisdom with me.

anyway I feel that i kinda got the basics but i couldn't figure out a couple of things.

so basically i want to create a number panel (0 to 9) that is able to input a 7 digit number in the format of XX - XXXXX also id like a button to delete the inputs one by one for example 75-45467 becomes 75-4546  
and a button to save the number into a table, or something of that sort  
if you guys can help me with a link or something. that would be much appreciated.  
and thank you in advance 🫡🫡

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [23 January 2024 09:41 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/2 "2024-01-23T09:41:20Z")

</div>

Welcome to the forums @MoonAngel  
can I assume you are referring to the use of the Dashboard Node features?

see here:  
[node-red-dashboard (node) - Node-RED (nodered.org)](https://flows.nodered.org/node/node-red-dashboard)

---

<div class="post-metadata">

**Author:** ![MoonAngel](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MoonAngel](https://discourse.nodered.org/u/MoonAngel)\
**Post date:** [23 January 2024 09:45 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/3 "2024-01-23T09:45:05Z")

</div>

kinda but not really my supervisor wants me to create a panel that you can interact with in the dashboard itself  
and thank you for the fast reply good sir @marcus-j-davies

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [23 January 2024 09:50 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/4 "2024-01-23T09:50:30Z")

</div>

Ok,

I have moved this post to the **Dashboard** category, I am not a pro with dashboard myself - but plenty who are.

---

<div class="post-metadata">

**Author:** ![MoonAngel](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MoonAngel](https://discourse.nodered.org/u/MoonAngel)\
**Post date:** [23 January 2024 09:51 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/5 "2024-01-23T09:51:53Z")

</div>

yes sir thank you so much

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 January 2024 10:42 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/6 "2024-01-23T10:42:20Z")

</div>

There are lots of examples on the forum that you can use to build from. Search in the #Dashboard category.

for example, you could use this: [Adding `output` function to buttons designed in `template` node - #65 by Steve-Mcl](https://discourse.nodered.org/t/adding-output-function-to-buttons-designed-in-template-node/25591/65) feed the value to a join node set to length `7`.

---

<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 January 2024 14:43 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/7 "2024-01-23T14:43:15Z")

</div>

> [@MoonAngel](#):
>
> kinda but not really my supervisor wants me to create a panel that you can interact with in the dashboard itself

Can you use a ui\_form node with a text input field?

---

<div class="post-metadata">

**Author:** ![MoonAngel](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MoonAngel](https://discourse.nodered.org/u/MoonAngel)\
**Post date:** [23 January 2024 22:29 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/8 "2024-01-23T22:29:17Z")

</div>

i will check these tomorrow since its late rn haha 🫡 thank you sir

---

<div class="post-metadata">

**Author:** ![MoonAngel](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MoonAngel](https://discourse.nodered.org/u/MoonAngel)\
**Post date:** [24 January 2024 12:12 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/9 "2024-01-24T12:12:04Z")

</div>

> [@Colin](#):
>
> Can you use a ui\_form node with a text input field?

which panel should i download to find this by the way i found the ui\_control but no ui form node

---

<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:** [24 January 2024 13:12 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/10 "2024-01-24T13:12:31Z")

</div>

ui\_form is one of the node-red-dashboard nodes.

---

<div class="post-metadata">

**Author:** ![MoonAngel](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MoonAngel](https://discourse.nodered.org/u/MoonAngel)\
**Post date:** [31 January 2024 08:58 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/11 "2024-01-31T08:58:55Z")

</div>

update:

i was able to create the panel and i actually made some progress

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/a/2a34493422f70936824cb96a8b4385f29bf1736c.png)  
everything works just fine except for one thing  
when i press the edit button i want to replace the toggled item with the value that is in the text input(in this case i want to be able to replace Sn 12-36512 with Sn 12-22222 when i press the edit button nothing happens  
this is the current Flow  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/5/a56e7fc0f59c7be65201be36c634db0f47050d53.png)

and this is the editCheckedItem code

```auto
function editCheckedItem(msg) {
    const { checkedIndex, unformattedNumber } = msg.payload;

    if (checkedIndex === undefined || unformattedNumber === undefined) {
        console.error("Missing data for editing:", msg.payload);
        return; // Or handle the error differently
    }

    // Get the template's generated DOM content
    const templateContent = node.get('msg').payload.$content;

    // Find the checkbox element based on its index (adjust selector as needed)
    const checkboxElement = templateContent.querySelectorAll('input[type="checkbox"]:nth-child(2)')[checkedIndex];

    if (checkboxElement) {
        // Directly set the checked value using the unformatted number
        checkboxElement.checked = unformattedNumber; // Use unformattedNumber here
    } else {
        console.error("Invalid checkbox index:", checkedIndex); // Or handle the error differently
    }
}

```

once again i am stuck lol

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 January 2024 10:00 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/12 "2024-01-31T10:00:32Z")

</div>

A bit confusing but ..  
Are you trying to send some existing Sn code to the dashboard so you can edit it and then store after editing is complete?

---

<div class="post-metadata">

**Author:** ![MoonAngel](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MoonAngel](https://discourse.nodered.org/u/MoonAngel)\
**Post date:** [31 January 2024 10:09 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/13 "2024-01-31T10:09:53Z")

</div>

i have a number panel that can input 7 digits  
for example if i type out 1234567  
the text input shows Sn 12-34567 when i press confirm the value gets added to a table  
then i just input a different 7 digit number lets say for example Sn 11-11111 (after being in the correct form)  
(thats the format of my company devices serial number i guess?)  
i just want my edit button to replace the toggled value with the current value in the text input  
by deleting the toggled item and adding the new number in the table

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 January 2024 10:48 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/14 "2024-01-31T10:48:49Z")

</div>

I see you have tried hard.  
But isn't it more clever to validate input from that pin pad to have always correctly formatted serial number in hands?

I have an example for you prepared ..

```auto
[{"id":"f6a3dd5921436153","type":"ui_template","z":"f8b8c963bdc117f5","group":"07ca9eabfe300b52","name":"pinpad","order":2,"width":"4","height":"5","format":"<div class=\"serialNumber-widget\">\n <div class=\"serialNumbertext\">{{serialNumber}}</div>\n <div class=\"serialNumberpad\">\n <div ng-click=\"serialNumberClick($event)\">1</div>\n <div ng-click=\"serialNumberClick($event)\">2</div>\n <div ng-click=\"serialNumberClick($event)\">3</div>\n <div ng-click=\"serialNumberClick($event)\">4</div>\n <div ng-click=\"serialNumberClick($event)\">5</div>\n <div ng-click=\"serialNumberClick($event)\">6</div>\n <div ng-click=\"serialNumberClick($event)\">7</div>\n <div ng-click=\"serialNumberClick($event)\">8</div>\n <div ng-click=\"serialNumberClick($event)\">9</div>\n <div ng-click=\"serialNumberClick($event)\" class=\"control\">CLR</div>\n <div ng-click=\"serialNumberClick($event)\">0</div>\n <div ng-click=\"serialNumberClick($event)\" class=\"control\">🡄</div>\n </div>\n <div class=\"submit\" ng-click=\"submitSerialNumber()\">\n SUBMIT\n </div>\n<div>\n<style>\n .serialNumberpad-container{\n position:relative;\n display:flex;\n align-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n }\n .serialNumber-widget{\n width: 100%;\n height: 100%;\n display:grid;\n gap:4px;\n grid-template-rows:1fr 4fr 1fr;\n }\n .serialNumbertext{ \n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n font-size: large;\n font-weight: 600;\n min-height:1em;\n padding-inline: 0.5em;\n background: #a9a9a920;\n }\n .serialNumberpad{\n display:grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 4px;\n width: 100%;\n height: 100%;\n cursor:auto;\n }\n .serialNumberpad div, .submit{\n background:green;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n font-size: large;\n font-weight: 600;\n user-select:none;\n cursor:pointer;\n }\n .serialNumberpad div.control{\n background:cornflowerblue; \n }\n .submit{\n background:palevioletred;\n font-size: medium;\n font-weight: 500;\n }\n \n</style>\n<script>\n(function(scope) {\n\n scope.serialNumber = \"\" \n const delimiters = [{char:\"S\", pos:0},{char:\"n\", pos:1},{char:\" \", pos:2},{char:\"-\", pos:5}]\n const length = 7 + delimiters.length\n\n function clearSerialNumber(){\n scope.serialNumber = \"\"\n //scope.send({payload:scope.serialNumber,topic:'serialNumberpad-submit'})\n }\n\n function removeLast(){\n // it does remove last but also delimitters when needed.\n let count = -1 \n delimiters.forEach(delimiter => {\n if(scope.serialNumber.endsWith(delimiter.char)){\n count = (delimiter.char.length + 1) * -1 \n } \n })\n scope.serialNumber = scope.serialNumber.slice(0, count) \n } \n\n function checkSerialNumber(){\n // it must have correct length \n return scope.serialNumber.length == length\n }\n\n function updateSerialNumber(v){\n if(checkSerialNumber()){\n //if it has correct length, dont add more\n return\n }\n // chek if next character needs to be delimiter, if so, it will be added\n scope.serialNumber = checkDelimiters(scope.serialNumber)\n // add input from key pad\n scope.serialNumber = scope.serialNumber.concat(v)\n // chek again for delimitters \n scope.serialNumber = checkDelimiters(scope.serialNumber)\n }\n\n function checkDelimiters(s){\n // check if it is neede to add some of delimitters\n delimiters.forEach(delimiter => {\n if(s.length == delimiter.pos){\n s = s.concat(delimiter.char)\n }\n }) \n return s\n }\n\n \n\n scope.serialNumberClick = function(e){\n // input from key pad elements\n let v = e.target.innerHTML\n if(v == \"CLR\"){\n clearSerialNumber()\n }\n else if(v == \"🡄\"){\n removeLast()\n }\n else{\n updateSerialNumber(v)\n \n } \n }\n scope.submitSerialNumber = function(){\n if(!checkSerialNumber()){\n //don't send if the number is not complete \n return\n } \n scope.send({payload:scope.serialNumber,topic:'serialNumberpad-submit'})\n }\n \n\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"pinpad-container","x":490,"y":380,"wires":[["354adbba6efd0aa1"]]},{"id":"354adbba6efd0aa1","type":"debug","z":"f8b8c963bdc117f5","name":"SERIAL","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":380,"wires":[]},{"id":"07ca9eabfe300b52","type":"ui_group","name":"Pinpad","tab":"62083694d0eab7ca","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

It doesn't take any input (it's for you to add and figure out what to do with the input then) but happily creates correctly formatted string when you use the keypad.

---

<div class="post-metadata">

**Author:** ![MoonAngel](https://avatars.discourse-cdn.com/v4/letter/m/b5a626/32.png) [@MoonAngel](https://discourse.nodered.org/u/MoonAngel)\
**Post date:** [31 January 2024 20:37 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/15 "2024-01-31T20:37:10Z")

</div>

the thing is different devices have different serial number so if a Tech wants to change a device i want him to be able to replace the old s number with the new one. that is why

---

<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:** [30 April 2024 20:37 UTC](https://discourse.nodered.org/t/how-to-create-a-number-panel-that-is-able-to-input-a-7-digit-number/84825/16 "2024-04-30T20:37:59Z")

</div>

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