How to use df-* attribute from outside of the widget area.

[Yusufzai]

Hello jerosoler,

I want to call the data from outside of the widget using the df-* attribute.

Explanation:

Currently, I am having all the data fields inside the widget but I want to make some major changes and fetch data in a sidebar.

I know I can fetch data on select using the code below.

editor.on('nodeSelected', function(id) {
    console.log("Node selected " + id);
    getData = editor.getNodeFromId(id);
    console.log(getData);
})

and can update them as well.

But, How can I use the df-* attribute from outside of the widget area in the sidebar.

Hope I am clear!

[jerosoler]

Hello @Yusufzai

It would be like the "Dbclick" example from the demo https://jerosoler.github.io/Drawflow/.

You would have to add the sidebar inside the component. Since the df- attributes only work inside the drawflow canvas.

Or you could look at modifying the updateNodeValue function

Or create a new function. It shouldn't be too complicated. It is little code. The code that currently exists is this:

 this.container.addEventListener('input', this.updateNodeValue.bind(this));

  updateNodeValue(event) {
    var attr = event.target.attributes
    for (var i = 0; i < attr.length; i++) {
            if (attr[i].nodeName.startsWith('df-')) {
                var keys = attr[i].nodeName.slice(3).split("-");
                var target = this.drawflow.drawflow[this.module].data[event.target.closest(".drawflow_content_node").parentElement.id.slice(5)].data;
                for (var index = 0; index < keys.length - 1; index += 1) {
                    if (target[keys[index]] == null) {
                        target[keys[index]] = {};
                    }
                    target = target[keys[index]];
                }
                target[keys[keys.length - 1]] = event.target.value;
          }
    }
  }

You could do something similar by listening to the sidebar container.

[aptvaltechtest]

put what you need outside the canvas inside a div with an id, then use something like document.getElementById('').innerHTML to grab it when you define the variable.

[Yusufzai]

Dear @jerosoler

Good to see the new update. Just want to know that the new event nodeDataChanged would be helpful for me for this issue?

[jerosoler]

Nop nodeDataChangednot for this issue.