💪Power Apps to the rescue — Contact Tracing App v.2 for external users using Power Apps Portal

Published in

jenzushsu

13 min readSep 11, 2020

Looking back

During the initial outburst of the global pandemics in February 2020, I created a few approaches using a mix of Power Platform (e.g. Power Apps, Power Automate, Power BI, Microsoft Forms) — COVID-19 dashboard, contact tracing for internal organization and external parties (also with the encouragement of a fellow challenger Jeffery Tay). I have also open-sourced my project on my git for public to extend on.

Contact Tracking Canvas App using Microsoft Power Apps

It was fun to push the extent of technology with the various use cases and subsequently, there was an “explosion” of solutions built to assist organization. Microsoft also released Crisis Communication and Return to Workplace App created using Power Platform for customers.

Return to the Workplace Solution by Microsoft

Fast Forward

It has been almost 9 months since then, and there are many people whom have reached out to me via different channels on developing their own flavor of contact tracing platform for their own organization. It didn’t prompt me for any need to improve or extend the sample app I created as there was many partner solutions available.

Then one fateful day, someone came knocking on my “virtual” door for the above project and provided more insights on the scenario which they are currently working on. It was rather interesting as it touched upon my previous scenario of catering for external users performing a check-in whenever they visit various area of the organization.

In the words of Barnabus “Barney” Stinson, Challenge accepted!

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.

In my earlier post for Contoso Campus — 🤖Power Automate UI flows — Automating Microsoft Forms Creation, the app created using Power Apps is mainly for internal users as they are properly licensed.

In order for external users to have access to this app, these users must be (1) invited as a guest users in your tenant and (2) properly licensed in order to use the app. This presents additional licensing cost and challenges in managing the number of guest users to your organization tenant which may poses a operational/security risk.

The solution proposed from that post is the use of Microsoft Forms and some clever solutioning hack with Power Automate to automate the creation of multiple (or even thousands) of forms associated with an unique location.

“Old” Problem

The use of Microsoft Forms is convenient but it poses lots of inconveniences as well. Below are the problems:

Too many locations, too many forms — There is a single Microsoft Forms associated to a single location; and if you have 100 locations, you will have 100 Microsoft Forms → 100 excel sheets. It can be administratively taxing to manage that many forms.
Excel is NOT a database — There is a limit of the number of rows that an Excel sheet can hold and it cannot scale or to manipulate the data like a database. It can be administratively taxing to do backup/download/purge data from that many sheets.

“New” Problem

Contoso Campus has an empty space and would like to create ad-hoc location through the use of partitioning to provide more spaces for all the users. It will be important to store and maintain these new location details.

New Requirements

Contoso Campus’s management would like to have the following requirements:

Move away from the use of Microsoft Forms
A single external web-based interface for external users to perform location check-in with ease to manage and secure
No requirements for external user authentication or sign in to use the external interface
The use of a database to store all fixed/flexible location details and location check-in data for all users with the ease to manage and secure

Proposed Changes

Proposed Contoso Campus Power Platform solution approach

1. Data Source

Instead the use of SharePoint List, we will be implementing the use of Common Data Service (CDS) as the centralized database for the data related for this scenario. I will assume that you have some understanding of CDS and how we can easily create entities to persist your data. You can refer to this article 8 Days of Power Platform — Day 3 on my CDS sharing.

2. Power Apps Portal

For internal users, they can continue the use of the Canvas app previously created and change the data source connection from SharePoint List to CDS.

Using Power Apps Portals for external users

For external users, we will propose the use of Power Apps Portals to replace Microsoft Forms. In short, Power Apps Portals are external-facing websites that allow users outside their organizations to sign in with a wide variety of identities, create and view data in Common Data Service, or even browse content anonymously.

Below are some of the key benefits of using Power Apps Portals:

Allow anonymous users to access and interact with data in CDS
Fully managed by Microsoft — taking care of scalability, operational and security
No-code/low code interface — essentially WYSIWYG. It has a portal editor that allows drag and drop, simple inline styling, light weight configuration of lists and forms.

3. QR Code

This will remain the same as the previous implementation — creating a static QR code embedding the Power Apps Portal Web URL with a parameter of the location name/ID:

https://<<Power Apps Portal URL>>/<<Page Name>>?locationName=<<location-name>>

We will take the same approach of having the portal to parse the request parameter to store as a local variable for the location name/ID.

Process flow of Contoso Campus for External Users

There are unique location-specific QR codes placed at each of the known locations within the campus. This QR code will be used by both internal and external users.

External users will need to launch their camera app or a QR code reader app on their mobile devices to scan the QR Code.
Based on the QR Code, it will redirect the external users to the specific web page of the Power Apps Portals for the external location check-in form.
The external user will fill up the basic information like First Name, Last Name, Email address, Contact Number. The form will have “awareness” of the location which the user has scanned and populate the location details in the form. Once the form is filled up, the external user can proceed to submit, receive a success message and also an email to notify of his/her location check-in details in Contoso Campus.

High Level Overview of Implementation

Add a new CDS database and create Entity

If you do not have an existing CDS database, you can following this link to add a new CDS database to your environment.

As for the purpose of this simple demo, I will create a new Entity named External Contact with the following custom fields:

Proposed custom fields for Entity “External Contact”

Contact Id (Primary Name Field as an identifier)
First Name
Last Name
Email
Contact
Check In Location

Create a new Model-Driven form

Select the Forms tab and you can see the default form types created for this custom entity.

You can either customize the Main form type named Information or add a new form. We can go ahead to Add form, select Main Form and it will open up the form designer.

On the form editor, you can drag and drop your desired fields located on the Field Explorer pane on to the General section of the form canvas until the form looks like this below.

Drag and drop desired fields in the form

For Check-in Location, I have selected Read-only field under the Forms field properties. The purpose is to auto-populate the location name/ID when this form is rendered upon redirect from the QR code. I will show how to pass the request parameter into the form later.

Save the form and publish.

Create a Common Data Service starter portal

With the existing environment, we will create a new portal in Power Apps. This portal will interact with the data stored in Common Data Service which you have previously created. You do not need any additional connection from Power Apps and only need to specify the entities that you want to display or manage in the portal.

Under Make your own app, select Portal from blank.

If the selected environment does not contain portal pre-requisites, a message is displayed in the Portal from blank window suggesting you select another environment or create a new one.

In the Portal from blank window, enter a name for the portal and address for the website, and select a language from the drop-down list. When you’re done, select Create.

The portal will being provisioning and the provisioning status will be displayed through notifications.

Once the portal is provisioned successfully, the status is updated and the portal is displayed in the grid.

To manage an app, select More Commands (…) for the portal and choose “Edit” from the context menu.

It will open up the Power Apps portals Studio to allow you to edit the content and components of the portal.

Create a new Form Page

From the command bar, select New page and choose Blank page.

In the properties pane on the right side of the screen, enter the following information:

Name: Name of the page. This value is also used as the title of the page.
Partial URL: The URL path segment used to build the portal URL of this page.
Template: Page template used to render this page on the portal. If required, you can choose another template from the list.

The webpages you create are added and their hierarchy are displayed in the Pages pane. To view the Pages pane, select Pages from the toolbelt on the left side of the screen.

For this form, we are going to create a form using the available components. Select Components from the left side of the screen.

I will add a Text component as the page title and a Form component to allow the external users to fill in the required details. The next few steps are focusing on creating the form which we have previously defined in CDS.

Add form

Form is a data-driven configuration that collects data in the portal without the need for a developer to surface the form in the portal. Forms are created in Common Data Service as shown under this section.

Before adding any new components, always select an editable element on the canvas so that it will register the new component within that element.

Under Portal components, select Form. In the properties pane on the right side of the screen, select Use existing.

Enter the following information or make the selection:

Name: External User Check in Form
Entity: External Contact
Form layout: The name of the form on the target entity in Common Data Service that is to be rendered.
Mode: Insert (Indicates the form should insert a new record upon submission)
On success: Show success message (Requires a message to be displayed to the user on successful submission of the form. You can also select Hide form on success to hide the form upon successful submission)

For Entity Form, it is unable to show any preview of the form. You will have to browse the website to see the form. From the command bar, select Browse website from the right and the browser will open a new tab to the page as shown above.

