Power Platform

App in a Day
Module 1: Power Apps Canvas App
Hands-on Lab Step-by-Step

August 2022
Contents
Power Apps Canvas App ...........................................................................................................................................................1

Lab Prerequisites ............................................................................................................................................................................................................... 1

Power Apps Canvas Studio Layout ............................................................................................................................................................................. 1

Goals for this lab ............................................................................................................................................................................................................... 2

Introduction: Coffee Machine Ordering Scenario .................................................................................................................................................. 2

Solution overview .............................................................................................................................................................................................................. 2

Locale-specific difference in formulas ........................................................................................................................................................................ 3

Exercise 1: Create the app in Power Apps ................................................................................................................................................................ 4

Exercise 2: Add Machine Gallery and Connect to Data Source ...................................................................................................................... 15

Exercise 3: Add Compare Screen ................................................................................................................................................................................ 37

References .......................................................................................................................................................................................................................... 54

Copyright ................................................................................................................................................................................. 55
 Power Platform App in a Day Module 1: Power Apps Canvas App

Power Apps Canvas App

Lab Prerequisites
Follow the pre-requisite steps described in the document: 00-AppInADay Lab Overview.pdf, that is included in the lab
package. Before beginning this lab, confirm that you have provisioned an environment where you will save your apps,
flows and database tables.

IMPORTANT: Do not proceed before going through the lab pre-requisite steps

Power Apps Canvas Studio Layout

Power Apps Canvas Studio is available as a web application (Make Power Apps) that you can use in any modern browser.

Power Apps Studio is designed to have a user interface familiar to users of the Office suite. It 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. Studio components:

1. Left navigation pane, which shows all the screens, data sources, and controls in your app
2. Middle pane, which contains the app screen you are working on
3. Right-hand pane, where you configure properties for controls, bind to data, create rules, and set additional advanced settings
4. Property drop-down 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
7. Additional items, here you will find your environment selection, app checker, and the preview app functionality.
8. Breadcrumbs, you can navigate up the tree view.

1|Page ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Goals for this lab

After this lesson you will be able to:
• Create a Canvas App
The time to complete
• Add screens to your app
this lab is [60]
• Use formulas in your app
minutes.
• Navigate between screens
• Customize galleries on your screens
• Capture a collection from your app

Introduction: Coffee Machine Ordering Scenario

Imagine an organization where every few years the employees request an updated coffee machine for their employee
break room. The organization would like to build a customized app that runs on the web and mobile devices, which will
help streamline the machine order and approval process. Moreover, they do not have traditional development resources
available, such as a .NET, Xamarin or custom website developer, to create this application.

Solution overview
The Microsoft Power Platform technologies enable tech-savvy business users (aka “citizen developers”) to build a
customized machine ordering solution. The application user interface and interaction logic are built in Power Apps, the
approval workflow is automated using Power Automate, and the machine order data is stored in Microsoft Dataverse.

Key features of the solution:

a. Ability to browse through a selection of coffee machines.

b. Select machines to compare
c. View detailed specs for the selected machines on a second comparison screen
d. Select a machine to order
e. Enter order details into a customized form, including an image
f. By default, have the approver set to the logged in user’s manager
g. Capture additional default properties, such as the date of the request
h. Store machine orders in a secure and scalable Cloud database
i. Enable an admin to view all machine orders
j. Follow a customized procurement process to place purchase orders for machines
k. Send an automated approval request email when the order is placed
l. Allow the approver to approve or reject an order and add comments without leaving their email inbox
m. View all sent and received approval requests on the web and mobile
n. Notify the user via email when their order is approved or rejected

This document will walk through creating a Power Apps Canvas Studio basics to enable features (a) thru (d).

When you are done with this first portion of the lab, your app will look like this:

©2022Microsoft Corporation 2|Page

 Power Platform App in a Day Module 1: Power Apps Canvas App

Locale-specific difference in formulas

Before you begin, please note that if your computer has its regional settings set to use the comma ‘,’ for its
decimal separator (like in much of Europe) your formulas will need to use a semicolon ‘;’ instead of a comma in
your formulas. For example:

En-US Filter(Machines, ‘Machine Type Gallery’.Selected.MFR=MFR)

de-DE Filter(Machines; ‘Machine Type Gallery’.Selected.MFR=MFR)

