WorkshopPLUS - Power Apps For Power User - Labs

Hands-on Labs
WorkshopPLUS
Power Platform: Power Apps for Power User
Published: August 2023

Table of contents
Lab overview ........................................................................................... 1
Abstract .................................................................................................................................................................... 1
Lab Structure and Learning Objectives .......................................................................................................... 1
Power Apps canvas studio layout ........................................................... 2

Device Orders scenario ............................................................................ 4
Solution Overview................................................................................................................................................. 4
Exercise 1: Creating the app and layout ........................................................................................................ 5
Exercise 2: Building the app header ..............................................................................................................11
Exercise 3: Connect the app to data .............................................................................................................15
Exercise 4: Add a device gallery to the Main Screen................................................................................20
Exercise 5: Add a compare screen .................................................................................................................37
Exercise 6: Ordering a device for approval .................................................................................................50
Exercise 7: Creating the approval flow .........................................................................................................54
Exercise 8: Testing the app ...............................................................................................................................69
Exercise 9 (Optional): Reusable components .............................................................................................75
Exercise 10 (Optional): AI Builder ...................................................................................................................85
WorkshopPLUS – Power Platform: Power Apps for Power User – Hands-on Labs
Lab overview
Abstract
This is a beginner level lab with optional intermediate modules for you to get hands-on
experience with the Microsoft Power Platform technologies – Power Apps and Power Automate.
The lab includes step-by-step instructions for someone new to these technologies to build a
Device Orders solution in a few hours.
Technologies covered:
- Power Apps: A software-as-a-service application platform that enables power users in

line of business roles to easily build and deploy custom business apps. You will learn how
to build canvas style apps.
- Power Automate: A business service for a line of business specialists and IT Pros to build
automated workflows.
Make sure to follow all the pre-requisite steps listed in this document before starting the labs.
Once you have completed the lab, please share your feedback with the Engineer delivering this
course.
For a list of additional learning resources and introductory videos, see:

http://aka.ms/powerapps-resources
Lab Structure and Learning Objectives
This lab is divided into one primary module and a few (intermediate) optional modules:
The primary module focuses on:
1. Connecting to data sources and filter results based on certain criteria

2. Working with screens and navigation
3. Using controls, properties, formulas, and actions to customize the user experience
4. Displaying the logged in user’s name
5. Configure app settings
1 WorkshopPLUS – Power Platform: Power Apps for Power User

6. Saving, publishing, and sharing an app
7. Integrating Power Automate with Power Apps
8. Running an app on a mobile device
Optional modules cover the following topics:
1. Building reusable canvas components

2. Using AI builder to create an Invoice Management App
Power Apps canvas studio layout

