Get Data in App after Scanning a QR Code

When we build apps, we should always have the user experience (UX) in mind. Either from a design perspective to make it accessible, beautiful to look at, or streamline the process the app is used for.

In today’s blog post, we’ll see how we can use a QR Code (generated for free!) to feed the app with the required data, thus reducing inputs from users. Let’s do this!
 

Scenario

There are multiple scenarios that would benefit from using a QR Code. In general, “Incidents Reporting” is a very good one. You’d have your assets (i.e.: computers, meeting rooms, Surface Hubs, company phones, etc…) all with a sticker, and referenced “somewhere”.
That “somewhere” can be an external system, Dataverse, SharePoint, or others (depending on the volume), and will store all the necessary information with regards to the asset.

In our example today, we’ll use SharePoint as the backend for storing the information about the assets, AND when reporting incidents for them.
 

SharePoint Backend

Let’s create 2 lists:

• Assets (will contain the information for each asset)
• Incidents (will contain the incidents reported with the Power Apps app)
   

Now let’s create a few columns:

• Asset Name / Text (in Assets list)

• Asset Category / Choice (in Assets list)

• Country / Text (in Assets list)

• Asset Name / Text (in Incidents list)

• Asset Category / Text (in Incidents list)

• Country / Text (in Incidents list)

• Issue Description / Multilines of Text (in Incidents list)

• Created By / Built-in Person or Group (in Incidents list)

One more column…

How are we going to link the assets info in SharePoint, to our QR Code, and finally to our app?

Well, the first step is to create some sort of identifier that will link everything. Let’s add another column in the Assets list, and call it QRCodeID of type Text.

After entering some sample data, it would look something like this:

So what’s important here?

• QRCodeID value doesn’t matter. I could have given “dog1”, “dog2”, and “dog3”. This is just a value to be used later to create a link (or reference) to the item

• Give this value a unique name that is NOT attributed to another item
   

AppID and App URL

Before generating our QR Code, we need a couple of things. For the QR Code to bring us directly into our Power Apps app, we need to grab the App URL. The App ID is contained within the URL, so we’ve got both at the same time!

If you click on the 3 dots next to your app, then click on Details, the full URL will be under Web link.

👉 Copy from the start of the URL, up until the end of your tenant ID (GUID value).
 

For example, the URL should be:

1

https://apps.powerapps.com/play/e/<GUID>/a/<APP_ID>?tenantId=<TENANT_ID>

Build URL for the QR Code

Now we need to build the URL with all the information so we can generate our QR Codes. And this is where the QRCodeID is making its celebrity entrance!
 

At the end of our URL above, let’s add the following:

1

&QRCodeID=<QRCodeID_VALUE_FROM_SHAREPOINT>

The overall URL should look like this:

1

https://apps.powerapps.com/play/e/<GUID>/a/<APP_ID>?tenantId=<TENANT_ID>&QRCodeID=<QRCodeID_VALUE_FROM_SHAREPOINT>

Generate a QR Code

If you just search for a “free QR Code generator” online, you’ll find quite a few. But I personally like to use QuickChart.io which is an Open Source project 🙂

In the QR data (text or URL), paste your full URL we’ve constructed earlier. This will in turn, generate the QR Code!

This means that the image (QR Code itself) contains our information (as highlighted in yellow on the screenshot).

Repeat the same process for each asset. Then, technically we’d grab the QR Codes, print them, and stick them onto our devices!
 

App & Formulas

Perfect! Now it’s time to go to Power Apps to build the app, and add a couple of formulas 😁
 

When we scan the QR Code, we’ll go straight into the Assets Details screen. In that screen, I’ve added:

• Form connected to the Assets list (Default Mode = View)
• Button “NEXT” to navigate to the second screen and provide the issue

Formulas

Let’s go over the formulas for our Form and the 3 datacards.

After your Form is connected to the Assets list, enter the following in the Item property of the Form:

1

Defaults(Assets)

Then, we want each value from SharePoint to be in their respective field (control). Below are the mappings for each control:

• DataCardValue1 is the Asset Name value
• DataCardValue2 is the Asset Category value
• DataCardValue3 is the Country
   

In the Value property of DataCardValue1, enter the following formula:

1

LookUp(Assets, QRCodeID = Param("QRCodeID")).'Asset Name'

Now we’ll repeat the same for the Asset Category and the Country.

In the Items property of DataCardValue2 AND ALSO the DefaultSelectedItems, enter:

1

LookUp(Assets, QRCodeID = Param("QRCodeID")).'Asset Category'

In the Items property of DataCardValue3, enter:

1

LookUp(Assets, QRCodeID = Param("QRCodeID")).Country

On the NEXT button, Navigate to your “Issue” screen:

1

Navigate('Issue Details Screen');

Finally, in the SUBMIT button, we can either use SubmitForm(Form_Assets) and PATCH the “Issue Description” text input, OR we can just PATCH all the columns. Your choice 😉 I like to use the PATCH function because it offers more flexibility in general.

Scan the QR Code

It’s time to grab your device!! 🤠

Your native camera should be able to work with no issue. When I open the camera app on my phone, and point it at the QR Code, it recognizes that this QR Code is linked to Power Apps.
 

Click on “Power Apps” (in yellow here). This will open the app, and display the information related to that QR Code!!
Then you just need to go through the process of whatever your app is for 😊
 

Thanks for reading! 🙂