These localized formats are indicated with the symbol throughout the document. If you are in the en-us
locale, you can ignore any of the formulas indicated by the locale symbol.

3|Page ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Exercise 1: Create the app in Power Apps

IMPORTANT: Do not proceed before going through the lab pre-requisite steps

Task 1: Sign-in to Power Apps web studio

1. Go to Power Apps and click Sign-in. You may also directly navigate to Make Power Apps.

2. Login to with your training account.

3. Before creating an app, let’s switch to the correct environment. Click the Environment drop-down in the top
right of the screen to switch to the new environment. (If your environment doesn't show up, try logging out
and logging in again)

Task 2: Create a new solution

In this task, you will create a new solution and a publisher. The solution will contain and track all your work.

1. Select Solutions and click + New solution.

©2022Microsoft Corporation 4|Page

Power Platform App in a Day Module 1: Power Apps Canvas App

2. Enter Contoso Coffee for Display name and click on the + New publisher button.

3. Enter Contoso for Display name, Contoso for Name, contoso for Prefix, and click Save.

5|Page ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

4. Select the Contoso publisher you created for Publisher and click Create.

5. Click to open the Contoso Coffee solution you just created.

6. Do not navigate away from this page.

Task 3: Create a new application

1. Make sure you are in the Contoso Coffee solution.
2. Click + New and select App | Canvas app.

3. Enter Machine Ordering App for App name, select Tablet for Format, and click Create.

©2022Microsoft Corporation 6|Page

Power Platform App in a Day Module 1: Power Apps Canvas App

4. If prompted, select your region, then click Get started.

5. Click Skip if you receive the Welcome to Power Apps Studio prompt.

7|Page ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Task 4: Rename the screen

In this task, you will rename Screen1 to Main Screen.

1. Select the screen by clicking the Screen1 tile in the Tree view.
2. Click “…” next to Screen1 (or right click Screen1) and select the Rename option.

3. Change the name to Main Screen.

Note: You can also rename the screen by clicking on the screen name in the right pane and selecting the edit icon, or
double clicking on it.

Tip: It is a good practice to rename screens and controls as you create them, so they are easier to locate as you work with
formulas that reference different controls. In this lab, you will be prompted to rename screens and some of the controls. For
the others, you may rename them as you please on your own. It is important that you rename screens as prompted in this lab
as future steps may rely on specific screen names.

©2022Microsoft Corporation 8|Page

 Power Platform App in a Day Module 1: Power Apps Canvas App

Task 5: Add a header containing the app name and logged in user’s name
1. With Main Screen selected, click on the + Insert button.

2. Drag Text Label from the Insert pane and drop it on the Main Screen.

3. Select the Tree View tab.

4. Rename Label1 to Header Label, see the previous task on renaming controls.
NOTE: It is IMPORTANT to rename this label correctly, so subsequent instructions in the lab work as expected.

9|Page ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

5. Select Text from the property drop-down list and enter "Machine Ordering" in the formula bar. You can also
type directly in the label.

6. Set the Width of the Header Label to 1366.

7. Set the X and Y values of the Header Label to 0.

8. Set the Color value of the Header Label to Gray.
9. Set the Fill value of the Header Label to Black.
10. Set the Size value of the Header Label to 18.
11. Set the Height value of the Header Label to 60.
12. Go to the Properties pane and select Align center for Text alignment.

©2022Microsoft Corporation 10 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

13. The header label should now look like the image below.

Tip: You can also use the formula bar above or the Advanced tab on the far right of the screen to enter specific values
or formulas for any property on a control.

14. Select + Insert button and add another Text Label to the Main Screen. You will use this label to display the
logged in user’s name.

15. Rename the label to User Label.

16. Select the User Label, click Align and select Align right.

11 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

17. Set the Y value of the User Label to 0.

18. Set the Width value of the User Label to 200.
19. Set the Color value of the User Label to Gray.
20. Set the Text value of the User Label to the formula below.

"Hello, " & User().FullName

Note: All functions in Power Apps are case sensitive. As you start typing “User” you will see a drop-down of available choices.
It is a good idea to pick from the autocomplete options. You will also notice help text at the top showing the required
parameters, in this case, it requires no input parameters.

21. Select the Insert tab.

22. Click Media and select Image.

23. Rename the image Logo Image.