Power Apps canvas studio is a web-based application (https://make.powerapps.com) that you
can use in any of the following browsers:
Browser Operating system
Microsoft Edge (latest version) Windows 10 or later
Google Chrome (latest version) Windows 10 or later, macOS 10.13 or later
Power Apps canvas studio has three panes and a ribbon that make app creation feel like
building a slide deck in PowerPoint. Formulas are entered within a function bar that is like Excel.
Interface layout:
1. App authoring pane, which allows you to navigate screens and controls, data sources
etc.
2. Canvas pane, which contains the app screen that you are working on, screen selector
and zoom options
3. Properties pane, where you configure properties for controls, bind to data and set
additional advanced settings
4. Properties list, where you select the property for the selected control that you want to
configure
5. Formula bar, where you add formulas (like in Excel) that define the behavior of a
selected control
6. Ribbon, where you perform common actions including customizing design elements.

Device Orders scenario
Imagine an organization where every three years, the employees go through a hardware refresh
cycle. The organization would like to build a customized app that runs on the web and mobile
devices that will help streamline the device order and approval process. Moreover, they do not
have traditional development resources available, such as .NET, Xamarin or a website developer,
to create this application.
Solution Overview
Microsoft Power Platform technologies enable users familiar with technology (aka ‘citizen
developers’) to build a customized device ordering solution. The application user interface and
interaction logic are built in Power Apps, the approval process is automated using Power
Automate, and the device order data is stored in a SharePoint list.
Key features of the solution:
a. Ability to browse through a selection of devices and filter by manufacturer

b. Select devices to compare
c. View detailed specifications for the selected devices on a second comparison screen d.
Select a device to order
e. Order / request a device
f. Send an automated approval request email when the order is placed
g. Allow the approver to approve or reject an order and add comments without leaving
their inbox
h. Notify the user when an order is approved or rejected

Exercise 1: Creating the app and layout
Important
Do not start this exercise unless Prerequisites are complete.
If you are experiencing problems with progressing through these labs – please, ask your instructor for help.
Task 1: Sign into Power Apps
In this task, you will sign into Power Apps
1. Navigate to https://make.powerapps.com and sign in with your business or school

account if you have not already done so
2. Before creating an app, switch to the correct environment (where your organization
permits development apps to be created).
Click the Environments drop-down in the top right of the screen to switch to the correct
environment.
Task 2: Create a new app
1. In the Home screen, click ‘Blank app’

2. In the next dialog under ‘Blank canvas app’ option click ‘Create’

3. Input ‘Device Orders’ in the App name field. Select ‘Tablet’ for Format. Click ‘Create’
4. Click ‘Skip’ if you receive the Welcome to Power Apps Studio prompt
5. If prompted, select your region, then click ‘Get Started’

Task 3: Add a screen with layout
Canvas Apps Coding Standards and Guidelines
It is a good practice to rename screens and controls as you create them so that they are easier to locate as
you work with formulas that reference different controls. In this lab, we will rely on the best practices and
naming conventions defined in Canvas apps coding standards and guidelines.
Full document link: https://aka.ms/powerappscanvasguidelines
1. Make sure you have selected Tree View (1) in the App authoring pane
Click +New screen (2) and select Sidebar (3) layout
2. Click “…” next to Screen2 (or right click) and select the Rename option

3. Change the name to ‘ Main Screen’
4. Click “…” next to Screen1 (or right click) and select the Delete option
5. In Tree View pane, Rename containers according to naming conventions:

• ScreenContainer1 -> ctLayout
• HeaderContainer1 -> ctHeader
• BottomContainer1 -> ctBottom
• SidebarContainer1 -> ctSidebar
• MainContainer1 -> ctMainSection

Task 4: Save the application
In this task, you will save an initial version of the app. Power Apps saves automatically each 2
minutes after the first save (Tip: This setting can be disabled).
1. First, check if there are any errors in the app. Click on the ‘App checker’ icon
2. App checker pane will become visible. If there are any errors, they will be displayed here 3.
Close the App checker pane
4. Click Settings button in the ribbon
5. In the Settings – General dialog , you can:

a. Change your App name
b. Customize the App icon (choose a background color and icon)

6. Select Display tab to view available screen size and orientation and aspect ratio settings.
For this app, we will leave it at the default setting of Landscape with 16:9 aspect ratio
7. Set Scale to fit as Off.
This setting will make app screen responsive instead of simple app resize, but it will
require you to leverage techniques to enable dynamic layout.
For more details read: Create responsive layouts in canvas apps
8. Click ‘X’ in the top-right corner to close the dialog
9. Click Save button in the ribbon toolbar
Tip: In Power Apps, when you save a version of your app, the first version is published by default
and available to everyone that you share the app with. Subsequent saves are only visible to the
app maker in the studio. You must explicitly publish it for all app users to get the update.

Exercise 2: Building the app header
In this exercise you will learn how to add a header to the app and display the logged in user’s
name.
Task 1: Add a header containing the app name and logged in user’s name
In this task, you will add a header to the Main Screen that displays the app name and the
logged in user’s name
1. Select ctHeader container and set its properties as:
a. Justify (horizontal) -> Center

b. Align (vertical) -> Stretch
c. Wrap -> On
3. For ctHeader set the Fill property to RGBA(0, 18, 107, 1) in order to change the color to
dark blue.
4. Select ctHeader container
Select the ‘Insert’ tab in the ribbon and select ‘Text Label’

5. Rename the label from Label1 to lblHeader
6. Select Text from the property drop-down list and enter “Device Orders” in the formula
bar. You can also type directly into the label by double-clicking it
Text "Device Orders"
7. For lblHeader, set Align property as Align.Center
Align Align .Center
8. For lblHeader, set Color property as Color.White
Color Color .White

9. For lblHeader, set Size property as 24
Size 24
10. For lblHeader, in property pane, set Flexible width as On
11. Insert one more text label into ctHeader

12. Rename the label to lblUserName
13. For lblUserName label, select the Text property and change the value to :
Text "Hello, " & User().FullName
Tip: All functions in Power Apps are case-sensitive. As you start typing ‘User’ you will see a
dropdown of available choices. It is a good idea to pick from the auto-complete options. You
will also notice help text at the top showing the parameters that are expected, in this case it
requires no input parameters.
14. Set the text alignment of the label text to Right
15. Change the Color to White
16. Set Flexible Width – On in properties pane
17. Change the PaddingRight property from 5 to 20. You can do this quickly by using the
Properties pane on the right-hand side.
18. Your app header may look like this. The task is complete.

Exercise 3: Connect the app to data
In this exercise you will learn how to connect the app to the various data sources required for
the app to both display devices and track device orders.
Tip: What is a data connection? In Power Apps, a data connection adds data to your app. Your
canvas app can connect to SharePoint, Dataverse / Dataverse for Teams, SQL Server, Microsoft
365 and over 900 first- and third-party services.
Task 1: Import static data from Excel
In this task you will learn how to create a connection to the Excel spreadsheet containing device
data for the solution.
1. In the app authoring pane, click the Data icon
2. Click +Add data dropdown, in popup menu type Excel into the search box
3. Click Import from Excel

4. The Open dialog will appear, browse to the location where the spreadsheet ‘deviceorder-
data.xlsx’ is saved (as in Task one of the Prerequisites)
5. Click Open
6. In the right-hand pane, from the Choose a table dialog, select both the Devices and
Manufacturers tables
7. Click Connect
8. The Devices and Manufacturers connections should be listed in the Data pane

Task 2: Create a connection to SharePoint
In this task you will learn how to create a connection to the SharePoint site that contains the
‘Order Data’ list (task four of the Prerequisites).
1. In the app authoring pane, click the Data icon
2. Click +Add data dropdown, in popup menu type SharePoint into the search box
3. Select SharePoint

4. If this dialog is displayed, click Add a connection
5. Ensure that Connect directly (cloud services) is selected
6. Click Connect
7. In the ‘Enter the SharePoint URL for the location of your list’ input box, paste the URL of
your SharePoint site, or select the sire URL from the list of recent sites and click Connect

8. In the ‘Choose a list’ dialog, select the ‘Order Data’ list (created in task four of the
Prerequisites)
9. Click Connect
10. The ‘Order Data’ list connection will appear in the list of connections in the Data pane

Exercise 4: Add a device gallery to the Main Screen
In this exercise, you will add a gallery containing all available devices making it easy for users to
browse the list and get a quick overview of the devices available.
Tip: What is a gallery? A gallery control can show multiple records from a data source, and each
record can contain multiple types of data. For example, a Gallery control can show multiple
contacts with each item showing contact information that includes a name, address, and a
phone number for each contact.
Task 1: Add a device gallery
In this task you will learn how to add a gallery control to your app containing a list of all devices.
1. Select ctMainSection and in Insert dialog search for Horizontal gallery Add it to
ctMainSection
This will add a gallery called Gallery1 onto the screen. Notice the control tree view on the left
displays this gallery with three controls within it – two text labels and an image. A data pane will
pop up on the right.

2. Go to the Properties pane, click on the Items drop-down and select ‘Add a data source’
3. Select ‘Devices’ from the list of data connections under the ‘In your app’ section
4. Rename Gallery1 to galDevices

5. Select the galDevices and set TemplateSize as 200
TemplateSize 200
6. Select the Image1 and in the properties pane select Imagen Position → Fit

Tip: Galleries provide a powerful way to visualize tabular data in Power Apps. It is important to
become familiar with customizing a gallery. Key components of a gallery include: the gallery
control, the template cell (the first cell), and controls within the template cell.
To select the entire gallery – click on the gallery in the tree view on the left or click on the
second or third cell inside the gallery. Clicking any cell that is not the first cell of the gallery will
select the entire gallery. Now you can specify properties that apply to the entire gallery, such as
the items property (the galleries data source).
Task 3: Add a gallery to show manufacturers
In this task you will add a second gallery that lists the various device manufacturers. This will be
a single column vertical gallery positioned on the left side of the screen, with each cell
displaying the manufacturer’s logo image. This gallery will later be used as a filter for the device
gallery created above.
1. Select ctSidebar as set Align (horizontal) property as Stretch.

2. Select ctSidebar and in Insert dialog search for Vertical gallery
3. In the ‘Select a data source’ dialog, select Manufacturers

4. Rename the gallery to galManufacturers
5. The app should look like the image below

6. Select the galManufacturers (not the template cell), then in the Properties pane on the
right, click Layout
Scroll down to the Gallery section and select 2 columns
7. Set Flexible Height as On
8. Change the Wrap Count from 2 to 1. This will change the gallery to a single column Set
Template Size as 150
9. Select the galManufacturers and set the width to 400.
10.Select save.

Task 4: Display the manufacturer logo
In task three, you added a single column, vertical gallery connected to the manufacturers table
in the Excel data connection. In this task, you will update the gallery to display the manufacturer
logo.
1. Select the galManufacturers. Make sure the whole gallery is selected, and not just the
first cell
2. Select Items from the property drop-down and ensure that Manufacturers is visible
3. Select the image control in the first template cell in the gallery and change the value of
Image in the formula bar fromThisItem.HQ to ThisItem.Logo
For Image, set Height property as 150
Height 150
For Image, set Width property as Parent.Width
Width Parent .Width
All items in the gallery will now display logo images (see the image below)

4. Select the first image (topmost) and using the Properties pane on the right, set the
image position to Fit

Task 5: Highlight the selected item in the gallery
In this task, you will learn how to use the TemplateFill property of the manufacturer gallery to
specify a highlight color for the item.
1. Select the galManufacturers

2. From the properties drop-down, select the TemplateFill property
3. In the formula bar, enter the following: If(ThisItem.IsSelected, Color.LightBlue)
TemplateFil l If(ThisItem .IsSelected, Color .LightBlue )
4. Use the preview mode to perform a quick test of the highlighting. You can enable
preview mode by holding down the Alt key and clicking a few different manufacturers in
the gallery. Preview mode ends when you stop holding the Alt key.
Tip: You could alternatively click the Play button to enter preview mode, and to exit this you
would click the X in the upper right corner or use the Esc key.
Task 6: Filter the devices based on the selected manufacturer
In this task, you will learn to use the Filter() function to filter the items in the galDevices to only
display devices that match the selected item in the galManufacturers.
1. Select the galDevices

2. From the properties drop-down, select Items. Enter the following
expression in the formula bar:
Filter( Devices, ManufacturerID = galManufacturers.Selected.ManufacturerID)

This will filter the device gallery to only display items that match the selected
manufacturer based on ManufacturerID.
For alternate/European locales, enter:
Filter( Devices; ManufacturerID = galManufacturers.Selected.ManufacturerID)
3. Enter preview mode
4. Select a different item in the manufacturer gallery on the left, and you will notice the device
gallery will update accordingly

Task 7: Configure text labels in the device gallery
In this task you will learn how to configure text label formatting to the template cell.

2. Select the title, it is named Title1 in the left navigation
3. Change the label to the device name by setting the label’s Text property to
ThisItem.Title and resize it to fit the text
Formatting suggestions (these are optional, feel free to move forward to step 4).
- Expand the width of the label to the template width
- Change the PaddingLeft from 0 to 10
- Change the Font to Segoe UI
4. Select the Subtitle1 control
5. In the property drop-down list, select the Text property, change it to ThisItem.Price:

6. To add the currency formatting, use the text expression: Text(ThisItem.Price, “$”)
Task 8: Conditional formatting to highlight devices above $1,000
In this task, you are going to format devices that have a value greater than $1,000 by displaying
the price in Red.
1. Select the label in the template cell that displays the price
2. In the properties drop-down, select the Color property.
3. In the formula bar, enter the following: If(ThisItem.Price>1000, Color.Red, Color.Green)

Task 9: Add a checkbox to add a device to Compare list
We want to be able to allow users to compare devices before making an order, in this task you
will learn how.

2. Click the pencil icon in the top left of the gallery to select the template cell
3. Make sure that only the first item in the gallery is selected
4. Add Check box using Insert pane or button in ribbon

5. Under the Controls drop-down, select Checkbox
6. Drag the checkbox control below the price
7. Change the checkbox text to ‘Compare’ (you can do this by setting the Text property or
click within the text of the control and typing directly into the control)
Task 10: Create a collection for the selected devices
In this task you will create a collection called CompareList. This will allow users to compare
devices before deciding to place an order.
Tip: What is the collection? A collection is a group of items that are similar, such as devices in a
device list
1. Select the Checkbox control

2. Find OnCheck property and type the following expression in the formula bar:
OnCheck Collect( CompareList , ThisItem )
for alternate/European locales, enter:
OnCheck Collect( CompareList ; ThisItem )
3. Click the OnUncheck value and type the following expression in the formula bar
OnUnc heck Remove (CompareList , ThisItem)
for alternate/European locales, enter:
OnUnc heck Remove (CompareList ; ThisItem)
4. From the properties drop-down, select the Default property

5. Set Default property as follows:

Default ThisItem in CompareList
Note: The Default property of the checkbox is a Boolean (true of false) value that determines if
the checkbox should be checked or not by default. Setting it to this formula will ensure that the
checkbox is checked by default if the item has already been added to the collection since the
result will be true, i.e., this item ‘is’ in the CompareList collection.
6. Test the checkbox functionality. Run the app in preview mode (F5) or by clicking the
preview button, click on checkboxes of three items
7. Close preview mode (clicking X)

8. Click on Collections and select CompareList

9. You should see the CompareList collection and the three items that you selected
10. Run the app in preview mode (F5) or by clicking the preview button, click on checkboxes
of three items to uncheck them
12. Click on ellipsis “…” in ribbon toolbar and select Collections
13. Check that all items were removed from the CompareList collection

Task 11: Set the default selection to the first manufacturer
In this task, you will learn how to ensure that the app doesn’t display a blank list of devices when
the app starts by setting the default item in the Manufacturer gallery to be the first item.
1. Select the galManufacturers in the tree view in the left pane
2. From the properties drop-down, select the Default property. Enter the
following expression in the formula bar
4. Run the app in preview mode (F5)

5. The app should look like the image below

Exercise 5: Add a compare screen
The compare screen is where users will compare the selected devices and then choose the
device that they wish to submit for approval.
This screen will include:
- A back button for navigation back to the Main Screen

- A list of selected devices for comparison
- Additional details for each device
- Highlighting the selected device
Task 1: Add a screen
In this task you will add the Compare Screen to the app.
1. Click New screen

2. Select Header and footer
3. Rename the screen to Compare Screen.

Task 2: Add compare and clear buttons to Main Screen
In this task you will learn how to add buttons to the Main Screen that add functionality to the
app to navigate to the Compare Screen and clear the selected devices for comparison
1. In the Tree View, on Main Screen select ctMainSection

2. Click the Insert button and add Horizontal container Rename it as ctFooter
3. Set ctFooter properties as:
a. Justify (horizontal) -> Center

b. Align (vertical) -> Center
c. Gap -> 15
d. Wrap -> On
e. Flexible Height → Off
f. Height → 100
4. Select ctFooter and select + Insert and select a button.
5. For the button, in formula bar set Text property as:
"Compare " & CountRows(CompareList) & " item(s)"

6. Resize the button so the text fits without wrapping (e.g., Width -> 200)
7. Select the button and set the DisplayMode property expression to:
If(CountRows(CompareList) > 0, DisplayMode.Edit, DisplayMode.Disabled)
For alternate/European locales, enter:
If(CountRows(CompareList) > 0; DisplayMode.Edit; DisplayMode.Disabled)

9. Select a few devices
10. Check that the button displays the number of devices selected for comparison
13. Unselect the devices.
14. Check that the button is disabled.

16. In Tree View, rename this button as btnCompare
17. Insert one more Button to ctFooter
18. Change the Text property to ‘Clear selection’
19. In Tree View, rename this button as btnClear
20. Set the OnSelect property of the button to the following expression: Clear(CompareList)
Note: This will remove all the items in the CompareList collection when the user clicks the
button
21. Select the btnCompare button
For btnCompare, set OnSelect property as:
22. Click Preview and select a couple of devices and click the Compare button
23. Verify that it takes you to the Compare Screen, then close Preview (clicking X)

Task 3: Add controls to the Compare Screen
In this task, you will copy the various controls that you want to display on both the Main Screen
and Compare Screen.
1. In the tree view, select the Main Screen

2. Select ctHeader
3. Click on the ellipsis of the Header
4. Select Copy
5. Select top-level ScreenContainer container on Compare Screen and Rename it as ctLayout_1
6. Select paste.

7. Expand ctLayout_1 and remove existing empty HeaderContainer
8. Move ctHeader_1 container to top and see how layout changes
9. Rename MainSectionContainer as ctMainSection_1 and FooterContainer as ctFooter_1

10. Copy the galDevices from the Main Screen and paste into ctMainSection_1 container
on the Compare Screen
11. The app should look like this:

12. Rename this gallery to galCompareList
13. Save your app

Task 4: Configure the gallery
In this task you will configure the gallery to show devices that were selected from the
comparison gallery on the Main Screen.
1. Select the new galCompareList

2. Select the Items property drop-down and in the formula bar set it to CompareList
3. The gallery will now show the selected items from the Main Screen

Task 5: Remove and add controls to the gallery
In the Compare Screen we are selecting a specific item to place an order/ submit for approval,
so we no longer require the compare checkbox. In this task you will remove the compare
checkbox and add new controls to the template cell.
1. Select the Compare Screen

2. Select the galCompareListM template cell
3. Select the Compare checkbox on the template cell and press the Delete key to delete
the checkbox
4. Click the pencil icon in the top left of the gallery to select the template cell
5. Open Insert pane on the left or on ribbon toolbar

6. Click Text Label
7. Rename the label lblManufacturerName
8. Set the Text property to the following expression: ThisItem.ManufacturerName

9. Change font weight from Semibold to Normal and change the size property to 18
10. Insert one more Text Label into the gallery template
11. Rename the new label as lblDeviceMemory
12. Set the Text property to the following expression: ThisItem.Memory
13. Repeat this process to add in the following labels:
Label Text property
lblDeviceProcessor ThisItem.Processor
lblDeviceStorage ThisItem.Storage
lblDeviceScreenSize ThisItem.ScreenSize
14. Order your text labels. Your screen should look like the bellow one:

Task 6: Highlight the selected device
In this task you will recreate the behavior of the selected manufacturer in the Main Screen.
When a user clicks on a device, you will set the template fill to show that it is highlighted.
1. Select the galCompareList

2. From the properties drop-down, select the TemplateFill property
3. In the formula bar, enter the following expression: If(ThisItem.IsSelected, Color.LightBlue)
This is conditionally setting the Fill color if the cell is selected. Click a few different items in the
gallery, notice the selected item is highlighted in a light blue color.

Task 7: Add an icon to navigate to the Main Screen
In this task you will learn how to add an icon to navigate back to the Main Screen.
1. Select the Compare Screen
2. Click Insert in ribbon tool bar and find Back arrow icon. Add it into ctHeader_1
3. In Tree view , in ctHeader_1 container select Icon and reorder it to the start
4. Select the Icon and change the Color to White

5. From the properties drop-down select the OnSelect property and in the formula bar enter
the following expression:
OnSelect Back ()
Note: This will cause navigation back to the previous screen.
7. Save your app.

Exercise 6: Ordering a device for approval
So far, you have built the app. Users can browse and compare devices. In this exercise you will add
additional functionality so that users can create an order using form and submit a device for approval. In
this lab, device orders will be managed in a SharePoint list (created as part of the prerequisites). Power
Automate flow will be created in subsequent exercises to manage the approval process.
Task 1: Add an order button
In this task, you will add an order button to the galCompareList template cell.
1. Select ctFooter_1 of the Compare Screen
Set the ctFooter_1 properties as:
a. Justify (horizontal) → Center
b. Align (vertical) → Center
c. Gap → 15
d. Wrap → On
2. Click Insert on the ribbon and add a Button to ctFooter_1.

3. Rename the button to btnPlaceOrder
4. From the properties drop-down select the Text property and change it from ‘Button’ to
“Order”
5. Select the OnSelect property and in the formula bar, enter the following expression:
Patch('Order Data', {
Title: galCompareList.Selected.Title,
Price: galCompareList.Selected.Price,
OrderStatus: "In review"
}
)

For alternate/European locales enter:
Patch(Order Data'; {
}
)
6. Test the app. Enter preview mode (F5) and click the Order button for one of the laptops.
Check that the order information was created in the SharePoint list:
Tip: The Patch() function creates or modifies a record. In the expression above, we are creating a
new record in the SharePoint list titled ‘Order Data’.
Task 2: Notifying the user
In this task, when an order has been placed, you will create a notification to communicate that
the order has been placed to the user.
1. Select the button btnPlaceOrder