Based on the fields’ properties, it will also be applied to this form where all the required fields will be marked with an asterisk and simple client-side validation will also be performed to ensure all the required fields are input.

Client side field validation included based on fields’ properties

For Check-in Location, I have selected “Read-only field” under the Forms field properties previously. Hence, it is showing as a dash without any data input. The idea here is to use the QR Code to pass the value of location name/ID and insert into this field.

Pass field-value pair in URL to Entity form

From the new page, you should have the following URL format to access from the internet:

https://<<Power Apps Portal URL>>/<<Page Name>>

We would like to include a request parameter as a field-value pair and insert the value into the Check-in Location field value in the form.

Below is the proposed URL with the field value pair:

https://<<Power Apps Portal URL>>/<<Page Name>>?locationName=<<location name/ID>>

At this point, I will need to introduce an advanced portal customization using Liquid. Liquid is an open-source template language integrated into portals. It can be used to add dynamic content to pages, and to create a wide variety of custom templates. Using Liquid, you can:

Add dynamic content directly to the Copy field of a webpage or the content of a content snippet.
Store source content by using web templates, entirely through configuration within Power Apps, for use throughout the Power Apps portals content management system.
Render a website header and primary navigation bar, entirely through configuration within Power Apps.

I won’t go too much into the details of Liquid and you can read more about it from this link.

In order to achieve this, I will be using Liquid object — contain attributes to output dynamic content to the page. One of the available objects is request where it contains information about the current HTTP request.

With the following code snippet, I will be able to initialize a new Liquid object to hold the value passed from the request URL:

{% assign locationName = request.params['locationName'] %}

Further form customization using Source Code Editor

As there is no way to insert the above code snippet using the current editor, you will need to open up the source code editor for the code changes for the desired component.

Select the form component, and then select the source code editor icon </> in the footer.

The source code is displayed in the Code Editor pane at the bottom of the screen. The changes you made earlier are updated in the source code. Insert the following code below the last <div> tag.

In addition to the liquid object, I have added a snippet of JavaScript to set the value of the selected field cr20d_checkinlocation when the DOM is ready.

{% assign locationName = request.params['locationName'] %}<script>
$(document).ready(function() {
    $('#cr20d_checkinlocation').attr('value', '{{locationName}}');
});
</script>

Why cr20d_checkinlocation? When the form is rendered, it make use of the entity field’s name as the field ID. You can always open up Developer Tools and select the element to view the source code.

To make changes, update the source code and select Save.

Implementation Review

Below is a short video recording based on the new process flow for external users to perform a location check-in for Contoso Campus. I have also done some removal of unnecessary HTML components, advanced client-side field validation (i.e. email format regular expression checks).

There are other requirements which are not documented/showcased:

Sending an email notification to notify external users of their location check-in
Providing a link for them to easily check-out in the email

These requirements can be achieved using Power Automate (which I may add into this post when I have the time).

Summary

There are many ways to skin the cat — but it’s finding the most viable, efficient and least hassling way in achieving the outcome.

As for the above scenarios, you will need to weigh and balance the pros/cons and challenges for any approach.

For the choice of using Power Apps Portal:

Allow anonymous users to access and interact with data in CDS
Fully managed by Microsoft — taking care of scalability, operational and security. I do not have to worry about the need to set up a web page from scratch, handle infrastructure such as web server and database, manage security and GAZILLON tons of stuffs when it comes to hosting related matters!
No-code/low code interface — essentially WYSIWYG. It has a portal editor that allows drag and drop, simple inline styling, light weight configuration of lists and forms. But if you need to do some “complex” stuff, you need to understand some basic coding, understand Liquid or also some Dynamics 365 component knowledge for advanced portal management/customization.

You will also need to consider the cost for Power Apps Portal.

For this scenario mainly using for anonymous users, it is $100 per 100,000 page views/month as stated on the website. If you have any doubts, always refer to the licensing guide for more details.

Similar to other posts, I truly enjoyed the thinking process, finding the most straightforward approach to solve practical problem without overkilling the technology.

Now back to regular work channels.

Happy #powerhacking away, stay safe, mask up 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.