Hello, need an advice related with js..
I'm creating an App Connect Extension, and for learning, a basic one..
It's a QR generator and it's working real fine with static values.
The problem comes when I'm using dynamic values:
This appears to be working:
But if I have to wait an API/SC value, the field gets blank (expected like when nothing defined).
There's an extra step I should implement when we are talking about dynamic attributes? Or it's a pure and only js thing I'm missing?
js code:
dmx.Component("qr-generator", {
attributes: {
"qr-data": { type: String, default: "" },
"qr-size": { type: Number, default: 4 }
},
render: function (node) {
const qrData = this.props["qr-data"];
const qrSize = this.props["qr-size"];
if (!qrData) {
node.innerHTML = "";
return;
}
const qrCode = qrcode(0, "L");
qrCode.addData(qrData);
qrCode.make();
node.innerHTML = qrCode.createImgTag(qrSize);
//acordarse de borrar:
console.log(qrData);
},
init: function (node) {
this.render(node);
}
});
Thanks!
components.hjson
"attributes": [
{
"name": "dmx-qr-generator-qr-data",
"attributeStartsWith": "dmx-bind",
"attribute": "qr-data",
"groupTitle": "Dynamic QR Data",
"groupIcon": "fa fa-lg fa-database",
"title": "QR Data (Dynamic)",
"icon": "fa fa-lg fa-database",
"display": "fieldset",
"groupEnabler": true,
"type": "boolean",
"show": ["qrDataDynamic"],
"children":
[
{
"name": "qrDataDynamic",
"attributeStartsWith": "dmx-bind",
"attribute": "qr-data",
"isValue": true,
"dataBindings": true,
"title": "QR Data",
"type": "text",
"defaultValue": "",
"help": "Select data for the QR image",
"initDisplay": "none"
}
],
"allowedOn": {
"dmx-qr-generator": true
}
}
]