2. From the properties drop-down, select OnSelect
3. At the end of the expression (created in task one) add a chaining operator: semicolon ‘;’.
In alternate/European locales: changing operator is double semicolon ‘;;’
4. Press Shift+Enter
5. On the new line, append the following expression:

}
);;
Notify("Thank you for placing an order" ; NotificationType.Success)
In alternate/European locales:
}
);;
Notify("Thank you for placing an order" ; NotificationType.Success)
6. Test the app, enter preview mode, and click the Order button. You should see a
notification shown in the image below:

Exercise 7: Creating the approval flow
In this exercise, you will be introduced to Microsoft Power Automate.

You will learn how to build a basic approval flow for the device ordering process.
Please, pay attention that a new UI experience for Power Automate flow creation is rolling
out and screenshots may differ from this experience.
Task 1: Create a new Flow
1. In the browser, go to https://make.powerautomate.com/
2. In the top right of the screen, click Sign In
3. Before creating a flow, switch to the correct environment (where your organization
permits development apps to be created).
Click the Environments drop-down in the top right of the screen to switch to the correct
environment.
4. In the left navigation, click + Create

5. In the Create screen, select “Automated cloud flow”
Tip: Flows are started with a ‘Trigger’. There are three basic triggers to start a flow:
- Automated: designated events will start the Flow; for example: a new item created in a
SharePoint list
- Instant: Flows are started manually by the user
- Scheduled: Flows start at a frequency specified; for example: every day at 10:00 hours
6. In the ‘Build an automate cloud flow’ dialog, enter Purchase approval in the Flow name
box, select ‘When an item is created’ (SharePoint) and finally click Create.
7. Click in the Site address input box, select Enter custom value and type/ paste the URL of
the SharePoint site that you created for Order Data, and in the List name drop down,
select the ‘Order Data’ list

