SAP Builders Discussions
Join the discussion -- ask questions and discuss how you and fellow SAP Builders are using SAP Build, SAP Build Apps, SAP Build Process Automation, and SAP Build Work Zone.
cancel
Showing results for 
Search instead for 
Did you mean: 

Sap Build Qr Code Generator

fatihhan_aybirdi
Newcomer
0 Kudos
690

Hey, Im currently trying to code a qr code generator by input data per SAP Build apps i tried calling an api also tried require to generate yet. Im facing the issue that it either doesnt understand the api or doesnt understand my code.

 

2 REPLIES 2

Koni
Explorer
0 Kudos
516

Hello fatihhan_aybirdi,

your second screenshot shows that the output is "undefined".
You have to decide what type should the QR code be.
Inside the "output" configurations you have to define it (make it fit your data type).

My experience so far with QR codes is:
If you get the QR code as an IMG url, choose the IMG url to display it.
If you get the QR code back as an SVG+XML data string, use the "Dynamic SVG Image" element from the market place.

I experienced issues with the SAP Build Apps Preview app. It worked flawlessly inside the browser on the Desktop(Laptop) device. But the mobile device wasn´t working (iOS). 
Using the Dynamic SVG Element made it work on mobile, too!

Hope that helps.

Koni_0-1719256627552.png

 

mihaly-toth-nc
Explorer
0 Kudos
488

Just a quick look at your first image (where you have the script that actually prepares the qr code) you seem to lack the .makeCode() method. 

So what you have written is this part: 

```
const qrcode = new QRCode("test", {
text: "https://google.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});

```

But this just creates the object of the qr code, that will not yet actually generate the qr code. At least as per the docs based on a quick google search here: qr code js by davidschimjs 
So my suggestion that instead of the 
```
return qrcode;
```
write: 
```
return qrcode.makeCode();
```

I have not tried it yet, but as far as I can see in the codepen on the docs it returns a base64 string. So make sure to handle that in your code or the logic canvas accordingly. 
Suggestions: 
1. Turn the base64 code into a blob and return the blob url in js. 
2. Return the base64 string and use a 'write file' flow function where you actually store that as a local file and can use it in the image preview. Or you can also upload it to storage if that's something that you would need to do. 

Let me know if this helps.

PS, I like the way how you utilise the 'globalThis', I was not aware of that prior to your post. Does the globalThis work on the native version of the apps (preview and build) or only on the web runtime? 

No-code expert with extensive experience in SAP Build Apps (former Appgyver), Firebase, Xano. Actively working on a startup and further projects.