24. Set the Image value of the Logo Image to "https://images-us-
prod.cms.commerce.dynamics.com/cms/api/qbvttlwqcm/imageFileData/MA20RY?ver=c4b6&m=6&q=100
".

©2022Microsoft Corporation 12 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

25. Set the X and Y values of the Logo Image to 0.

26. Set the Height value of the Logo Image to 60.
27. Set the Width value of the Logo Image to 200.
28. The top part of the screen should now look like the image below.

Note: The User() function in Power Apps allows you to retrieve the Email, Full Name, and Picture for the currently logged
in user. App users will always be logged in with their business or school account (Azure Active Directory (AAD) credentials),
so this information will always be available for any Power Apps app.

Task 6: Save the Application

In this task, you will save an initial version of the app. It is a good practice to keep saving app updates at regular intervals.

1. First, you will check if there are any errors. Click on then App Checker icon.

2. The App Checker pane will come to view. Errors will be displayed here if there are any.
3. Close the App Checker pane.
4. Click File.

13 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

5. Select Settings.
6. Change the Background fill to Black.

In the application settings page, you can:

- Change your app name

- Customize the app icon – choose a background color and icon

7. Select the Display tab to view the available screen orientation and aspect ratio settings. For this app, we will leave
it at the default setting of Landscape with 16:9 aspect ratio.

8. Close the Settings.

©2022Microsoft Corporation 14 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

9. Click File again and select Save.

10. After the app is saved, click the Back arrow in the top left to get back to the studio.

Tip: In Power Apps when you save a version of your app the first version is published by default and available to everyone
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. For more details on saving, publishing and sharing apps, see:

Publish App
Share App
Save and Publish App

Exercise 2: Add Machine Gallery and Connect to Data Source

In this exercise, you will add a gallery of all available machines making it easy for users to browse the list and get a quick
overview of the machines available.

Task 1: Add machine type gallery

In this task, you will add a gallery that will list the machine types. This will be a single column vertical gallery down the left
side of the screen, with each cell displaying an image of the machine type. This gallery will later be used as a filter for the
Machine gallery you will create.

1. Select the Main Screen.

2. Select the Insert tab on the ribbon and open the Gallery drop-down, then select Vertical.

15 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

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 labels and an image. A data pane will pop up on the right.

1. Expand Connectors, then click Show all connectors.

2. Select Import from Excel.

©2022Microsoft Corporation 16 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

3. In the File Open dialog, browse to the location where you unzipped the data file (for example
C:\AIAD\PAHandsOnLabContent\) and select Machine-Order-Data.xlsx to load it.

4. Select both tables, Machines and MachineTypes, and click the Connect button. This will add both these tables as
static data into the application.

Note: In this lab, you will work with tables imported from a static data file and embedded as resources in the app. If you
were building a real solution, the same tables would likely be stored in the cloud, such as in a SharePoint list, a SQL table,
or a Microsoft Dataverse table.

5. Rename the gallery Machine Type Gallery.

Tips on working with galleries:

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: the gallery control, the template cell (first cell), and controls within the
template cell.

17 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

To select the entire gallery – click on the gallery in the tree view on the left or click on the second or third cell. 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 which is the data source, the gallery fill color, borders, etc.

To customize how each item is displayed in the gallery, you will customize the template cell. Select the template by

clicking in the first cell of the gallery or click on the pencil icon in the top left corner when the entire gallery is
selected.

You can now add, remove and customize the controls within the template cell. These changes will then repeat across each
item or row in the table.

Go ahead and select the machine image in the template cell and change its size. Notice how the size of the image
changes in all the cells.

You can also test your gallery right on the canvas by holding down the Alt key to activate.

You will customize the machine gallery in subsequent steps.

Don’t worry about making the gallery pixel perfect, the purpose of this exercise is to get your app working with a good
enough UX. You can always repeat these labs to practice your pixel perfect skills.

When working with control positioning X refers to horizontal positioning and Y refers to vertical positioning.

6. Select the Machine Type Gallery, go to the Properties pane and select MachineTypes as Data source.

7. Set the X value of the Machine Type Gallery to 0.

8. Set the Y value of the Machine Type Gallery to 60.
9. Set the Height value of the Machine Type 710.
10. Set the Width value of the Machine Type 200.
11. Select Machine Type Gallery, in the Properties tab on the right, click Layout.

©2022Microsoft Corporation 18 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

