Building Contact Tracing (Check-in) Canvas App using Power Apps

How this got started

One of my contacts reached out to me with an idea to leverage on Power Apps to create an app for internal (organizational) users to do a check in on their known location(s) to facilitate contact tracing if needed in an event of Novel Conorovirus suspected case.

Birth of the idea

The initial thought was to create a Microsoft Forms for every single known location in the organization and users have to fill up the form whenever they are in that specific location.

The challenge here is — if you have 100 locations, you need to create 100 unique Microsoft Forms which goes to 100 unique excel sheets. This is challenging to collate and even the use of Power Automate to consolidate would not make this any “automated”.

Hence, why not develop an app which can take in a QR code that contains relevant information (e.g. location name, address etc.) and store the information in a relational database. It is common for places to have location-specific QR codes, especially within an organization.

Problem Statement

Below is based on a fictitious organization — Contoso Campus. This is a work of fiction. Names, characters, businesses, places, events, locales, and incidents are either the products of the author’s imagination or used in a fictitious manner. Any resemblance to actual persons, living or dead, or actual events is purely coincidental.

Proposed Process Flow

Scenario

Contoso Campus would like to be able to log their employee attendance during this period of this Novel Coronavirus global epidemic to facilitate contact tracing if needed.

For Contoso Campus, there are unique location-specific QR codes placed at each of the known locations within the campus. Employees will have to scan the QR code to fill in their details.

Process flow for Contoso Campus:

1. Every location has a location-specific QR code displayed at the entrance of the location. Employee can use their mobile device camera or the app to scan the QR code.
2. The app will then populate the information of the QR code. The employee will validate before proceeding to check in.
3. The app will populate more information — the employee’s name, contact details (i.e. email, mobile number), timestamp and location.
4. Once the employee is satisfied with the details, the employee can submit and receive a success message.
5. Every employee can view their check-in history on the app.

High Level Overview of this Implementation

1. Data Source

I will be using SharePoint List “Location List” as the data source to consolidate all the check-in information from the users.

Below are the information will be captured in this SharePoint List:

• Name
• Email
• Location
• Timestamp

2. Sample QR code

For the QR code, I use a free online QR code generator to create a static QR code embedding the Canvas App Web URL and the following parameter:

https://apps.preview.powerapps.com/play/[APP-ID]?location=<location-name>|<location details>

I will explain the parameter location in the following steps.

3. Barcode (QR Code) Scanner

You are able to add a Barcode Scanner in your Canvas apps and it’s similar to a camera control. You can locate the scanner from Insert > Media > Barcode scanner. You can read this link to understand the use of Power Apps Barcode scanner (link).

Adding a Barcode Scanner to Canvas apps

It depends on how you are designing the QR code and parse the information. For this use case, I will be using the Canvas Apps Web link with parameters.

Using QR code to open the targeted Canvas App

The reason for using the Canvas Apps Web link is to cater to users who may use the native mobile camera to scan the QR code and this will generate a pop up to open this Canvas Apps directly.

Whenever the Barcode Scanner is initiated in the app, the onScan action comes into play. I have the following code in onScan action:

Set(scanValue, BarcodeScanner1.Value); 

Whenever the Barcode Scanner reads a QR code, it will set the value of the QR code to global variable scanValue.

I have the following labels — locationInput and locationDetails in the Canvas Apps and in the Text property:

locationInput
First(Split(Last(Split(scanValue,"location=").Result).Result, "|")).Result
locationDetails
Last(Split(Last(Split(scanValue,"location=").Result).Result, "|")).Result

Referring back to Step 2, whenever the onScan action is triggered from the Barcode Scanner, the labels will take in the value of Barcode Scanner, parse the value in the two layers — using the Split function to break the value using the separator “location=” and subsequently using pipe “|” as the separator.

Using Barcode Scanner to scan and retrieve the information

After the scan is successfully and the parameters have been parsed, you can display the information on the screen, adding a map image to allow the user to visualize his/her location. I leverage on Google Static Map API to generate the image. You can read this link to find out more (link).

4. Form for submitting check-in details

Create a new Form screen and link the Form’s data source to the SharePoint List “Location List”.

Selecting the available fields from the data source to the form

You can select the relevant fields to be displayed in the form, drag and drop the sequence of the fields.

To make it more efficient and less user input error, I have added an additional data source “Office 365 Users” connection to this Canvas Apps. Office 365 Users lets you access user profiles in your organization using your Office 365 account. You can perform various actions such as get your profile, a user’s profile, a user’s manager or direct reports (link).

I can pre-populate the following fields — Name and Email as the user using this Canvas apps will be already authenticated and approved the use of this connection to access his/her organizational profile via Office 365 Users connection.

For Timestamp, the Now function will return the current date and time (link).

For Location, I have referenced the value of the label locationInput for this field.

Once the user is satisfied with the details, click “Submit” and the new entry will be inserted into the SharePoint List.

5. Review the user’s check-in details

Create a new List screen and link the Gallery’s data source to the SharePoint List. The Gallery will only retrieve this user’s check-in details.

Navigation to the List Screen

Add a button on the main screen to navigate to the new List Screen. The user will be able to review their check-in details.

Final Product

Below is a short video on this Canvas Apps based on the process flow highlighted above.

Final Product of this Canvas App

Summary

With existing Office 365 Enterprise or Dynamics 365 users or Power Apps users, it’s easy to create a task-oriented application quickly.

With some simple research/trial and error, it only took an hour to create the Canvas App framework and data source and another two hours to fine tune the logic flow and UI.

Happy #powerhacking away and wash your hands regularly 😃

The opinions and views expressed here are those of my own and do not necessarily state or reflect those of Microsoft Singapore or Microsoft Corporation.