How to Generate QR Code in Power Apps Canvas apps?

In today’s blog we are going to discuss on how to generate QR code in Canvas apps. QR Code is now synonymous to our everyday living. Whether we attend an event or generate or book a doctor’s appointment or redeem a coupon, we need to scan our QR code.

With canvas apps gathering more eyeballs on each passing day, it’s quite obvious that sooner than later you would get a requirement like this.

So let’s get started. I will use Google API’s to create the QR code. If you want to know more about the Google API to generate QR code, please visit this documentation.

For this demo, I have created a very simple demo. A screen with a button that shall generate the QR code when clicked. And then an image file which shall show the QR code.

The most important part is the Power Automate flow which does the main task of generating the QR code. The flow quite obviously start with PowerApps connector because it shall be called from Power Apps.

In the second step, I initialize a variable. The variable shall get the data from Power Apps and is the data that shall be embedded within the QR code.

HTTP Connector with the GET request.

URL – https://chart.googleapis.com/chart?

QueryString parameters:

• cht = qr – Specifies it’s QR code request
• chs = width x height
• chl = the encoded data shown in the QR code. Here I have taken it from the variable I initialized in the earlier step.
• choe – output encoding

In the next step I take the output content inside another variable and return it to Power Apps. While returning it to Power Apps, I have chosen the Parameter type as File.

Well that’s it. I save the flow.

Now back in Power Apps, I add the flow to the app and then call the below code onselect of the button.

Set(QRContent, GenerateQRCode.Run(EncodeUrl("Name=Debajit&Location=Bangalore&Date=24/09/2021")).qrcontent)

I set the output of the flow to a variable – QRContent. Then set the image property to this variable.

Now when you run the app and click the button, you should see the QR Code show up in the image control.

You might also like the below posts

Hope this helped!

Debajit Dutta
Business Solutions MVP