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.
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.
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:
- 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.
- The app will then populate the information of the QR code. The employee will validate before proceeding to check in.
- The app will populate more information — the employee’s name, contact details (i.e. email, mobile number), timestamp and location.
- Once the employee is satisfied with the details, the employee can submit and receive a success message.
- 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:
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:
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).
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.
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:
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:
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.
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”.
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.
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.
Below is a short video on this Canvas Apps based on the process flow highlighted above.
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.