After researching code, reading docs and trial & error. I think I finally have a handle on Select Box. I am sharing my discovery for others and to start discussion on what changes could be made (documentation or code) to Select Box.
<style>
.choose-text .red-ui-typedInput-option-label:empty::after {
content: "-- Choose an Option --";
}
</style>
<script type="text/html" data-template-name="example">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<!-- Class 'choose-text' for the default Select Box text -->
<div class="form-row choose-text">
<label for="node-input-multiple"><i class="fa fa-id-times"></i> Multiple</label>
<input type="text" id="node-input-multiple">
<input type="hidden" id="node-input-multiple-type">
</div>
<!-- Class 'choose-text' for the default Select Box text -->
<div class="form-row choose-text">
<label for="node-input-string"><i class="fa fa-id-file-text"></i> String</label>
<input type="text" id="node-input-string">
</div>
<!-- Class 'choose-text' for the default Select Box text -->
<div class="form-row choose-text">
<label for="node-input-number"><i class="fa fa-id-hashtag"></i> Number</label>
<input type="text" id="node-input-number">
</div>
<!-- Class 'choose-text' for the default Select Box text -->
<div class="form-row choose-text">
<label for="node-input-boolean"><i class="fa fa-id-bold"></i> Boolean</label>
<input type="text" id="node-input-boolean">
</div>
</script>
<script type="text/html" data-help-name="example">
<p>Used to test SelectBox.</p>
</script>
<script type="text/javascript">
RED.nodes.registerType('example', {
category: 'function',
color: '#000000',
defaults: {
name: { value: '' },
multiple: { value: '' },
multipleType: { value: '' },
string: { value: '' },
number: { value: 0 },
boolean: { value: true }
},
inputs: 1,
outputs: 1,
label() {
return this.name || 'SelectBox Example'
},
paletteLabel() {
return this.name || 'SelectBox Example'
},
icon: 'font-awesome/fa-exclamation-circle',
oneditprepare() {
const node = this
const { string, boolean, number, multiple, multipleType } = node
$('#node-input-string').typedInput({
// It is important to have a value for type and that the
// array types value has the same otherwise you can have
// redrawing issues.
type: 'string',
types: [
{
// Best to match property type above
value: 'string',
// Sets the default value but only works if you
// are working with strings
default: string,
options: [
{
value: 'foo',
label: 'Foo'
},
{
value: 'bar',
label: 'Bar'
}
]
}
]
// Set the current value
}).typedInput('value', string)
$('#node-input-number').typedInput({
type: 'number',
types: [
{
value: 'number',
// Should set the default value but only works if you
// are working with strings will not accept any type.
default: Number(number),
options: [
{
value: 1,
label: 'One'
},
{
value: 2,
label: 'Two'
}
]
}
]
// Sets the current value will only work if same type
}).typedInput('value', Number(number))
$('#node-input-boolean').typedInput({
type: 'boolean',
types: [
{
value: 'boolean',
// Should set the default value but only works if you
// are working with strings will not accept any type.
default: boolean === "true",
options: [
{
value: true,
label: 'True'
},
{
value: false,
label: 'False'
}
]
}
]
// Sets the current value will only work if same type
}).typedInput('value', boolean === "true")
// This is an experiment if there are multiple types (see image).
$('#node-input-multiple').typedInput({
default: multipleType, // This defalut refers to the 'type' value.
type: 'multiple',
types: [
{
value: 'multiple',
default: multiple, // This defalut refers to the 'options' value.
options: [
{
value: 'ant',
label: 'Ant'
},
{
value: 'bear',
label: 'Bear'
}
]
},
{
value: 'anothermultiple',
default: multiple, // This defalut refers to the 'options' value.
options: [
{
value: 'cat',
label: 'Cat'
},
{
value: 'dog',
label: 'Dog'
}
]
}
],
typeField: '#node-input-multiple-type'
}).typedInput('value', multiple)
},
oneditsave() {
const node = this
node.multipleType = $('#node-input-multiple-type').val()
}
})
</script>
I think it would be nice if default worked with a type other then string and since the value is returned as a string no mater the type, I feel, you should be able to set with a string value.
I did not have a use for the Multiple Example I just noticed the functionality and so included what I had discovered.
