QR Codes – Like barcodes, but cooler.
Welcome to another awesome post from the team here at NextStep Creations.
Today we’re going to be talking about QR Codes in PowerApps. By the end of this tutorial, you’ll be able to dynamically generate QR codes with your own custom content.
Here’s an example of what it’ll look like:
The beauty of this is there’s no Flow involved, this is purely and solely PowerApps. Let’s get to it!
QR Code API – How to generate the image
For this tutorial, we’ll be using the QR Code Generator API , found here: http://goqr.me/api/
If you’d like some information on how to use APIs in Flow/PowerApps, check our this blog post: PowerAutomate QuickBits 2 – Handling APIs Efficiently
What API call do we use?
Simple! We need to use the “create-qr-code” API. The syntax is like so:
There’s two parameters in this URL, “Size” and “Data”. These define the size of the QR Code generated, and the data that the QR code contains.
All we’re going to do is dynamically update the data parameter, and then generate a new QR Code.
Fairly straightforward setup. One label, one text input, one button, and one Image control.
Awesome! Two more steps to this, and you’re done.
Set the “OnSelect” parameter of the button to:
Set(qrCode, “https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=” & ti_QRContent.Text)
Replace “ti_QRContent.Text” with your TextInput (if you’ve renamed it).
Now, on the image, set the “Image” property to:
Enter some text into the text input, click “Generate QR”.
You should see your image turn into a lovely QR Code!
Wrap-up and thoughts
This is a very simple and very powerful way to generate custom QR codes. This could be used for inventory management (Simple Inventory Management App – Part 1/3), or as a library or sorts, where you can embed links to content in QR codes and have users scan them.
As always with PowerApps, the possibilities are endless.
Reach out to the team on Twitter at NextStep Aus and let us know what you’ve built!