Task 2: Lookup the requestors line manager
1. Click New Step.
2. In the Choose an action dialog, enter Office 365 Users in the search box. Then select
Office 365 Users from the results pane

3. In the actions list select Get Manager (V2).
4. Click on the ellipsis (…) and select “Rename”
5. Enter “Lookup user manager”
6. Click the ellipsis (…), then select ‘Add a note. In the comment box, enter ‘This step looks up
the requester manager’ .

Tip: Renaming actions and providing notes is good practice as it ensures that co-owners of
the flow understand the context and purpose of specific actions.
7. Click inside the User (UPN) box and select ‘Add a dynamic content’ icon
8. Search for Created by Email property retrieved from SharePoint trigger.
9. The flow should now look like the screenshot below

Task 3: Add an approval
In this task you will learn how to use the Approvals connector.
Note: If your organization blocks this via DLP (Data Loss Prevention) policies, then you will not
be able to proceed with this task.
1. Click New Step
2. In the search box, type ‘Approvals’ and then select Approvals

3. From the list of available actions, select “Create an approval”
4. In the approval type drop-down, select ‘Custom responses – wait for one response’
5. In the Create an approval action, enter the following:
- Response options item 1: Approve

- Response options item 2: Reject
- Title: New device request approval
- Assigned to: Enter YOUR OWN email
- Details: You have received a new device request from (select ‘Created By DisplayName’
from the When an item is created trigger in dynamic content)
- Item link: Select Link to item from the ‘When an item is created’ trigger –

