How to get values of node configuration checkboxes

Developing Nodes
1

I'm creating a custom node, and for my UI I want to have a group of checkboxes for the user to select. When a checkbox is selected/deselected, I want this to toggle an array index corresponding to the checkbox's value, in the custom node's JS file to either 1 or 0. My issue is, I cannot figure out how to transmit the state of the checkboxes from the UI.

I've tried the method outlined here: Node properties : Node-RED, but it doesn't seem to be updating the properties. Ideally, I would pass a JSON object as a config property, containing information on whether each checkbox is toggled on/off. I would appreciate any pointers on how to go about this.

2

Hi @cookies - welcome to the forums!

Not sure I follow.

Given the below property definition

defaults: {

    myCheckBox: {
        value: false
    }
}

And the following node config UI component

<div class="form-row">
	    <label  for="node-input-myCheckBox" style="width:130px"><i class="fa fa-pencil"></i> myCheckBox </label>
	    <input type="checkbox" id="node-input-myCheckBox">
	</div>

it will stay in sync, so when opening up the node properties the checkbox will will restore their correct state.

you can then obtain these properties in your module via

function Init(config) {
    RED.nodes.createNode(this, config);
    config.myCheckBox
     ....
}
2 Likes
3

What @marcus-j-davies says :point_up_2:

Alternatively,
use oneditsave callback to read the checkboxes and store them in this.checkboxes array. NOTE: checkboxes would need to be defined in the defaults .

1 Like
4

To echo the answer by @Steve-Mcl - the below should cater for it.

The definition and necessary callbacks.

RED.nodes.registerType('my-module', {
    defaults: {
        bits: {
            value: []
        }
    },
    oneditsave: Save,
    oneditprepare: Restore

});

function Save() {
    const NumCheckBoxes = 3;
    this.bits = [];
    for (let i = 0; i < NumCheckBoxes; i++) {
        this.bits.push($(`#CheckBoxIndex_${i}`).is(":checked"));
    }
}

function Restore() {
    for (let i = 0; i < this.bits.length; i++) {
        $(`#CheckBoxIndex_${i}`).prop('checked', this.bits[i]);
    }
}

And the HTML. No need for the node-input- ID prefix, as they are not directly associated with a config definition.

<div class="form-row">
    <label  for="CheckBoxIndex_0" style="width:130px"><i class="fa fa-pencil"></i> CheckBox 1</label>
    <input type="checkbox" id="CheckBoxIndex_0">
</div>

<div class="form-row">
    <label  for="CheckBoxIndex_1" style="width:130px"><i class="fa fa-pencil"></i> CheckBox 2</label>
    <input type="checkbox" id="CheckBoxIndex_1">
</div>

<div class="form-row">
    <label  for="CheckBoxIndex_2" style="width:130px"><i class="fa fa-pencil"></i> CheckBox 3</label>
    <input type="checkbox" id="CheckBoxIndex_2">
</div>

Then, in your module
config.bits[0] will yield true | false for checkbox 1

1 Like
5

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