Saturday, June 21, 2025

Building a Visitor Check-In App with Microsoft Power Platform: A Hands-On Success

From Paper Logs to Power Platform: Building a Visitor Check-In App in 60 minutes

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:

  1. Navigate to your SharePoint site (e.g., https://yourdomain.sharepoint.com/sites/yoursite).
  2. In the left navigation, click Site contents.
  3. Click + New and select List.
  4. In the "Name" field, enter Visitor Records, then click Create.
  5. 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."
  6. Click Save after adding each column.

Tip: Ensure column names match exactly as listed, as they’ll be referenced later.

SharePoint List Setup

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:

  1. Go to forms.office.com and sign in.
  2. Click New Form.
  3. Set the title to Visitor Registration.
  4. 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.
  5. Click Share, copy the link, and save the form.

Detailed Steps to Create the Power Automate Flow:

  1. Go to powerautomate.microsoft.com.
  2. Click Create > Automated cloud flow.
  3. Name it Form to List, search for "When a new response is submitted," select the Microsoft Forms trigger, and click Create.
  4. In the trigger, select "Visitor Registration" from the Form Id dropdown.
  5. Click + New step, search for "Get response details" (Microsoft Forms), and configure:
    • Form Id: Visitor Registration
    • Response Id: Select dynamic content Response Id from the trigger.
  6. Add a step: Search for "Get user profile (V2)" (Office 365 Users), set User (UPN) to dynamic Host Employee’s Email from the form response.
  7. 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: Mail from "Get user profile"
      • Expected Arrival Date: Expected Arrival Date
      • Expected Arrival Time: Expected Arrival Time
      • Check-In Status: Type Pending
      • HostEmail: Mail from "Get user profile"
  8. Add a step: Search for "Send an email (V2)" (Office 365 Outlook), configure:
    • To: Dynamic Email from 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]
  9. Click Save and test by submitting a form response.
Microsoft Forms Integration

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:

  1. Go to make.powerapps.com.
  2. Click Create > Canvas app, select "Tablet layout."
  3. Name it Visitor Check-In and click Create.
  4. In the left pane, click Data, then Add data, select SharePoint, connect to your site, and add the Visitor Records list.
  5. Rename the default screen to scrTodayVisitors (double-click Screen1 in the Tree view).
  6. 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."
  7. 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"
      )
  8. 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.
  9. 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
      )

    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.

  10. Save and publish the app.
Canvas App Interface

4. Print Badge Functionality

I added a print feature to generate visitor badges.

Detailed Steps for Print Badge:

  1. Click Insert > New Screen, name it scrPrintScreen.
  2. Set DataSource to Visitor Records.
  3. Set Item: galTodayVisitors.Selected
  4. Add labels for Visitor Name, Host Employee, Expected Arrival Date/Time (e.g., galTodayVisitors.Selected.'Visitor Name').
  5. Update icoPrint OnSelect:
    Set(varOriginScreen, scrTodayVisitors);
    Navigate(scrPrintScreen);
  6. On scrPrintScreen, add a Print button, set OnSelect:
    Print();
    Navigate(varOriginScreen);
Print Badge Functionality

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:

  1. Go to Power Automate, click Create > Automated cloud flow.
  2. Name it Visitor Check-In - Update List & Notify Host, select "When an item is created or modified" (SharePoint), click Create.
  3. Configure trigger:
    • Site Address: Your SharePoint site URL
    • List Name: Visitor Records
  4. Add a "Condition": Check-In Status is equal to Checked In.
  5. 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"]
  6. Save and test.

Detailed Steps for Check-Out Flow:

  1. Create a new flow named Visitor Check-Out - Update List & Thank You Email.
  2. Use the same SharePoint trigger.
  3. Add a "Condition": Check-In Status is equal to Checked Out.
  4. In "If yes," add "Update item" (SharePoint):
    • Site Address and List Name as above
    • ID: Dynamic ID
    • Check-Out Time: utcNow()
  5. 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]
  6. Save and test.
Power Automate Flow

6. Dashboard & Reporting

I added a dashboard for insights.

Detailed Steps for Dashboard:

  1. In the Canvas App, add a new screen named scrDashboard.
  2. Bar Chart: Insert > Chart > Column chart, set Items:
    GroupBy('Visitor Records', "Meeting Purpose", "Count")
  3. Gallery: Add a gallery, set Items: 'Visitor Records', display Check-In Time, Check-Out Time.
  4. 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))
Dashboard and Reporting

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:

SharePoint List Setup Microsoft Forms Integration Power Automate Flow Canvas App Interface Print Badge Functionality Dashboard and Reporting

No comments:

Post a Comment

Power Automate Optimization: Filter Rows vs Trigger Conditions - When and Why to Use Each

Filter Rows vs Trigger Conditions in Power Automate Filter Rows vs Trigger Conditions in Power Automate Why your flow...