Practice Lab 4 – Build the UI

In this lab you will change the colors of the controls in the app.

What you will learn

• How to use themes
• How to personalize your app

High-level lab steps

• Select a theme
• Personalization

Prerequisites

• Must have completed Lab 3: Create a canvas app

Detailed steps

Exercise 1 – Theme

Task 1.1 - Edit 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 Apps tab from the left-side menu.

4. Select the Booking Request app, select the Commands (…), and select Edit > Edit in new tab.

Task 1.2 - Select a theme

1. In action bar in the Power Apps Studio, select Theme.

   

2. Select the Red theme.

Task 1.3 - Brand controls

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

2. Expand the BookingRequestList gallery.

3. Select NextArrow2.

4. Set the Color property of NextArrow in the formula bar to:

    RGBA(164, 38, 44, 1)
   

5. Select Body1.

6. Set the Color property of Body in the formula bar to:

    If(ThisItem.Cost > 1000, RGBA(164, 38, 44, 1), Color.Black)
   

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

Exercise 2 – Personalization

Task 2.1 - Add user label

1. Select outside of the gallery on the blank canvas or select the MainScreen.

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

3. Select Text label.

4. Drag the label to the top right of the screen.

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

6. Rename the label to UserLabel.

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

   1. X=1100
   2. Y=20
   3. Height=40
   4. Width=250
   5. Align=Align.Right
   6. Size=18
   7. PaddingRight=10
   8. Color=Color.White
   9. Text=User().FullName

   

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

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