Practice Lab 4.1 – Enhance a canvas app

Scenario

You are a Power Platform functional consultant and have been assigned to the Fabrikam project for the next stage of the project.

You have been assigned to continue work on the Fabrikam Environmental Work Delivery canvas app.

In this practice lab, you will examine the app to see how it works and make some user interface changes.

If your browser is not set to English, the syntax of Power Fx formulas might change. See Build global support into canvas apps https://learn.microsoft.com/power-apps/maker/canvas-apps/global-apps for more information.

Exercise 1 – Examine the canvas app

In this exercise, you will learn about the canvas app.

Task 1.1 - Run the app

Navigate to the Power Apps Maker portal https://make.powerapps.com.
Make sure you are in the Dev One environment.
Select Solutions.
Open the Fabrikam Environmental solution.
In the Objects pane on the left, select Apps.
Select the Environmental Work Delivery app, select the Commands menu (…), and select Play.
Sign in with your Microsoft 365 credentials, if prompted.
The app has 4 screens which are navigated using the left-hand navigation bar:
- Home: Contains three tiles that show the count of Projects, Milestones, and Outcomes.
- Projects: Create and edit Projects
- Milestones: Set Percentage Complete on Milestones
- Outcomes: Update the details of Outcomes
Note that the label for Outcomes is incorrect. This is an issue your client, Fabrikam, has raised that needs to be fixed.
Select the Projects screen (second icon).
Note that Type is blank for existing projects.
Note that the colors for the drop down controls are blue.
Select the + icon. A new Project row is added.
Enter Lab Project for Project Title.
Select any Type.
Select In Progress in the Status drop-down.
Select a date in the next month in the Estimated date date picker and select OK.
Select the Back arrow icon in the bottom-left of the screen to return to the Home screen. The number in the first tile will have incremented.
Select the Milestones screen (third icon).
Enter 50 in Milestone Percentage Complete
Select the Outcomes screen (fourth icon).
Enter To create a better planet in Goal.
Select Completed in the Status Reason drop-down.
Select Save.
Select the Home screen (first icon).
Close the app.

Task 1.2 - Review the app in Power Apps Studio

Select the Environmental Work Delivery app, select the Commands menu (…), and select Edit > Edit in new tab.
If a Welcome to Power Apps Studio dialog appears, check Don’t show me this again, and select Skip
In the Tree view, expand Card1.
Select Card1LabelValue and select Text in the Property Selector.
Review the formula. Note that the filter uses the My Active Projects view.
In the Tree view, select and expand ProjectScreen.
In the Tree view, select and expand ProjectGallery.
Select ProjectStatusDropDown and select Items in the Property Selector.
Review the formula. Note the use of Choices.
Select ProjectStatusDropDown and select OnChange in the Property Selector.
Review the formula. Note the use of Patch.
Select ProjectTitleTextInput and select OnChange in the Property Selector.
Review the formula. Note the use of Patch.
In the Tree view, select and expand MilestoneScreen.
Select and expand MilestoneForm.
Select and expand Milestone Percentage Complete
Select DataCardValue2 and select OnChange in the Property Selector.
Review the formula. Note the use of SubmitForm.
In the Tree view, select and expand OutcomeScreen.
Select and expand OutcomeForm.
Select Button2 and select OnSelect in the Property Selector.
Review the formula. Note the use of SubmitForm.
Select HomeScreen.
In the Tree view, select App.
Select OnStart in the Property Selector.
Review the formulas.
Select the ellipsis menu (…) to the right of App and select Run OnStart.
In the left navigation, select (𝑥) Variables.
Expand Global variables and review the variables for column widths and heights. The controls on screens use these variables for their X, Y, Height, and Width.
Review the Color variables. The controls on screens use these variables for color properties.
In the left navigation, select Tree view.
Select TitleLabel under HomeScreen.
Select X in the Property Selector and note the use of a variable.
Select Y in the Property Selector and note the use of variables in the formula.
In the left navigation, select (𝑥) Variables.
Expand Collections.
Review the data in the collections by selecting the ellipisis menu (…) on each and selecting View table. Select Cancel to close the pop-up.
Close the tab and select Leave to discard any changes. Select Done.

