Practice Lab 3 – Create a canvas app

In this lab you will design and build a canvas app from blank, add a data source and a gallery.

What you will learn

• How to create a canvas app with a gallery linked to a data source
• How to format fields with Power Fx formulas

High-level lab steps

• Create a canvas app from blank
• Add a data source to the app
• Add a gallery to the app
• Configure the fields in the gallery

Prerequisites

• Must have completed Lab 2: Data model

Detailed steps

Exercise 1 – Create a canvas app

Task 1.1 - Create the app

1. Navigate to the Power Apps Maker portal https://make.powerapps.com

2. Make sure you are in the Dev One environment.

3. Select the + Create tab from the left navigation menu.

4. Select the Start with a blank canvas tile under Create your apps.

5. Select Tablet size.

6. Wait for the blank app to be built.

7. Select Save in the top-right of the Power Apps Studio, enter Booking Request app, and select Save.

Task 1.2 - Add data source

1. In the app authoring menu, select Data.

   

2. Select the drop-down caret next to Add data and enter Booking in Search.

   

3. Select the Booking Requests Microsoft Dataverse table.

Task 1.3 - Configure the main screen

1. In the app authoring menu, select Tree view.

2. Select Screen1 in the tree view and select the ellipsis (…) and select Rename.

3. Enter MainScreen.

4. In the app authoring menu, select Insert (+).

5. Select Rectangle.

6. Drag the rectangle to the top left of the screen.

7. In the app authoring menu, select Tree view.

8. Rename the rectangle to HeaderRect.

9. Set the properties of the rectangle in the formula bar as follows:

   1. X=0
   2. Y=0
   3. Height=80
   4. Width=Parent.Width

10. In the app authoring menu, select Insert (+).

11. Select Text label.

12. Drag the label to the top left of the screen.

13. In the app authoring menu, select Tree view.

14. Rename the label to HeaderLabel.

15. Set the properties of the label in the formula bar as follows:

    1. X=0
    2. Y=0
    3. Height=80
    4. Width=Parent.Width
    5. Align=Align.Center
    6. Size=24
    7. Text="Booking Request"
    8. Color=Color.White

    

16. Select Save in the top-right of the Power Apps Studio.

Task 1.4 - Add a gallery

1. In the app authoring menu, select Insert (+).

2. Select Vertical gallery.

   

3. Select Booking Requests for the data source.

   

4. In the Properties tab, for Layout select Title, subtitle, and body.

5. Select 7 selected next to Fields.

6. Select Cost for Body1.

   NOTE: The field names may show as schema names with a prefix isntead of the display name.

7. Select Decision for Subtitle2.

8. Select Pet Name for Title2.

   

9. Close the Data pane.

10. In the app authoring menu, select Tree view.

11. Rename the gallery to BookingRequestList.

12. If a suggestions popup dialog appears, select Cancel.

13. Set the properties of the gallery in the formula bar as follows:

    1. X=0
    2. Y=80
    3. Height=575
    4. Width=250

Task 1.5 - Format the currency field

1. In the app authoring menu, select Tree view.

2. Expand the BookingRequestList gallery.

3. Select Body1.

   

4. Set the Text property in the formula bar to the formula:

    Text(Value(ThisItem.Cost), "$#,##0.00")
   

5. Select Save in the top-right of the Power Apps Studio.

6. Select the <- Back button from the top left of the command bar, and select Leave to exit the app.