How to generate QR Codes in PowerApps – #1 Canvas only

Today’s topic is around QR Codes in PowerApps. Let’s take the scenario whereby your organization want to tag every equipment at the warehouse and store those data in a SharePoint list.

The challenge here is – if we have 50 equipment at the warehouse, we will need to manually type the 50 tags to the database with the logic of differentiating them with either IDs or names which sometimes can relate to human mistakes.

So, why not develop an app which can generate the QR code with the relevant information and store them in our SharePoint list. The QR Code generated will be printed and stick to that equipment.

The app will use an API’s to create the QR code. If you want to know more about the API to generate QR code, please click here.

Let’s get started

Database

Create a new SharePoint List (In my case Equipment List) with below description:

• Type of equipment (This is choice):
  • Earth Moving equipment
  • Construction vehicle
  • Material Handling Equipment
  • Construction Equipment
• Model Name (Single line of text)
• Manufacturer (Single line of text)
• Date of purchase (Date and time)
• Chassis Number (Single line of text)
• QR Code (Single line of text)

Building App

On the home screen of power apps, click on SharePoint to connect our database and build the app.

Now that our app is opened, go to the 3^rd screen (EditScreen1) select the form and in the Properties field, select Edit Fields.

In the next menu that appears, remove Title and Attachments and close it. You should have something like this:

Add an Image control to the screen.

Add a button with Text property: Generate QR Code

On the OnSelect property of the button add:

Set(qrCode, “https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=” & DataCardValue13.Text)

DataCardValue13 in my case is the TextInput control in the Chassis Number DataCard

Now insert qrCode variable set on the button to the image property of the Image control.

Select the QR Code DataCard and in the Advanced property, click on “Unlock to change properties”. This unlock the various control in that datacard to be edited. On the default property of the TextInput of that datacard, add: qrCode.

Test the app

Play the app to see how QR Code is generated based on the chassis number. Fill all the fields except the QR code field click on generate and you will see the QR code generated in the image control.

Summary:

In this article, we’ve learnt how to generate QR Code in powerapps using an API.

Good job! Don’t forget “Practice make man perfect”, stay tuned for more of this and if you have any comment or challenges, just let me know.

See you next time.

Learn, love, share…