Exercise 2 – Change the visual experience of the canvas app

In this exercise, you will change the layout and colors used in the canvas app so that you can see how the layout of the app has been created.

Task 2.1 - Layout

In this task, you will perform the following changes to the app:

change the variables used for column and row layout

Navigate to the Power Apps Maker portal https://make.powerapps.com
Make sure you are in the Dev One environment.
Select Solutions.
Open the Fabrikam Environmental solution.
In the Objects pane on the left, select Apps.
Select the Environmental Work Delivery app, select the Commands menu (…), and select Edit > Edit in new tab.
In the Tree view, select App.
Select OnStart in the Property Selector.
In the OnStart, change Set(BarrierSize,20) to Set(BarrierSize,10)

Note: You can select the caret to the right of the formula bar to expand it.
Select the ellipsis (…) to the right of App and select Run OnStart. Verify that the layout adjusts and the tiles become bigger.
In the OnStart, change Set(LeftHandWidth,App.Width/10) to Set(LeftHandWidth,App.Width/12)
Select the ellipsis (…) to the right on App and select Run OnStart. Note that the layout adjusts.
Close the tab and select Leave to discard any changes. Select Done.

Task 2.2 - Colors

In this task, you will perform the following changes to standardize colors for the controls in the app:

change the variables used for colors
update the colors used for controls in the gallery

Select the Environmental Work Delivery app, select the Commands menu (…), and select Edit > Edit in new tab.
In the Tree view, select App.
Select OnStart in the Property Selector.
In the OnStart, change Set(FabrikamBackColor,RGBA(0,0,0,1)) to Set(FabrikamBackColor,Color.Azure)
In the OnStart, change Set(FabrikamFrontColor,RGBA(255,255,255,1)) to Set(FabrikamFrontColor,Color.Black)
Select the ellipsis (…) to the right of App and select Run OnStart. Note that the colors change.
Select Save.
In the Tree view, select and expand ProjectScreen.
Select and expand ProjectGallery.
Select ProjectTitleTextInput and select BorderColor in the Property Selector.
Replace the RGBA value in the formula bar with FabrikamColor
Select ProjectTypeComboBox and select ChevronBackGround in the Property Selector.
Replace the RGBA value in the formula bar with FabrikamColor
Select BorderColor in the Property Selector for the ProjectTypeComboBox.
Replace the RGBA value in the formula bar with FabrikamColor
Repeat the steps to change the BorderColor and ChevronBackground color to FabrikamColor for ProjectStatusDropDown.
Repeat the steps to change the BorderColor and IconBackground color to FabrikamColor for EstimatedCompletionDate.
Select Save.

Task 2.3 - Background

In this task, you will perform the following changes to a screen:

add an image as a background

In the Tree view, select ProjectScreen.
In the Properties pane on the right side, select Background image > + Add an image file.
Locate and select the Texture.jpg file and select Open.

This file is located in the Documents\PL-200 folder on your machine.
The image will be added as the background for the screen.
Select Fit in the Image position drop-down.
Select Save.

Task 2.4 - Label

In this task, you will perform the following changes to a label:

correct the card label on the home screen

In the Tree view, select and expand HomeScreen.
Select and expand Card3.
Select Card3LabelValue and view the Text Property. Note that this card is displaying the count of Active Outcomes, but the label incorrectly says Active Milestones.
Select Card3LabelHeader and select Text in the Property Selector.
In the formula bar, change Active Milestones to Active Outcomes
Select Save.

Task 2.5 - Button

In this task, you will perform the following changes to the button:

change the name of the button
set the button as disabled if there are no rows