12. Scroll down to the Gallery section and select 2 Columns.

13. Change the Wrap Count from 2 to 1. This will change it to a single column gallery.

14. Select the image control within the gallery.

19 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

15. Set the Image value to the formula below. This formula will set the image value to the photo URL.

ThisItem.Photo

16. Select the Machine Type Gallery and then click on the edit button. This action will put the gallery in edit mode.

17. Reduce the height of the template cell only the four images occupy the gallery without scrolling. We want the
image to occupy the entire cell.

©2022Microsoft Corporation 20 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

18. Make sure the gallery is in edit mode. Go to the Insert tab and select Label.

19. Set the Text value of the label to the formula below.

ThisItem.Name

20. Set the Width value of the label to 190.

21. Set the X value of the label to 0.
22. Make sure you still have the label selected. Go to the Home tab, change the Color to Gray and Fill to Black.

23. Click Align and select Align bottom.

21 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

24. Change the Size to 10.

25. The main screen should now look like the image below.

26. Click File and Save the application.

27. Click on the Back arrow.

Task 2: Add machine gallery

1. With Main Screen selected, select the Insert tab.

©2022Microsoft Corporation 22 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

2. Click Gallery and select Horizontal.

3. Select Machines as Data source.

4. Rename the gallery Machine Gallery.

Task 3: Arrange the machine gallery

1. Expand the Machine Gallery and select the Image.

23 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

2. Set the Image value if the image to the formula below.

ThisItem.Photo

3. Expand the Machine Gallery and select the Title.

4. Set the Text value if the title to the formula below.

ThisItem.'Machine Name'

5. Expand the Machine Gallery and select the Subtitle.

6. Set the Text value if the subtitle to the formula below.

ThisItem.Price

7. Select the Machine Gallery.

8. Set the X value of the Machine Gallery to 200.
9. Set the Y value of the Machine Gallery to 60.
10. Set the Height value of 650.
11. Set the Width value of the Machine Gallery to 1165.
12. Select the Machine Gallery, go to the properties pane and set the Wrap count to 2.

13. Set Show scroll to Off and Show navigation to On.

©2022Microsoft Corporation 24 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

14. Select the image inside the Machine Gallery.

15. Set the Width value of the image to 200.

16. Set the Height value of the image to 170.
17. Select the Title and Subtitle inside the galley. Hold the [CONTROL] key to select multiple controls.

18. Go to the properties and select Center for Text alignment.

25 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

19. Select the Machine Gallery and click on the Edit gallery button.

20. Make the template narrower until you can see total of 8 machines.

©2022Microsoft Corporation 26 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

Task 4: Highlight the selected item in the gallery

In this task, you will use the TemplateFill property of the Machine Type Gallery to specify a highlight color for the selected
item. You can decide how you want to indicate the selected item. We will change the label fill for this gallery.

1. Expand the Machine Type Gallery and select the Label.

2. Change the Fill value of the label to the formula below. This formula will set the label fill to dark red for the
selected item.

If(ThisItem.IsSelected,DarkRed)

Alternately, you could set the Fill property to:

If(ThisItem.IsSelected,ColorFade ('Header Label'.Fill,75%))
This approach is recommended so the fill color matches the header label with a 75% fade. If you change the fill
color of header label, the fill color of the selected item in the gallery will automatically change.

3. Now try using the preview mode to perform a quick test of this highlighting. You can enable preview mode by
holding down the Alt key (also known as the Option key) and clicking a few different manufacturers in the gallery,
notice the selected item in the manufacturer gallery is highlighted in a light blue color. The preview mode ends
when you stop holding the key.

Alternatively, you could click the Play ( ) button to enter preview mode, and to exit this you would hit the X in
the upper right corner or use the Esc key.

Task 5: Filter the machine gallery based on selected machine type

In this task, you will use the Filter() function to filter the items in the Machine Gallery to only display machines that match
the selected item in the Machine Type Gallery.
27 | P a g e ©2022 Microsoft Corporation
Power Platform App in a Day Module 1: Power Apps Canvas App

1. Select the Machine Gallery.

2. Set the Items value to the formula below.

Filter(Machines, 'Machine Type ID' = 'Machine Type Gallery'.Selected.'Type ID')

for alternate/European locales:
Filter(Machines; 'Machine Type ID' = 'Machine Type Gallery'.Selected.'Type ID')

