Skip to content

Commit 78ce134

Browse files
committed
Add docs on typedInput property handling
1 parent 4bcb09d commit 78ce134

File tree

1 file changed

+75
-1
lines changed

1 file changed

+75
-1
lines changed

docs/api/ui/typedInput/index.md

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ chosen, including options for string, number and boolean types.
1616
- [Events](#events)
1717
- [Types](#types)
1818
- [Examples](#examples)
19-
19+
- [Runtime handling of typed values](#runtime-handling-of-typed-values)
2020

2121
<div class="widget">
2222
<div style="clear:both">
@@ -125,6 +125,34 @@ $(".input").typedInput({
125125
});
126126
```
127127

128+
When used in a Node-RED node, this value can be stored as a node property by adding
129+
an entry for it in the node's `defaults` object. This ensures the type is saved
130+
along with the value in the node configuration.
131+
132+
```html
133+
<div class="form-row">
134+
<label>Example:</label>
135+
<input type="text" id="node-input-myField">
136+
<input type="hidden" id="node-input-myFieldType">
137+
</div>
138+
```
139+
```javascript
140+
RED.nodes.registerType('example', {
141+
defaults: {
142+
myField: { value: "" },
143+
myFieldType: { value: "str" }
144+
},
145+
...
146+
oneditprepare: function () {
147+
$("#node-input-myField").typedInput({
148+
typeField: "#node-input-myFieldType"
149+
});
150+
}
151+
})
152+
```
153+
154+
155+
128156
### Methods
129157

130158
<a name="methods-type"></a>
@@ -369,6 +397,52 @@ $("#node-input-example5").typedInput({type:"fruit", types:[{
369397
<div class="red-ui-editor"><input type="text" id="node-input-example5"></div>
370398

371399

400+
### Runtime handling of typed values
401+
402+
Due to the way the `typedInput` enhances a regular HTML `<input>`, its value is
403+
stored as a string. For example, booleans are stored as `"true"` and `"false"`.
404+
405+
When stored as node properties, it is necessary for the runtime part of the node
406+
to parse the string to get the typed value.
407+
408+
A utility function is provided to handle the built-in types provided by the TypedInput.
409+
410+
```javascript
411+
RED.util.evaluateNodeProperty(value, type, node, msg, callback)
412+
```
413+
414+
Property | Type | Required | Description
415+
---------|---------|----------|-------------
416+
`value` | string | yes | The property to evaluate
417+
`type` | string | yes | The type of the property
418+
`node` | Node | yes, for certain types | The node evaluating the property
419+
`msg` | Message Object | yes, for certain types | A message object to evaluate against
420+
`callback` | Callback | yes, for `flow`/`global` types | A callback to receive the result
421+
422+
For most types, the function can be used synchronously without providing a callback.
423+
424+
```javascript
425+
const result = RED.util.evaluateNodeProperty(value, type, node)
426+
```
427+
428+
For `msg` type, the message object should also be provided:
429+
430+
```javascript
431+
const result = RED.util.evaluateNodeProperty(value, type, node, msg)
432+
```
433+
434+
To handle `flow` and `global` context types, the node needs to be provided as well as
435+
a callback function due to the asynchronous nature of context access:
436+
437+
```javascript
438+
RED.util.evaluateNodeProperty(value, type, node, msg, (err, result) => {
439+
if (err) {
440+
// Something went wrong accessing context
441+
} else {
442+
// Do something with 'result'
443+
}
444+
})
445+
```
372446

373447

374448
<script src="/js/jquery-ui.min.js"></script>

0 commit comments

Comments
 (0)