Note: We are not using manager email to avoid sending it to your manager as a part of this lab
6. Click “New Step”
7. Type ‘Approval’ in the search box, then select ‘Wait for an approval’
8. Click the ellipsis (…), rename the step ‘Wait for approval decision’

9. Click the ‘Approval ID’ box, and from the dynamic content dialog, select ‘Approval ID’
Task 4: Add a condition
In this task you will learn how to add in a condition. A condition action handles specific
conditions in your Flow, such as ‘If a property equals a value’, or ‘If a property is greater than a
value’.
1. Click ‘ New step’

2. In the actions window, select ‘Condition ’
3. Click the ellipsis (…), then rename the step ‘Approval decision’, and add a note
‘This condition handles the approval or rejection of the request’

4. Click inside the ‘Choose a value’ box and from the dynamic content dialog, select
‘Outcome’
5. In the ‘If y es’ branch of the condition, click Add an action
7. In the search box type Email and from the list of available connectors, select Office 365
Outlook. From the list of available actions, select ‘Send an email (V2)’:

8. Rename the action ‘Confirmation Email’
9. Click inside the To box, and then ‘Add a dynamic value icon’ 10. Select ‘Created By
Email’ from the dynamic content area
11. In the subject box, type: Confirmation of your device order

12. In the body area, type the following, note: the blue properties (Created By DisplayName
& Title) are taken from the dynamic content dialog:
13. Click ‘Add an action’

