From Paper Logs to Power Platform: Building a Visitor Check-In App in 60 minutes
Welcome, readers! I recently led a 60-minute hands-on session where I built a Visitor Pre-Registration and Check-In System using Microsoft Power Platform using only standard Microsoft 365 licensing components: Microsoft Forms, SharePoint, Power Automate, and a Power Apps Canvas App. The energy in the room was electric, and by the end, I had a fully functional app that amazed everyone. In this blog post, I’ll walk you through every step of the process, complete with detailed instructions and all the code used, so you can build your own version of this app.
Why Standard Licensing Makes This Special
Since I’m working within the constraints of standard Microsoft 365 licensing, I leveraged components that support connectors under standard licensing. This means no premium connectors or additional costs are required, making this solution accessible to any organization with a Microsoft 365 subscription.
This approach not only saves money but also democratizes access to powerful automation and app-building tools!
The Problem: Visitor Management Challenges
Many organizations struggle with inefficient visitor management—paper logs, Excel spreadsheets, or manually updated SharePoint lists. These methods lack automation and an intuitive interface. My goal was to create a modern solution using Power Platform’s low-code tools, and I succeeded!
The Vision: A Streamlined System
I aimed to build a system where visitors pre-register via a form, staff manage check-ins through an app, and managers access insights via a dashboard. Using Microsoft Forms, SharePoint, Power Automate, and Power Apps, I created a solution that automates pre-registration, notifies hosts, prints badges, and tracks visitor activity—all within standard licensing.
Technical Deep Dive: Step-by-Step Guide
Let’s dive into the details. Below, I’ll break down each component with in-depth instructions and the exact code used.
1. Setting Up the SharePoint List
The SharePoint list "Visitor Records" is the foundation of my app, storing all visitor data securely.
Detailed Steps to Create the SharePoint List:
- Navigate to your SharePoint site (e.g.,
https://yourdomain.sharepoint.com/sites/yoursite). - In the left navigation, click Site contents.
- Click + New and select List.
- In the "Name" field, enter
Visitor Records, then click Create. - Once created, click + Add column to define the following columns:
- Visitor Name: Select "Single line of text," set as Required.
- Email: Select "Single line of text," set as Required.
- Meeting Purpose: Select "Choice," add options: "Interview," "Review," "Other." Set default to "Interview."
- Host Employee: Select "Person or Group," allow only "People," set as Required.
- Expected Arrival Date: Select "Date and time," include date only, set as Required.
- Expected Arrival Time: Select "Choice," add options: "9:00 AM," "10:00 AM," "11:00 AM," etc. Set default to "9:00 AM."
- Check-In Status: Select "Choice," add options: "Pending," "Checked In," "Checked Out." Set default to "Pending."
- Check-In Time: Select "Date and time," include date and time.
- HostEmail: Select "Single line of text."
- Click Save after adding each column.
Tip: Ensure column names match exactly as listed, as they’ll be referenced later.
2. Microsoft Forms & Power Automate: Pre-Registration Automation
I used Microsoft Forms for visitor pre-registration and Power Automate to sync form responses to SharePoint and send confirmation emails.
Detailed Steps to Create the Form:
- Go to forms.office.com and sign in.
- Click New Form.
- Set the title to
Visitor Registration. - Add the following questions:
- Visitor Name: Click "+ Add new," select "Text," mark as Required.
- Email: Add "Text," mark as Required, enable "Restrict to email addresses."
- Meeting Purpose: Add "Choice," enter options: "Interview," "Review," "Other." Mark as Required.
- Host Employee’s Email: Add "Text," mark as Required, enable "Restrict to email addresses."
- Expected Arrival Date: Add "Date," mark as Required.
- Expected Arrival Time: Add "Choice," enter options: "9:00 AM," "10:00 AM," "11:00 AM," etc. Mark as Required.
- Click Share, copy the link, and save the form.
Detailed Steps to Create the Power Automate Flow:
- Go to powerautomate.microsoft.com.
- Click Create > Automated cloud flow.
- Name it
Form to List, search for "When a new response is submitted," select the Microsoft Forms trigger, and click Create. - In the trigger, select "Visitor Registration" from the Form Id dropdown.
- Click + New step, search for "Get response details" (Microsoft Forms), and configure:
- Form Id:
Visitor Registration - Response Id: Select dynamic content
Response Idfrom the trigger. - Add a step: Search for "Get user profile (V2)" (Office 365 Users), set User (UPN) to dynamic
Host Employee’s Emailfrom the form response. - Add a step: Search for "Create item" (SharePoint), configure:
- Site Address: Enter your SharePoint site URL (e.g.,
https://yourdomain.sharepoint.com/sites/yoursite) - List Name:
Visitor Records - Map fields using dynamic content:
- Visitor Name:
Visitor Name - Email:
Email - Meeting Purpose:
Meeting Purpose - Host Employee:
Mailfrom "Get user profile" - Expected Arrival Date:
Expected Arrival Date - Expected Arrival Time:
Expected Arrival Time - Check-In Status: Type
Pending - HostEmail:
Mailfrom "Get user profile"
- Visitor Name:
- Add a step: Search for "Send an email (V2)" (Office 365 Outlook), configure:
- To: Dynamic
Emailfrom form response - Subject:
Visitor Pre-Registration Confirmation - Body (use HTML editor):
Dear [Dynamic "Visitor Name"],
Thank you for pre-registering for your visit. Here are the details:
Meeting Purpose: [Dynamic "Meeting Purpose"]
Host: [Dynamic "DisplayName" from "Get user profile"]
Expected Arrival Date and Time: [Dynamic "Expected Arrival Date"] at [Dynamic "Expected Arrival Time"]
Please arrive at the front desk upon arrival.
Best regards,
[My Company Name] - Click Save and test by submitting a form response.
3. Building the Canvas App
The Canvas App provides an interactive interface for staff to manage visitors. Here’s how I built it.
Detailed Steps to Create the Canvas App:
- Go to make.powerapps.com.
- Click Create > Canvas app, select "Tablet layout."
- Name it
Visitor Check-Inand click Create. - In the left pane, click Data, then Add data, select SharePoint, connect to your site, and add the
Visitor Recordslist. - Rename the default screen to
scrTodayVisitors(double-click Screen1 in the Tree view). - Add a Gallery:
- Click Insert > Gallery > Vertical.
- Set Data Source to
Visitor Records. - Set Items property:
Filter( 'Visitor Records', DateValue( Text( 'Expected Arrival Date', "[$-en-US]yyyy-mm-dd" ) ) = Today(), If( drpHostFilter.Selected.Value = "All", true, Host.DisplayName = drpHostFilter.Selected.Value ) ) - Set OnSelect:
UpdateContext({conSelectedId: ThisItem.ID}) - Set DisplayMode:
If( frmVisitorDetails.Mode = FormMode.View, DisplayMode.Edit, DisplayMode.Disabled ) - Customize fields: Click "Edit" next to Fields, add "Visitor Name," "Host Employee," "Expected Arrival Time," "Check-In Status."
- Add a Dropdown (drpHostFilter):
- Click Insert > Dropdown, name it
drpHostFilter. - Set Default:
"All" - Set Items:
Ungroup( Table( { Value: "All" }, Sort(Distinct('Visitor Records', Host.DisplayName), Value, SortOrder.Ascending) ), "Value" ) - Add a Form (frmVisitorDetails):
- Click Insert > Form > Edit Form, name it
frmVisitorDetails. - Set DataSource:
Visitor Records - Set DefaultMode:
FormMode.View - Set Item:
LookUp('Visitor Records', ID = conSelectedId) - Set OnSuccess:
ViewForm(frmVisitorDetails); Notify( "You have updated the record!", NotificationType.Success, 2000 ); UpdateContext({conSelectedId: Self.LastSubmit.ID}) - Add fields: Click "Edit fields," add all columns from the list.
- Add Icons:
- Edit (icoEdit): Insert > Icon > Edit, set OnSelect:
EditForm(frmVisitorDetails), DisplayMode:If( And( frmVisitorDetails.Mode = FormMode.View, Not(IsBlank(conSelectedId)) ), DisplayMode.Edit, DisplayMode.Disabled ) - Save (icoSave): Insert > Icon > Save, set OnSelect:
SubmitForm(frmVisitorDetails), DisplayMode:If( And( frmVisitorDetails.Mode = FormMode.Edit, Not(IsBlank(conSelectedId)) ), DisplayMode.Edit, DisplayMode.Disabled ) - Cancel (icoCancel): Insert > Icon > Cancel, set OnSelect:
ResetForm(frmVisitorDetails), DisplayMode:If( frmVisitorDetails.Mode in [ FormMode.Edit, FormMode.New ], DisplayMode.Edit, DisplayMode.Disabled ) - Print (icoPrint): Insert > Icon > Print, set OnSelect:
Print(), DisplayMode:If( And( frmVisitorDetails.Mode = FormMode.View, Not(IsBlank(conSelectedId)) ), DisplayMode.Edit, DisplayMode.Disabled ) - Save and publish the app.
I chose to use icons over buttons primarily because of space optimization and visual clarity. Icons are compact and blend well into tight UI layouts like galleries, forms, or headers without overwhelming the screen. They also allow for a more modern and intuitive design—users can instantly recognize actions like edit, delete, print, or save just by the visual cue. While buttons are great for more prominent actions, icons are ideal for contextual or secondary actions where space and clean design are priorities.
4. Print Badge Functionality
I added a print feature to generate visitor badges.
Detailed Steps for Print Badge:
- Click Insert > New Screen, name it
scrPrintScreen. - Set DataSource to
Visitor Records. - Set Item:
galTodayVisitors.Selected - Add labels for Visitor Name, Host Employee, Expected Arrival Date/Time (e.g.,
galTodayVisitors.Selected.'Visitor Name'). - Update
icoPrintOnSelect:Set(varOriginScreen, scrTodayVisitors); Navigate(scrPrintScreen);
- On
scrPrintScreen, add a Print button, set OnSelect:Print(); Navigate(varOriginScreen);
5. Power Automate Flows: Check-In and Check-Out
I created two flows to automate check-in and check-out notifications.
Detailed Steps for Check-In Flow:
- Go to Power Automate, click Create > Automated cloud flow.
- Name it
Visitor Check-In - Update List & Notify Host, select "When an item is created or modified" (SharePoint), click Create. - Configure trigger:
- Site Address: Your SharePoint site URL
- List Name:
Visitor Records
- Add a "Condition":
Check-In Statusis equal toChecked In. - In "If yes," add "Send an email (V2)":
- To: Dynamic
HostEmail - Subject:
Visitor Check-In Notification - Body:
Your visitor [Dynamic "Visitor Name"] has checked in at [Dynamic "Check-In Time"].
Meeting Purpose: [Dynamic "Meeting Purpose"]
- To: Dynamic
- Save and test.
Detailed Steps for Check-Out Flow:
- Create a new flow named
Visitor Check-Out - Update List & Thank You Email. - Use the same SharePoint trigger.
- Add a "Condition":
Check-In Statusis equal toChecked Out. - In "If yes," add "Update item" (SharePoint):
- Site Address and List Name as above
- ID: Dynamic
ID - Check-Out Time:
utcNow()
- Add "Send an email (V2)":
- To: Dynamic
Email - Subject:
Thank You for Visiting - Body:
Dear [Dynamic "Visitor Name"],
Thank you for visiting! You checked out at [Dynamic "Check-Out Time"].
Best regards,
[My Company Name]
- To: Dynamic
- Save and test.
6. Dashboard & Reporting
I added a dashboard for insights.
Detailed Steps for Dashboard:
- In the Canvas App, add a new screen named
scrDashboard. - Bar Chart: Insert > Chart > Column chart, set Items:
GroupBy('Visitor Records', "Meeting Purpose", "Count") - Gallery: Add a gallery, set Items:
'Visitor Records', display Check-In Time, Check-Out Time. - Late Arrival Label: Add a label, set Text:
"Late Arrivals: " & CountIf('Visitor Records', 'Check-In Time' > 'Expected Arrival Date' + Time(Value(Left('Expected Arrival Time', 2)), Value(Mid('Expected Arrival Time', 4, 2)), 0))
Conclusion
This Visitor Check-In App demonstrates the power of Microsoft Power Platform, all built within standard Microsoft 365 licensing for zero additional cost. With these detailed steps and code, you can build your own app. Try it out and let me know how it goes!
Snapshots:
No comments:
Post a Comment