3. The Machine Gallery should now show machines that match the selected item of the machine types.

4. Click on the Preview the app button.

©2022Microsoft Corporation 28 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

5. The app should load.

6. Select an item from the machine type gallery.
7. The machine gallery should show machines that match the selected machine type.

8. Close the preview.

Note: If you get an error when entering the Filter command, check the name of the machine type gallery. The name in
the filter command must match the name of your gallery.

More details on the Filter() function is available at Filter Lookup.

A complete set of expressions is available at Formula Reference.

Task 6: Configure text labels in the machine gallery

1. Expand the Machine Gallery and select the Subtitle.
2. To add the $ to the Subtitle, use the Text format expression.

29 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Text(ThisItem.Price,"$##,###.00")
Or for alternate/European locales: Text(ThisItem.Price;"$##.###,00")

Note: After you enter the above value in the formula bar, it will automatically resolve to include your locale, e.g. [$-en-
US]. If you see an error here, it might be because your locale is not yet supported, in which case as a workaround,
manually change it to [$-en-US]:

Task 7: Conditional formatting to highlight machine above $10,000

We can make it easy to spot machines that cost more than $10,000, by displaying the price in Red.

1. Select the label in the template cell that displays the price and set the Color to
If(ThisItem.Price>10000,OrangeRed,Gray)

or for alternate/European locales: If(ThisItem.Price>10000;OrangeRed;Gray)

©2022Microsoft Corporation 30 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

Note: As you are typing this formula notice that the autosuggest shows a choice of matching colors. Power Apps comes
with a set of standard colors that you can easily reference in any property that accepts a color value. You can also set
specific RGB values.

For a full list of Color functions and colors, see Function Colors

1. Click Preview the app.

2. Select Commercial Espresso Machines from the machine type gallery. The price for machine that are over 10,000
should become red.

3. Close the preview.

4. Click File and select Save.
5. Click the back arrow.

31 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Task 8: Add a checkbox to add a machine to the Compare list

We want to allow users to select multiple machines to compare before making a final selection on the next screen.

1. Select the Machine Gallery, click the Pencil edit icon in the top left of the gallery to select the template cell.

2. Make sure that only the first item in the gallery is selected (not the entire gallery).

3. Add a checkbox by clicking Insert -> Input -> Checkbox.

©2022Microsoft Corporation 32 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

4. Move the inserted checkbox below the price.

5. Change the checkbox text to “Compare”. You can do this by setting the Text property.

Task 9: Create a collection for the selected machines

When a user selects a machine to compare, we will add it to a collection called CompareList. You can think of this as an
in-memory collection of machines that have been selected for comparison.

1. Select the Checkbox control and click on the Action tab in the ribbon, click OnCheck and set the value to the
formula below.
Collect(CompareList,ThisItem)

33 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

2. Set the OnUncheck value to the formula below.

Remove(CompareList,ThisItem)
This is required to make sure the unchecked items are removed from the collection.

3. Set the Default property of the checkbox to the formula: ThisItem in CompareList

The Default setting of the checkbox is a Boolean true or 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 CompareList.

4. Let’s test out adding items to a collection by running the app in Preview (F5) or by clicking the Preview button on
the top right. Click on the checkboxes of three machines.

5. Close the preview.

6. Click the View tab and select Collections.

©2022Microsoft Corporation 34 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

7. You will see the CompareList collection and the three items you selected.

Note that each item in the collection has all the information for each machine that we get from the Machines data source,
not just the fields we display in the Machine Gallery.

8. Click the back arrow on the top left to get back to the main view.
9. Click Preview again.
10. Uncheck all the checked items and click on close the preview.

35 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

11. Click the View tab and select Collections.

12. All items will be removed from the CompareList collection.
13. Click on then back arrow.

For more information on working with Collections in Power Apps, see:

Create Update Collections and

Clear Collections

Task 10: Set the default selection to the first machine type and test the app
To avoid getting a blank list of machines when the app starts, set the default selected item in the Machine Type Gallery to
be the first item.

1. Select the entire gallery (by clicking Machine Type Gallery in the tree view on the left) and set the Default
property of the gallery in the formula bar to: First(MachineTypes)

This will set it to the first item in the table.