14. In the ‘search connectors’ box, type SharePoint
15. Select SharePoint in the list of connectors
16. Scroll down and select ‘Update list item’
17. In the Site Address box, enter the URL of the SharePoint site
18. Select the ‘Order Data’ list from the List drop-down
19. In the Id field, select ID from the dynamic content dialog

20. In the Title & Price fields, select the correct property from the dynamic content dialog.
21. In the OrderStatus field, enter: Approved
Your action should look like the following screenshot:
22. Now click Add an action in the If no branch of the condition
23. In the connector search box, type Office 365 Outlook
24. From the list of actions, select Send an email (V2)

25. Rename the action to Rejection email
26. Enter the following information:
- To: Created By Email (from dynamic content)

- Subject: Update about your device order
- Body:
Hi ‘Created By DisplayName’ (from dynamic content),
This email is to confirm that your recent request for:
Title (from dynamic content)
Has been rejected,
Many thanks
27. Your action should look like the following image:
28. In the If no branch, click Add an action
29. In the search connectors box, type SharePoint. From the list of actions returned, select
Update item

30. Enter the following information:
- Site Address: Enter the URL of your SharePoint site

- List Name: Select ‘Order Data’
- Id: Select ID from the SharePoint trigger
- Title: Select Title from the SharePoint trigger
- Price: Select Price from the SharePoint trigger
- OrderStatus: Enter ‘Rejected’
31. Your action should look the same as the image below:
32. Save your flow.

Exercise 8: Testing the app
It is a good idea to save and test your app regularly. There are a few ways in which you can test
your app:
- Hold the Alt key down and click on controls to activate the functionality
- Enter preview mode (F5)
- Play the app
In this exercise you will run through some tests of your app
Task 1: Testing the compare device functionality
In this task you will perform some tests in your app.
1. Go to the Main Screen and Preview the app by clicking the Play button in the top right
2. Uncheck if there are any checked devices
3. Select Microsoft on the left to show a filtered set of devices
4. Check the compare box on a few devices on the main screen from a few different
manufacturers

5. Click on different devices in the gallery and verify that the selection highlight works.
6. Click the Back button and confirm you get back to the main screen

7. Click Clear selection
Clic
8. The CompareList collection will clear, and the Compare button will become disabled
9. Close the preview.

Task 2: Testing the flow
In this task, you will test the flow. When a device order is placed, a corresponding item is created
in SharePoint. Creation of this list item will trigger the flow
1. Go to https://outlook.office.com and confirm that when you place a request for a new
device, you receive the following email:
(It may take some minutes to send the email)
2. Click ‘ Approve’
3. Click ‘Submit’

4. Go to the SharePoint site and confirm that the request OrderStatus column has been
updated to ‘Approved’
5. Go back to outlook and check that you have received the confirmation
email.

6. Follow from Step 1 again, this time reject the request.
7. Check that the SharePoint list item OrderStatus column is updated and that you receive
the rejection email
Primary labs are completed! 😊
Please, give an update to your instructor and proceed to

optional tasks if you want to do them and if you have time
remaining.