In the Tree view, select and expand OutcomeScreen.
Select the ellipsis (…) next to Button2 and select Rename.
Enter SaveBtn
With the button still selected, select DisplayMode in the Property Selector.
Enter the following formula:

If(CountRows(OutcomeGallery.AllItems) > 0, DisplayMode.Edit, DisplayMode.Disabled)
Select Save.
Select Publish.
Select Publish this version.

Exercise 3 – Logic

In this exercise, you will update formulas and logic in the canvas app. There are several issues with logic in the app:

the forms used on Milestone and Outcome screens only update Dataverse for the first row in the gallery.
the project types are not displayed for existing projects.

Task 3.1 - Outcome Status

In this task, you will perform the following changes to the screen:

remove the Status Reason column and replace with the new Status choice column

Navigate to the Power Apps Maker portal https://make.powerapps.com.
Make sure you are in the Dev One environment.
Select Solutions.
Open the Fabrikam Environmental solution.
In the Objects pane on the left, select Apps.
Select the Environmental Work Delivery app, select the Commands menu (…), and select Edit > Edit in new tab.
In the Tree view, select and expand OutcomeScreen.
Select and expand OutcomeForm.
In the Properties pane, select Edit fields.
Select + Add field.
Select Outcome Status
Select Add.
Select the More actions menu (…) next to Status Reason and select Remove.
Select and expand OutcomeGallery.
Select Subtitle5_1 and select Text in the Property Selector.
In the formula bar, replace ThisItem.’Status Reason’ with ThisItem.'Outcome Status'
Select Save.

Task 3.2 - Outcome form

In this task, you will perform the following changes to the screen:

correct the initialization of the form
use the LookUp formula with a Dataverse table

Select and expand OutcomeGallery.
Select NextArrow5_1 and select OnSelect in the Property Selector.
In the formula bar, replace NewForm(OutcomeForm) with Select(Parent)
Select OutcomeForm and select Item in the Property Selector.
Enter the following formula:

LookUp(Outcomes, Outcome = OutcomeGallery.Selected.Outcome)
Select Save.

Task 3.3 - Milestone form

In this task, you will perform the following changes to the screen:

correct the initialization of the form

In the Tree view, select and expand MilestoneScreen.
Select and expand MilestoneGallery.
Select NextArrow5 and select OnSelect in the Property Selector.
In the formula bar, replace NewForm(OutcomeForm) with Select(Parent)
Select Save.

Task 3.4 - Project type

In this task, you will perform the following changes to the screen:

display the Project Type for existing records

In the Tree view, select and expand ProjectScreen.
Select and expand ProjectGallery.
Select ProjectTypeComboBox and select DefaultSelectedItems in the Property Selector.
In the formula bar, enter ThisItem.'Project Type'
Select Save.
Select Publish.
Select Publish this version.
Close the canvas app designer tab.
Select Done.

Exercise 4 – Solutions

In this exercise, you will export the solution from the Development environment and import it into the Production environment.

Task 4.1 – Export managed solution

Navigate to the Power Apps Maker portal https://make.powerapps.com
Make sure you are in the Dev One environment.
Select Solutions.
Select the Fabrikam Environmental solution but do not open it.
Select Export solution.
Select Next.
Change the version number to 1.1.11.13.
Select Managed for Export As.
Select Export.
The export will be prepared in the background. When the solution is ready, select the Download button.

Task 4.2 – Export unmanaged solution

Select the Fabrikam Environmental solution.
Select Export solution.
Select Next.
Change the version number to 1.1.11.13.
Select Unmanaged for Export As.
Select Export.
The export will be prepared in the background. When the solution is ready, select the Download button.

Task 4.3 – Import managed solution

Switch to the Production environment using the Environment Selector in the upper right corner of the Maker portal.
Select Solutions.
Select Import solution.
Select Browse, change to the Downloads folder and select FabrikamEnvironmental_1_1_11_13_managed.zip and select Open.
Select Next.
Select Import. The solution will import in the background.