# TypedInput Widget

**URL:** <https://discourse.nodered.org/t/typedinput-widget/6894>\
**Category:** Developing Nodes\
**Created:** [16 January 2019 22:43 UTC](https://discourse.nodered.org/t/typedinput-widget/6894 "2019-01-16T22:43:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![cinhcet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cinhcet/32/438_2.png) [@cinhcet](https://discourse.nodered.org/u/cinhcet)\
**Post date:** [16 January 2019 22:43 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/1 "2019-01-16T22:43:34Z")

</div>

Hi,

Node-RED provides a nice editor widget for selecting and defining for example payload types as strings, numbers, JSON (with editor) etc.

In case you want to do it yourself, here a little example node.

js file

```auto
module.exports = function(RED) {
  "use strict";

  function simpleChange(config) {
    RED.nodes.createNode(this, config);
    var node = this;
    node.config = config;
    
    node.on('input', function(m) {
      m.payload = RED.util.evaluateNodeProperty(node.config.changeValue, node.config.changeValueType, node); 
      if(node.config.topic !== '') {
        m.topic = node.config.topic;
      }
      node.send(m);
    });
  }
  RED.nodes.registerType("simpleChange", simpleChange);
}

```

html

```auto
<script type="text/javascript">
  RED.nodes.registerType('simpleChange', {
    category: 'function',
    color: '#2176F3',
    defaults: {
      changeValue: {
        value: true, 
        required: true, 
        validate: RED.validators.typedInput('changeValueType')
      }, 
      changeValueType: {
        value: 'bool'
      },
      topic: {
        value: ''
      },     
      name: {
        value: ''
      }
    },
    inputs: 1,
    outputs: 1,
    icon: "hash.png",
    label: function() {
      return this.name || '';
    },
    oneditprepare: function() {
      $('#node-input-changeValue').typedInput({
        default: 'bool',
        typeField: $("#node-input-changeValueType"),
        types: ['bool','str','num','json','bin']
      });
    }
  });
</script>

<script type="text/x-red" data-template-name="simpleChange">
  <div class="form-row">
    <label for="node-input-changeValue">Change to</label>
    <input type="text" id="node-input-changeValue" style="width:70%">
    <input type="hidden" id="node-input-changeValueType">
  </div>
  <div class="form-row">
    <label for="node-input-topic">Topic</label>
    <input type="text" id="node-input-topic">
  </div>
  <div class="form-row">
    <label for="node-input-name"><i class="icon-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
  </div>
</script>

```

---

<div class="post-metadata">

**Author:** ![ScottChapman](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scottchapman/32/4838_2.png) [@ScottChapman](https://discourse.nodered.org/u/ScottChapman)\
**Post date:** [25 January 2019 18:32 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/2 "2019-01-25T18:32:49Z")

</div>

Thanks, that's actually really useful.

Would you mind explaining a little about what's actually going on here (and what the result looks like)?  
I'm not really clear what you are doing in the validator, or with the hidden field.

---

<div class="post-metadata">

**Author:** ![cinhcet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cinhcet/32/438_2.png) [@cinhcet](https://discourse.nodered.org/u/cinhcet)\
**Post date:** [25 January 2019 19:11 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/3 "2019-01-25T19:11:22Z")

</div>

I also just baked this together from existing nodes, so hopefully I do not write garbage. In this case, one of the Node-RED creators has to correct me.

So basically there is an input field `<input type="text" id="node-input-changeValue">` with id `node-input-changeValue`. This is where the actual value is typed into. However, if you want to use the built in editor widget for changing the type, you add this `<input type="hidden" id="node-input-changeValueType">` field to it, which will create the dropdown and also for example the json editor etc.  
In order to enable the functionality, you need the `typeInput` method, which is invoked when the node property editor is opened (oneditprepare). `default: 'bool'` says that the default type is a boolean, I also added `changeValueType: { value: 'bool' },` although I am not certain if this is necessary (seems a bit redundant). The property `typeField: $("#node-input-changeValueType")` specifies the id of the hidden input. The `types` property allows you to state which types are available to choose from. There are more available, look for example in the inject node src.

The result will look like in the inject node, where you can select a type of property you want the user to type into your input field. If you choose json for example, then additionally there will be a button which allows you to open the json editor.

`validate: RED.validators.typedInput('changeValueType')` is a validator that checks if the typed in value is of valid selected type.

Finally, what you type in will be availbale in the `changeValue` property, represented as a string. To convert it to the type you have selected, there is the util function `RED.util.evaluateNodeProperty(node.config.changeValue, node.config.changeValueType, node);`

Hope that helps.  
If you have additonal questions, please ask, but probably Nick has to answer them 🙂

---

<div class="post-metadata">

**Author:** ![cinhcet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cinhcet/32/438_2.png) [@cinhcet](https://discourse.nodered.org/u/cinhcet)\
**Post date:** [25 January 2019 19:15 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/4 "2019-01-25T19:15:04Z")

</div>

if you only want json, you can set `types` to `['json']`and remove `typeField: $("#node-input-changeValueType")` and also the hidden input.

---

<div class="post-metadata">

**Author:** ![ScottChapman](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scottchapman/32/4838_2.png) [@ScottChapman](https://discourse.nodered.org/u/ScottChapman)\
**Post date:** [26 January 2019 22:09 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/5 "2019-01-26T22:09:39Z")

</div>

OK, cool. thanks, I'll give it a shot.

---

<div class="post-metadata">

**Author:** ![DenisMtfl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/denismtfl/32/39115_2.png) [@DenisMtfl](https://discourse.nodered.org/u/DenisMtfl)\
**Post date:** [19 March 2021 11:35 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/6 "2021-03-19T11:35:10Z")

</div>

Hi there, so when i select "msg" as desired type then i have to insert an if of switch in the "node.on" method so i set the msg.payload to the desired value of property? Or is there a simpler way?

---

<div class="post-metadata">

**Author:** ![nacartwright](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nacartwright/32/41906_2.png) [@nacartwright](https://discourse.nodered.org/u/nacartwright)\
**Post date:** [18 May 2021 12:37 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/7 "2021-05-18T12:37:22Z")

</div>

I'm a wee bit stuck here. I have a node that I added the typeField to, however, the typeField never saves. Thoughts?

---

<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:** [18 May 2021 12:40 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/8 "2021-05-18T12:40:28Z")

</div>

> [@nacartwright](#):
>
> I have a node that I added the typeField to, however, the typeField never saves. Thoughts?

Do you have a `default` entry that matches the name of the widget?

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

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

Alternatively, you can set the value in `oneditsave()`

---

<div class="post-metadata">

**Author:** ![amodelbello](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/amodelbello/32/14668_2.png) [@amodelbello](https://discourse.nodered.org/u/amodelbello)\
**Post date:** [6 August 2021 03:18 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/10 "2021-08-06T03:18:26Z")

</div>

Pretty late here but I just ran up against the exact same problem and figured it out. You need to create a default for the "type" field as well as the value field in your defaults defined in the html file. So in @cinhcet 's example above it's this bit that's important:

```auto
changeValue: {
  value: true, 
  required: true, 
  validate: RED.validators.typedInput('changeValueType')
}, 
changeValueType: {
  value: 'bool'
},

```

My problem was I had the `changeValue` field but not the `changeValueType` field so the type was never saving. It's also not very clear from the documentation that this is necessary although it seems obvious after I figured this out. Hope this helps anyone who experiences similar difficulty.

---

<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:** [20 August 2021 03:18 UTC](https://discourse.nodered.org/t/typedinput-widget/6894/11 "2021-08-20T03:18:52Z")

</div>

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