Exercise 9 (Optional): Reusable components
In this exercise you will replace some elements of the app using reusable components.
Tip: What are reusable components? In this hands-on step-by-step guide, you grouped
together and then copied some controls from one screen to another. If we wanted to make an
update to these controls, then we would need to update each copy (across ‘n’ number of
screens). Many small edits can amount to a significant task. Reusable components are reusable
building blocks for canvas apps. They behave in a master-instance manner, meaning that any
updates you make to the original component will apply to other copies in your app.
Task 1: Creating a component
In this task you will learn how to create an empty component.
1. In the Tree View, notice now there is a new option ‘Components’

2. Click on Components
3. Click New component

4. Rename Component1 to cmpHeader

5. In the right-hand pane, set the components width to 1366 and its height to 80
6. Add a label to the canvas

7. Rename the label lblAppTitle
8. Add another label
9. Rename the label lblLoggedInUser
10. Click the Insert tab on the ribbon

11. Select Icons
12. Select the Back arrow
13. Position the arrow to the left side
14. Resize the arrow
15. Rename the Icon icoBack
Your component should look like the image below:

Task 2: Creating custom properties
In this task you will learn how to give the reusable component properties, much like the controls
that you have been working with throughout this hands-on step-by-step guide.
Tip: What are custom properties? A component can receive input values and emit data if you
create one or more custom properties. An input property is how a component receives data to
be used in the component. For example, the Default property of a text input control.
An output property can emit data or component state. For example, the Selected property on a
gallery control is an output property.
1. In the right-hand pane, select New custom property

2. Set the Display name to App Title
3. Set the Name to AppTitle
4. Set the Description field to ‘Title of application’
5. Select Input for Property type
6. Select Text for the Data type
7. Click Create
8. Your property should look like the image below
9. Click New custom property

10. Set the Display name to Logged in user
11. Set the Name to LoggedInUser
12. Set the Description field to ‘Logged in user’
13. Select Input for Property type
14. Select Text for the Data type
15. Click Create
16. In the right-hand pane, select New custom property

17. Set the Display name to Back icon visibility
18. Set the Name to BackIconVisibility
19. Set the Description field to ‘Back icon visibility’
20. Select Input for property type
21. Select Boolean for the data type

22. Click Create
23. Your list of custom properties should now look like the image below:

Task 3: Setting defaults for custom properties
In task two you created a custom property. In this task you will set the properties for the device
ordering app.
1. Select the component cmpHeader

2. In the properties drop-down, select LoggedInUser
3. In the formula bar, enter the following expression: User().FullName
4. In the properties drop-down, select AppTitle

5. In the formula bar, enter the following:
“Device Orders”
6. Select the label lblAppTitle

7. In the properties drop-down, select Text
8. In the expression bar, enter the following formula:

Text cmpHeader .AppTitle
9. The label should update and display the text that we added in the AppTitle property.
Resize the label so that the text does not wrap.
10. You can also update the following properties of the label so that the appearance matches
the app, for example:
- Font size: 20
- Font weight: Bold
- Align: Center
- Color: White
11. Select the component cmpHeader and set the background fill to the same color blue as
the app:
12. Select the label lblLoggedInUser

13. Set Color property as White and resize label a bit wider
14. In the properties drop-down, select Text
15. In the expression bar, enter the following formula:

Text "Welcome, " & cmpHeader .LoggedInUser
16. Select the icon icoBack

17. In the properties drop-down, select OnSelect
18. In the formula bar, enter the following formula:
OnSelect Back ()
19. Set Color property as White

20. In the properties drop-dow, select DisplayMode and enter: DisplayMode.View
21. In the properties drop-down, select Visible
22. In the formula bar, replace ‘true’ with the following:
Visible cmpHeader .BackIconVisibility
23. Click Save

24. Click Back icon

Task 4: Adding components to the Main Screen and Compare Screen
In this task, you will add the component to the Main Screen and Compare Screen
1. Select Main Screen

2. Select the header group and press Delete
3. Click the Insert button on the ribbon

4. Search for cmpHeader or find it in Custom category Select cmpHeader
5. The component will now be displayed on the Main Screen

6. Select the ctBottom and in the properties pane enter the Padding Top to 70
7. Position the component to the top of the screen.

8. In the properties drop-down, select the ‘BackIconVisibility’ property as false
9. Note that the Back icon is no longer visible
10. Select the Main Screen

11. Start preview mode (F5)
12. Select a few devices, then click the Compare button (this will navigate to the Compare
Screen)
13. Click the back icon
14. Stop preview mode (clicking X)

Exercise 10 (Optional): AI Builder
In this exercise, you will learn how to use AI builder to create a form processing app.
Note: Prerequisites – you should ensure that before attempting this module, that you have
saved the five sample invoices to a local folder and AI Builder trial, or license is available for you.
Task 1: Create the form processing model
In this task, you will learn how to create a form processing model. Form processing identifies the
structure of your documents based on examples you provide to extract text from any matching
form.
1. Navigate to https://make.powerapps.com , then select AI Models in the left navigation

menu or in More submenu

2. Click Start free trial (or Extend trial if you tried it before) if option is displayed
3. Clic k +New AI model
4. Find and select Extract custom information from documents model
5. At the bottom right, select create custom model.
6. In the top right corner click on Form Processing model name and rename it to Contoso
Invoice processing
7. Click Rename
8. In ‘Choose document type’ step select ‘Structured documents’ and click Next

9. In ‘Choose information to extract’ step, click +Add button
10. In Add dialog, select Field, and click Next
11. Set the name of the field as Address

12. Repeat steps 7 -9 to add Date , Comments, Total Price fields
13. Select +Add → Table
14. Set the name of the table as SalesPeople and set up the following columns:
Salesperson, PO Number, Requisitioner, Shipped via, FOB Point, Terms

Click Done
15. Add one more table called OrderItems with the following columns:
16. Check that you have all the required fields and tables and click Next
17. In ‘Add collections of documents’ step, click New collection button 19. Then click on
Collection 1 that was just added

