var qrcode = new QRCode("qrcode");
function makeCode () {
var elText = dmx.parse('var2.value');
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
I would appreciate any help you can give me. Thanks in advance.
I find that if you are running external/your own JS functions, ‘Flows’ is the way to go. Add a flow to your page and use a Run Javascript action step. You can pass the parameters in the action step too, using the data binding picker or by typing a string/value.
In my project, I have added the function, with some adjustments, so that it allows two parameters. The text (in my case I am passing the text input element that holds the text) to be encoded and the id name of the element where the code will be displayed. You can use the second function to clear the code element:
window.qrcodeS = {};
function makeqrCode(qrtextel, qrdiv) {
var elText = document.getElementById(qrtextel);
if (!elText.value) {
elText.focus();
return;
}
else {
if (typeof qrcodeS[qrdiv] !== 'undefined') { qrcodeS[qrdiv].clear(); $('#' + qrdiv).html(''); }
qrcodeS[qrdiv] = new QRCode(document.getElementById(qrdiv), { width: '300', height: '300', useSVG: true });
qrcodeS[qrdiv].makeCode(elText.value);
}
}
function clearqrCode(qrdiv) {
return new Promise(function (resolve, reject) {
if (typeof qrcodeS[qrdiv] !== 'undefined') { qrcodeS[qrdiv].clear(); return resolve(qrdiv); }
else { return resolve(qrdiv); }
});
}
While flows is a better way to call KS functions, in this case, I think what you are missing is calling the makeCode function after page has been loaded.
Its only after that that dmx variables actually have a value to return.
$(function() {
makeCode() ;
}) ;
Above is the shorthand for jQuery’s loaded event.
Lastly, I assume you will most likely be doing this dynamically on say a button click with a dynamic URL… and not on page load.
In that case, using flow is the better option as it allows you to pass dmx values to JS function without having to use dmx.parse or variables in the JS function code.
@sid You’re right. I trigger mine through a button press. As it is dynamic data being asked for in the post triggered on blur or enter key you could use a dynamic event on the text input or enter press - triggering the flow that then calls the custom function (which contains the makeCode call). If it is being displayed on page load, and you can be sure that the data has been set by then (if coming from a SC / API call), your suggestion is good. You could still use a flow by adding a Dynamic Event for Ready to the App element of the page - it might make using data binding easier.
Alternatively to the data-binding/dmx.parse you can set the value you want in a global variable (create in App structure by clicking App > Define Global Data) and access it through dmx.global.get('variable name');
and alter it using dmx.global.set('variable name', 'new value');
That way the value is available in both the data pickers and the custom js
Hi, thnks @bpj and @sid, I hadn’t thought about using flow, good idea, thanks. I ended up using this API to generate the QR codes since it is faster and easier: http://goqr.me/api/ so my code is simpler now:
I haven’t used the Global Data thing yet. I don’t think it was there when I started using Wappler. Or maybe I didn’t notice. Anyways, that also is a good place to store values.
Thanks for this tip. Is this service a demo, or is it forever free?
I should do the thing you explained (generation of QR with a dynamic parameter, visualization by the customer, and then if he wants he can save the image with the right click)
But I didn’t understand if it then expires.
Hi, forever is a long time , I have been using it for a year in an app only for internal use within a company and it works well.
I don’t quite understand what you mean by expiring, once you dynamically generate the Qr code it stays on the screen for as long as you want and it will be generated again if the variable is the same.
If you want something more secure, I recommend using java script within your server.
, I have been using it for a year in an app only for internal use within a company and it works well.