Using Office 365 PowerApps and Microsoft Flow to build your own visitor registration app

Vuong Le Phong
dtlpub
Published in
5 min readMay 9, 2017

I have a client based in Wellington CBD that I visit regularly for meetings, and each time I have to sign in, filling out my details on their visitor booklet.

My client is already using Office 365 so I thought why not leverage PowerApps to streamline the process and build them a visitor registration app.

With PowerApps, basic mobile and web-based apps can be created and accessed by others within your organisation. Apps run on mobile devices such as phones, or you can run them in a browser by opening Dynamics 365.

The app that I created has the following three screens:

Welcome screen

The welcome screen gives the visitor the option to check in or check out.

Check-in screen

When checking in, the visitor enters their details and selects the person they are visiting. The Health and Safety Guide is also displayed on the right-hand side.

Check-out screen

The visitor simply clicks on the Check Out button when checking out.

Let’s jump into details on how the app was created.

Data Source

I created a SharePoint custom list Visitors which contains the necessary fields.

Next, I added the SharePoint list as the data source for my app

Welcome screen

Navigation is now added to the Welcome screen for the Visiting and Leaving button.

For the Visiting button, I want to create a new form and then redirect the user to the EditRegistrationScreen screen, i.e. check-in screen.

NewForm(EditForm);Navigate(EditRegistrationScreen, ScreenTransition.None)

For the Leaving button, the app at first refreshes the Visitors data source and then navigates the users to the DashboardScreen screen, i.e. check-out screen.

Refresh(Visitors);Navigate(DashboardScreen, ScreenTransition.None)

Check-in screen

The EditRegistrationScreen screen includes an Edit form control which acts as the container for a set of Card controls. Each card has a DataField property that specifies which field of the record it works on. Predefined cards are defined for different data types and user experiences.

To display the Health and Safety Guide to visitors, I added a PDF Viewer control and set the Document property to the URL of the guide. I had to allow anonymous access on the document as the PDF Viewer control does not support viewing documents which require authentication.

Check-out screen

I used a Gallery control to display the list of visitors. A PowerApps Gallery control can show multiple records from a data source and in this case, it’s the Visitors SharePoint custom list.

Each data field appears in a separate control within the Gallery control, and you can configure those controls in its template. The template appears as the first item inside the gallery.

The right-hand side of the screen shows the selected item. Values of the data fields can be accessed through the Selected property of the Gallery control.

Next, I changed the OnSelect value of the Edit button to change the Form control’s mode to FormMode.Edit and then navigate the user to the EditRegistrationScreen screen.

For the Check Out button, I used the UpdateContext function to update the current selected record.

Notification

Now, I want to use Microsoft Flow to send out an email notification to the person who has a visitor. Microsoft Flow allows automated workflows to be created, monitored, and managed between web services, files, and cloud-based data.

A new flow can be created by clicking on the Flows button.

You can then either select an existing flow, or create a new flow. In my case, I clicked on Create a new flow.

First, a trigger must be created for the flow. In this instance, I selected PowerApps as the trigger.

Then I added a Send an email action as follow

Finally, I updated the OnSelect property of the edit form control so that the flow will be triggered for any new registration.

If(EditForm.Mode=FormMode.New, VisitorRegoSendEmail.Run(DataCardValue4.Selected.Email, DataCardValue4.Selected.DisplayName,DataCardValue1, If(IsBlank(DataCardValue2&””),””,”from “&DataCardValue2&” “)));SubmitForm(EditForm)

As you can see, Microsoft makes it quite easy for us to build simple apps and workflows using PowerApps. It didn’t take me long to understand the basics and have my app up and running.

Digitising visitor registration is a small example of how we’re transforming the way our clients do business. If you feel like your business could benefit from a transformation, let’s get talking.

That’s it for now.

www.digitaltransformation.co.nz

--

--

Vuong Le Phong
dtlpub
Writer for

An experienced Solutions Architect and Practice Lead who has had 15 years’ experience in the area of Solution Architecture, Design and Development.