2. To preview the app, press the Preview button on the upper right of the top menu. Pressing the F5 key will also
preview the application. Note: You can also test your app right on the canvas by holding down the Alt key to
activate buttons and other controls, as well as double-clicking to type into controls.
3. Your app should look like the image below.

©2022Microsoft Corporation 36 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

4. To exit preview mode, click the X in the top right corner.

5. Click File and save your changes.
6. Click on the  back button.
7. Do not navigate away from this page.

Exercise 3: Add Compare Screen

The second screen is where users compare the selected machines and then choose the one they wish to submit for
approval. This screen will include:

• A back button for navigation back to the main screen.

• A list of selected machines for comparison (carried over from the main screen).
• Additional details for each machine.
• Highlighting the selected machine

In a subsequent lab, you will create the database tables to store the machine orders and add an edit form to this screen to
enter additional information and submit the request.

Task 1: Add screen

1. From the ribbon click Home and New Screen and choose Blank.

37 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

2. Rename the screen to Compare Screen.

3. In the left tree view, select the Main Screen, click on the Insert tab on the ribbon and select Button to add a
button to the screen.

©2022Microsoft Corporation 38 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

4. Rename the button Compare Button.

5. Select the Compare button.
6. Set the button’s Text property to: "Compare " & CountRows(CompareList) & " item(s)"

7. Set the Fill value of the Compare Button to Black.

8. Set the Width value of the Compare Button to 220.
9. Set the Height value of the Compare Button to 40.
10. Set the X value of the Compare Button to 1150.
11. Set the Y value of the Compare Button to 720.
12. Set the DisplayMode of the Compare Button to the formula below. This formula will disable the button if there
are no items selected and enable it if at least one item is selected.

If(CountRows(CompareList) > 0, DisplayMode.Edit, DisplayMode.Disabled)

13. Select the Compare Button, go to the Properties pane and set the Border radius to 0.

14. Unselect all machines – notice the button is grayed.

39 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

15. Select the Compare Button and copy (Ctrl-C) this button.
16. Paste (Ctrl-V) the button on the same screen.
17. Rename the button Clear Button.
18. Set the X value of the Clear button to 300.

19. Change the Text value of the Clear Button to Clear Selection.
20. Set the OnSelect value of the Clear Button to the formula below. This formula will remove all the items in the
CompareList collection.

Clear(CompareList)

©2022Microsoft Corporation 40 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

21. Select the Compare Button, click on the Action tab and select Navigate.

22. Select Compare Screen from the drop-down and ScreenTransition.None for transition type.

23. Click Preview the app.

24. Select a couple of machines and click the Compare button and verify that it takes you to the second screen.

41 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

25. You should navigate to the new empty screen. Close the preview.

26. Select the Main Screen in the tree view.

27. Select the User Label, Header Label, and Logo Image right click and select Group.

28. Rename the group Header.

29. Click on the … button of the Header and select Copy.

©2022Microsoft Corporation 42 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

30. Right click on the Compare Screen by and select Paste.

31. The Header in the Compare Screen should look like the image below.

32. Copy Machine Gallery from the Main Screen and paste it in the Compare Screen.
33. Rename the gallery in the Compare Screen Compare List Gallery.
34. Set the X value of the Compare List Gallery to 0.
35. Set the Width value of the Compare List Gallery to 840.
36. Set the Height value of the Compare List Gallery to 710.
37. The gallery should now look like image below.

43 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Task 2: Configure the gallery

In this task, you will configure the gallery to show machines that were selected from the comparison gallery on the Main
Screen.

1. Select the new Compare List Gallery.

2. Go to the Properties pane and change the Wrap count to 1.

3. Select Items in the property drop-down list and change the data source in the formula bar to CompareList.

©2022Microsoft Corporation 44 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

4. The gallery will now show the selected items from the Main Screen.

Task 3: Remove and add controls to the gallery

In the Compare Screen we are selecting a given item to get approved, so we do not need a Compare checkbox.

1. Select the Compare checkbox on the left most template cell and press the Delete key to delete the checkbox.
2. Now let’s add a few labels to display additional attributes about the machine. A good way to do this is to copy
paste. Select the first label in the gallery that is displaying the machine name. Copy it (Ctrl-C) and paste it (Ctrl-V).
Rename these labels as you go for ease of use later.
3. Move the new label so that it is just below the price. Set the Text property to: ThisItem.Feature.

45 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

