How to generate QR Code in SAPUI5/SAP Fiori application?

[durai]

Hi All, 

I want to generate a QR Code in SAPUI5 / SAP Fiori application. 

[TinhLeo · Accepted solution]

Hi Durai,

You can use a QR Code library and can find a lot of libraries example qrcode.js https://davidshimjs.github.io/qrcodejs/

Then you can include it directly to the index.html or load it using manifest.json

using index.html 

//<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

via manifest.json

"sap.ui5": { "resources": { "js": [ { "uri": "https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" } ] } }

Then you can create a VBox to display QRCode

<VBox id="qrcodeDisplay"></VBox>

In the controller you generate qr and present it to VBox

const oQRCodeBox = this.byId("qrcodeDisplay");
oQRCodeBox.destroyItems(); // Clear previous QR code if exists

const oHtmlComp = new sap.ui.core.HTML({
content: "<div id='qrcode'></div>"
});

oQRCodeBox.addItem(oHtmlComp);

new QRCode(document.getElementById("qrcode"), {
text: "durai",
width: 128,
height: 128
});

[durai · Accepted solution]

Hi TinLeo,

[durai · Accepted solution]

Hi TinLeo, I want to generate a dynamic QR Code in SAPUI5 application.