20. In right side panel for Collection 1, click Add documents button
21. Select Upload from local storage
22. Browse to the location where you have saved the five example invoices and select all

23. Check that all files are selected to use for the model
24.Click Upload 5 documents
The upload feature will complete, check that green ticks appear next to all files
25. Click Close

26. Click Next and wait for analysis to complete

26. In ‘Tag documents’ step, you will need to tag fields and tables that we defined before for
each uploaded document
Select the region of the document with cursor and assign one of existing field/table tags.
27. When tagging SalesPeople and OrderItems table, you will also need to tag each column
in special Advanced tagging mode

After tagging all the uploaded documents, click Next
29. Review Model summary and click Train button
30. Wait while you model is training, then click Go to models

31. Click Quick test
32. Upload one of the invoices from your local folder and check that fields and tables are
recognized correctly
Click Close
33. Click Publish and wait till the model gets published

Task 2: Create a new app and add the model to it
In this task, you will add the form processing model to a new Power App.
1. Browse to https://make.powerapps.com
2. Click Create new app
3. Click +Blank app -> Canvas app
4. In the App name box, enter AI Builder Demo
5. In ribbon click +Insert and add Form Processor control from AI builder category
6. In the AI model dialog, select the Contoso Invoice Processing model that you created in
Task 1.

7. Resize the form processing control
Task 3: Adding model fields
In this task, you will add data fields from the Contoso Invoice Processing model and display
them in the app. You will then add a few test invoices to check that the model is functioning as
expected.
1. Click Insert on the ribbon

2. Click Text Label
3. Move the label to the top center of the screen
4. Rename the label lblCustomerAddress
5. In the Text property, enter the following expression
Text "Customer: " & FormProcessor1.Fields.Address
6. Click Insert on the ribbon

7. Click Data table
8. Move the data table to the right-hand side of the screen
9. From the properties drop-down, select Items
10. In the formula bar, enter the following expression : FormProcessor1.Tables.OrderItems

12. In the Data dialog, click on Add field then in the Choose a filed list, select all fields
13. The Data dialog will display each field, you can move these fields to reorder table columns
Close the dialog when you are ready
14. Your app should look like the image below
1
Activate – Power Platform: Building a Power App – Hands-on Labs
15. Enter preview mode (F5)

16. Click Analyze
17. In the file explorer window, browse to the location where you have saved the invoice
files and select one
18. Click Open
19. After a short delay, the table should be populated with data from the invoice:
Test again with a few other inv oices .
The lab is complete. CONGRATULATIONS! 😊

WorkshopPLUS - Power Apps For Power User - Labs

Uploaded by

Copyright:

Available Formats

WorkshopPLUS - Power Apps For Power User - Labs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WorkshopPLUS - Power Apps For Power User - Labs

Uploaded by

Copyright:

Available Formats

Hands-on Labs

Published: August 2023

Power Apps canvas studio layout ........................................................... 2

- Power Apps: A software-as-a-service application platform that enables power users in

For a list of additional learning resources and introductory videos, see:

Lab Structure and Learning Objectives

The primary module focuses on:

1. Connecting to data sources and filter results based on certain criteria

1 WorkshopPLUS – Power Platform: Power Apps for Power User

Optional modules cover the following topics:

1. Building reusable canvas components

Power Apps canvas studio layout

Browser Operating system

Microsoft Edge (latest version) Windows 10 or later

Google Chrome (latest version) Windows 10 or later, macOS 10.13 or later

2 WorkshopPLUS – Power Platform: Power Apps for Power User

Key features of the solution:

a. Ability to browse through a selection of devices and filter by manufacturer

4 WorkshopPLUS – Power Platform: Power Apps for Power User

Do not start this exercise unless Prerequisites are complete.

Task 1: Sign into Power Apps

In this task, you will sign into Power Apps

1. Navigate to https://make.powerapps.com and sign in with your business or school

Task 2: Create a new app

1. In the Home screen, click ‘Blank app’

5 WorkshopPLUS – Power Platform: Power Apps for Power User

6 WorkshopPLUS – Power Platform: Power Apps for Power User

Canvas Apps Coding Standards and Guidelines

7 WorkshopPLUS – Power Platform: Power Apps for Power User

5. In Tree View pane, Rename containers according to naming conventions:

• HeaderContainer1 -> ctHeader

• BottomContainer1 -> ctBottom

• SidebarContainer1 -> ctSidebar

• MainContainer1 -> ctMainSection

8 WorkshopPLUS – Power Platform: Power Apps for Power User

5. In the Settings – General dialog , you can:

9 WorkshopPLUS – Power Platform: Power Apps for Power User

7. Set Scale to fit as Off.

10 WorkshopPLUS – Power Platform: Power Apps for Power User

1. Select ctHeader container and set its properties as:

a. Justify (horizontal) -> Center

4. Select ctHeader container

11 WorkshopPLUS – Power Platform: Power Apps for Power User

Text "Device Orders"

7. For lblHeader, set Align property as Align.Center

Align Align .Center

8. For lblHeader, set Color property as Color.White

Color Color .White

12 WorkshopPLUS – Power Platform: Power Apps for Power User

10. For lblHeader, in property pane, set Flexible width as On

11. Insert one more text label into ctHeader

Text "Hello, " & User().FullName

14. Set the text alignment of the label text to Right

15. Change the Color to White

16. Set Flexible Width – On in properties pane

13 WorkshopPLUS – Power Platform: Power Apps for Power User

Task 1: Import static data from Excel

1. In the app authoring pane, click the Data icon

3. Click Import from Excel