4. Use the ribbon to change the font weight from Semibold to Normal and change the Size property to 14.

5. Copy and paste this label and move the new fourth label below the third label. Set its Text property to:
ThisItem.'Avg. Cups/Week'

6. Repeat this and add text boxes to display the additional machine properties – Avg. Espressos/Week and
Description. Feel free to customize the labels by changing their Size, Color, Fill and Font Weight properties.
7. Select the Description label inside the gallery.
8. Change the Size of the Description to 12.
9. Change the AutoHeight value of the Description to true.
10. Select all the labels inside the gallery.

©2022Microsoft Corporation 46 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

11. Go to the Properties pane and set the Text alignment to Align left.

12. The gallery should now look like the image below.

47 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Note: For this lab, to save time you may add one or two of these additional properties and skip adding all the
additional machine properties.

Task 4: Highlight the selected machine

1. Select the Compare List Gallery.
2. With the whole gallery selected, set the TemplateFill property to:

If(ThisItem.IsSelected,ColorFade('Header Label'.Fill, 75%))

This is conditionally setting a Fill color if the cell is selected.

©2022Microsoft Corporation 48 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

You could have set a specific color or RGB value, but we recommend using the ColorFade function, so it matches
the header label with a 75% fade. If you change the fill color of header label, this template fill color will
automatically change.
3. Holding down Alt, click a different item in the gallery, notice the selected item is highlighted in a light gray color.

Task 5: Add an icon to navigate to the first screen

1. Select the Compare Screen.
2. Go to Insert, then Icons and select the Left icon.

3. Set the Color of the icon you just added to Gray.

4. Set the Height of the icon to 40.
5. Set the Width of the icon to 40.
6. Set the Y of the icon to 10.
7. Set the X of the icon to 220.
8. Set the OnSelect action for the icon to Back(). This will cause navigation back to the previous screen.

Optional UI enhancement:

Add padding around the icon using the Properties pane. Set the padding values to 10 each for Top, Bottom, Left, and
Right. This will make the icon look smaller but still have a larger hit target for the click action. This is a good pattern to use
for most icons.

49 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Task 6: Test the app

Let’s save the app by selecting File -> Save. It is a good idea to save your app regularly. Note: You can also test your app
right on the canvas by holding down the Alt key to activate buttons and other controls, as well as double-clicking to type
into controls.

1. Go to the Main Screen and Preview the app by hitting the Play button in the top right.
2. Uncheck if there are any checked machines.
3. Select one of the Machine types.
4. Check the compare checkbox on a few machines on the main screen.
5. Click the compare button to navigate to the compare screen.
6. Tap or click on different machines in the gallery and verify that the selection highlight works.
7. Click the Back button and confirm you get back to the main screen.

8. Click Clear Selection.

©2022Microsoft Corporation 50 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

9. The CompareList should clear, and the Compare button should become disabled.

10. Close the preview.

11. Click File and save your changes.

Task 7: Test the app on a mobile device

Congratulations! You’ve created your Power Apps app. Now let’s publish and test it on a mobile device.

1. File -> Save.

2. Click the Publish button.
3. Click Publish this version on the confirmation prompt.

This action will publish the latest saved version of the app.

4. Go to your device’s app store application. Search for “Power Apps” and install the Power Apps application.
Launch the app.
Android: iOS: Microsoft Store:

5. When the app starts, it will prompt for your business or school account credentials. Log in with the same account
that you used to create the Power Apps app. You should see the app you just created in the list of apps. Run the
app.

51 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

Task 8: [Optional] Share the application with a colleague

You may optionally share the application with another user within the same organizational tenant as the user who created
the app. So, if you had logged in as [email protected], you may share the app with any other User, Security Group or
Distribution Group within the @contoso.com tenant.

1. To share the app, go to Make Power Apps. Log in if prompted for credentials.
2. Select Apps in the left pane, look for your Machine Ordering App in the app list, click the three dots (…) next to
the app to bring up the context menu. Click the Share option.

3. In the share screen, enter the name or email of the user you would like to share the app with. You may also share
it with a user group.

4. Select the user or group; this will add it to the Shared with list below. You may provide this user/group either Can
use or Can edit permissions.

©2022Microsoft Corporation 52 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

5. If the Send an email invitation is checked, when you hit Save, the user or all users in the group will receive an
email letting them know that the app has been shared with them, along with a link to open the app.

