Example of boolean input type in node html file?

General
1

Developing a node, where I need to have boolean value selected. I have seen this in a few nodes, and in various places in NR editor and such. But not sure where a 'good' example of implementing this is? I figure it is just a limited drop down list? Thanks.

2

If you use the typed inputs feature then you can tell it you want a boolean value and it will happen automatically. https://nodered.org/docs/api/ui/typedInput/

3

What I need is just a simple user select-able true/false control in the node edit view.

I saw the documentation you reference above, read through it, but not seeing how the entire thing comes together. This...

{
    value:"bool",
    label:"boolean",
    icon:"red/images/typedInput/bool.png",
    options:["true","false"]
}

Seems like exactly what I am looking for, but how drop this into a typical node HTML file? The documentation states...

A replacement for a regular <input> that allows the type of the value to be chosen, including options for string, number and boolean types.

Ok, how does one do this? If I am starting from this, where power UI control should just be a simple select-able true or false setting...

  <div class="form-row">
      <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
      <input type="text" id="node-input-name" />
  </div>

  <div class="form-row">
      <label for="node-input-device"><i class="fa fa-desktop"></i> Device</label>
      <input type="text" id="node-input-device" />
  </div>

  <div class="form-row">
      <label for="node-input-power"><i class="fa fa-desktop"></i> Power</label>
      <input type=**????** id="node-input-power" />
  </div>
</script>

<script type="text/javascript">
  RED.nodes.registerType("MAX7219Power", {
    category: "MAX7219",
    color:"#E6E0F8",
    icon:'font-awesome/fa-desktop',
    defaults: {
      name:  {value:"", required: false},
      device:   {value:"0", required: true, validate: RED.validators.number()},
      **???** power: {value:true, required: true},
    },
    outputs:1,
    inputs:1,
    label: function() {
      return this.name ? this.name : "MAX7219 Power";
    },
    labelStyle: function() { return this.name ? "node_label_italic" : "";},
    outputLabels: ["Clear"],
    inputLabels: ["Trigger"]
  });
</script>

The **??? ** notations are where I am wondering what do I add/change? I have not done much (input oriented) HTML, so I am sure that is tripping me up here as well.

4

If you look at this node (not yet published to npm) https://github.com/colinl/node-red-contrib-influxdb-backup you will see how I use it. The unzip field is a true/false value that can passed in a message parameter, context, environment or directly in the config, so if you look for all references to unzip you will see how I do it.
On the other hand if you only want it to be configurablle via the node then may be simpler to use a checkbox rather than a dropdown.

[Edit] What I usually do is to find a node that does what I want and then look at how that node does it.

5

I agree with @Colin, where it makes sense, use typedInputs so that users have a choice of setting it to bool-true or bool false or automating it by sending in the value into your node via msg.payload.power or msg.what_ever_var_they_choose or flow.some_flow_variable_for_this_power_thingy etc

It just makes things much more flexible for the user.

Of course you would default the typedInput to 'bool' type - then if the user needs more flexibility, they set it to msg.xxxxx themselves.

6

Ok, good to know... but to address my original question.... how to do I do this exactly? A complete example of how to do it, would be greatly appreciated. In this specific use case, no user flexibility is applicable, the input sure always be, simply, true or false, in all cases.

7

Well as Colin said, search his example for unzip

to give you a nudge - this is whats required...

  • In your html file
    • in the defaults...
      • myBool: { value: false },
      • myBoolType: { value: "bool" },
    • in oneditprepare()...
      • $("#node-input-myBool").typedInput({ default: 'bool', types: ['bool', 'msg', 'flow', 'global', 'env'], typeField: $("#node-input-myBoolType") });
    • in the html part (form-row)...
      • <input type="text" id="node-input-myBool"> <input type="hidden" id="node-input-myBoolType">
  • In your js file...
    • At initialisation, near the top, just below RED.nodes.createNode(this,config);...
      • node.myBool = config.myBool;
      • node.myBoolType = config.myBoolType;
    • later on (usually inside node.on("input", function(){ ...}) )...
      • let myBool = RED.util.evaluateNodeProperty(node.myBool, node.myBoolType, node, msg)
      • now use myBool as required in your logic (be prepared for users sending duff values though - so I recommend a sanity check on the value of mybool - perhaps even be a good citizen & call node.error("power is not a boolean value", msg) to inform the runtime of this error

Rinse and repeat as many for as many fields you want.

Umm... "it should always be true OR false"? - that is still a choice :smiley: :smiley:

The point of the typedInput is to permit the user to make that choice both inside your node (at design time in your UI) AND outside of it (by allowing the user/runtime to pass in true or false instead of "hard coding it").

That said, there are times it doesn't make sense to provide a choice (for example when a choice should never change once the node is initialized)

8

If you only want to configure it via the node then just use a dropdown or a checkbox.

9

If the field can only be a boolean, then the myBoolType is not needed.

So you can get rid of the typeField parameter and its hidden input, and hardcode the value "bool" in the call to RED.util.evaluateNodeProperty in place of node.myBoolType.

10

But for a 'simple' boolean value, a checkbox may well be far more appropriate.

In which case, you can see how the Switch node does it for the 'repair message sequences' checkbox - https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/10-switch.html#L37

in your defaults:

defaults: {
   myBoolean: { value:false}
}

and in your HTML template:

<div class="form-row">
        <input type="checkbox" id="node-input-myBoolean" style="display: inline-block; width: auto; vertical-align: top;">
        <label style="width: auto;" for="node-input-myBoolean">A label for the checkbox</label></input>
    </div>
11

Is that also true for when permitting msg and flow as an option (i.e. permitting the value to be determined at runtime)?

12

It's true in any situation where there is only one type available in the typedInput, so there is little point storing that one hardcoded value in the node configuration.

13

But the example I posted had bool, msg, flow, global etc. How would the users selection be remembered? Some under the hood magic I guess?

Edit...
To be clear, I'm just double checking my knowledge Nick (i don't wanna be posting bad advice)

14

Your example has multiple possible types, so yes the node needs some way of knowing which type has been selected.

All of my replies have been in the context of there only being one available type, so there's no choice to store.

15

Phew. Close one :wink:

1 Like
16

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