Is there any way we can get the value of selected radio button in data object same way we get the value of an input box or the select dropdown?

[sidra07]

I have created a node in which there are radio buttons out of which we have to get the value of the selected radio button when we export the flow. Also is there an option we can dynamically set the data in any node.

For example, if on a node there is button on click of which a modal open up showing multiple images in a grid, now if I click on any image then the name of that image should get added to the data object of that node. Please let me know how we can do it.

[jerosoler]

Hello

For input type radio and checked it is not implemented. But here you have an implementation of the radio button with the df variables.

We first listen for the "nodeCreated" event to assign the variable.

And in each input we put the "changeOption" function so that it updates the value for the export.

editor.on('nodeCreated', (id) => {
      const node = editor.getNodeFromId(id);
      const check = node.html.includes('type="radio"');
      if(check) {
        const eles = document.querySelectorAll(`#node-${id} input[type="radio"][name="df-radio"]`);
        eles.forEach(e => {
          if(e.value === node.data.radio) {
            e.checked = true;
          }
        });
      }

    })

    function changeOption(e) {
      const id = e.target.closest(".drawflow-node").id.slice(5);
      const type = e.target.name.slice(3);
      const value = e.target.value;
      const node = editor.getNodeFromId(id);
      const data = node.data;
      data[type] = value;
      editor.updateNodeDataFromId(id,data);
    }

    editor.addNode('ddd',1,1,900,400,'ddd',{ radio: 'JavaScript'},`
      <input type="radio" id="html" name="df-radio" value="HTML" onclick="changeOption(event)">
      <label for="html">HTML</label><br>

      <input type="radio" id="css" name="df-radio" value="CSS" onclick="changeOption(event)">
      <label for="css">CSS</label><br>

      <input type="radio" id="javascript" name="df-radio" value="JavaScript" onclick="changeOption(event)">
      <label for="javascript">JavaScript</label>
    `)

This example does not contemplate the import. For the import it has to be done with the "import" event.

The updateNodeDataFromId method is used for these cases or if it is loaded from an external pop-up... Or if special data is required.