Next steps
Now that you have learned the basics of creating an app, take a little time to think about what you would like to create
next. What made you most excited about the coffee machine ordering app? What would you have done differently?

53 | P a g e ©2022 Microsoft Corporation

Power Platform App in a Day Module 1: Power Apps Canvas App

References
App in a Day introduces some of the key capabilities available in Power Apps. For a list of learning resources, see Power
Apps Resources and Power Automate Resources.

Power Apps
- Website | Blog | Documentation | Community | Suggest Ideas | Webinars
- Product updates
- YouTube playlist
- Licensing / Pricing
- Support – known issues | view/report issues | create a support ticket

Power Automate
- Website | Blog | Documentation | Community | Suggest Ideas | Webinars
- Product updates
- Guided Learning | YouTube Playlist
- Licensing / Pricing
- Support

Microsoft Dataverse
- Microsoft Dataverse documentation portal
- Feature updates

Microsoft Power Platform

- Power Platform

©2022Microsoft Corporation 54 | P a g e
 Power Platform App in a Day Module 1: Power Apps Canvas App

Copyright
© 2022 Microsoft Corporation. All rights reserved.

By using this demo/lab, you agree to the following terms:

The technology/functionality described in this demo/lab is provided by Microsoft Corporation for purposes of obtaining
your feedback and to provide you with a learning experience. You may only use the demo/lab to evaluate such technology
features and functionality and provide feedback to Microsoft. You may not use it for any other purpose. You may not
modify, copy, distribute, transmit, display, perform, reproduce, publish, license, create derivative works from, transfer, or
sell this demo/lab or any portion thereof.

COPYING OR REPRODUCTION OF THE DEMO/LAB (OR ANY PORTION OF IT) TO ANY OTHER SERVER OR
LOCATION FOR FURTHER REPRODUCTION OR REDISTRIBUTION IS EXPRESSLY PROHIBITED.

THIS DEMO/LAB PROVIDES CERTAIN SOFTWARE TECHNOLOGY/PRODUCT FEATURES AND FUNCTIONALITY,

INCLUDING POTENTIAL NEW FEATURES AND CONCEPTS, IN A SIMULATED ENVIRONMENT WITHOUT
COMPLEX SET-UP OR INSTALLATION FOR THE PURPOSE DESCRIBED ABOVE. THE TECHNOLOGY/CONCEPTS
REPRESENTED IN THIS DEMO/LAB MAY NOT REPRESENT FULL FEATURE FUNCTIONALITY AND MAY NOT
WORK THE WAY A FINAL VERSION MAY WORK. WE ALSO MAY NOT RELEASE A FINAL VERSION OF SUCH
FEATURES OR CONCEPTS. YOUR EXPERIENCE WITH USING SUCH FEATURES AND FUNCTIONALITY IN A
PHYSICAL ENVIRONMENT MAY ALSO BE DIFFERENT.

FEEDBACK. If you give feedback about the technology features, functionality and/or concepts described in this demo/lab
to Microsoft, you give to Microsoft, without charge, the right to use, share and commercialize your feedback in any way
and for any purpose. You also give to third parties, without charge, any patent rights needed for their products,
technologies and services to use or interface with any specific parts of a Microsoft software or service that includes the
feedback. You will not give feedback that is subject to a license that requires Microsoft to license its software or
documentation to third parties because we include your feedback in them. These rights survive this agreement.

MICROSOFT CORPORATION HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS WITH REGARD TO THE
DEMO/LAB, INCLUDING ALL WARRANTIES AND CONDITIONS OF MERCHANTABILITY, WHETHER EXPRESS,
IMPLIED OR STATUTORY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.
MICROSOFT DOES NOT MAKE ANY ASSURANCES OR REPRESENTATIONS WITH REGARD TO THE ACCURACY
OF THE RESULTS, OUTPUT THAT DERIVES FROM USE OF DEMO/ LAB, OR SUITABILITY OF THE INFORMATION
CONTAINED IN THE DEMO/LAB FOR ANY PURPOSE.

DISCLAIMER

This demo/lab contains only a portion of new features and enhancements in Microsoft Power Apps. Some of the features
might change in future releases of the product. In this demo/lab, you will learn about some, but not all, new features.

55 | P a g e ©2022 Microsoft Corporation