Practice Lab 4.1 – Build 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, make some user interface changes, and call a Power Automate cloud flow.

Exercise 1 – Examine the canvas app

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

Task 1.1 - Run the app

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

  2. Make sure you are in your Practice environment.

  3. Select Solutions.

  4. Click to open the Fabrikam Environmental solution.

  5. In the Objects pane on the left, select Apps.

  6. Select the Environmental Work Delivery app, click on the ellipses (…), and select Play.

  7. Sign in with your Microsoft 365 credentials if prompted.

  8. 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

  9. Note that the label for Outcomes is incorrect. This is an issue your client, Fabrikam, has raised that needs to be fixed.

  10. Select the Projects screen (second icon).

  11. Note that Type is blank for existing projects.

  12. Note that the colors for the drop down controls are blue.

  13. Click the + icon. A new Project row is added.

  14. Enter Lab Project for Project Title.

  15. Select any Type.

  16. Select In Progress in the Status drop-down.

  17. Select a date in the next month in the Estimated date date picker and click OK.

  18. Click 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.

  19. Select the Milestones screen (third icon).

  20. Enter 50 in Milestone Percentage Complete

  21. Select the Outcomes screen (fourth icon).

  22. Enter To create a better planet in Goal.

  23. Select Completed in the Status Reason drop-down.

  24. Click Save.

  25. Select the Home screen (first icon).

  26. Close the app.

Task 1.2 - Review the app in Power Apps Studio

  1. Select the Environmental Work Delivery app, click on the ellipses (…), and select Edit.

  2. If a Welcome to Power App dialog appears, check the Don’t show me this again, and click Skip

  3. In the Tree view, expand Card1.

  4. Select Card1LabelValue and select Text in the Property Selector.

  5. Review the formula. Note that the filter uses the My Active Projects view.

  6. In the Tree view, select and expand ProjectScreen.

  7. In the Tree view, select and expand ProjectGallery.

  8. Select ProjectStatusDropDown and select Items in the Property Selector.

  9. Review the formula. Note the use of Choices.

  10. Select ProjectStatusDropDown and select OnChange in the Property Selector.

  11. Review the formula. Note the use of Patch.

  12. Select ProjectTitleTextInput and select OnChange in the Property Selector.

  13. Review the formula. Note the use of Patch.

  14. In the Tree view, select and expand MilestoneScreen.

  15. Select and expand MilestoneForm.

  16. Select and expand Milestone Percentage Complete

  17. Select DataCardValue2 and select OnChange in the Property Selector.

  18. Review the formula. Note the use of SubmitForm.

  19. In the Tree view, select and expand OutcomeScreen.

  20. Select and expand OutcomeForm.

  21. Select Button2 and select OnSelect in the Property Selector.

  22. Review the formula. Note the use of SubmitForm.

  23. Select HomeScreen.

  24. In the Tree view, select App.

  25. Select OnStart in the Property Selector.

  26. Review the formulas.

  27. Select the ellipses (…) to the right of App and click Run OnStart.

  28. In the ribbon at the top of the app designer, select the View tab.

  29. Select Variables.

  30. Review the variables for column widths and heights. The controls on screens use these variables for their X, Y, Height, and Width.

  31. Review the variables for column widths and heights. The controls on screens use these variables for color properties.

  32. Click the back arrow to return to the canvas.

  33. In the Tree view, select TitleLabel under HomeScreen.

  34. Select X in the Property Selector and note the use of a variable.

  35. Select Y in the Property Selector and note the use of variables in the formula.

  36. In the ribbon at the top of the app designer, select the View tab.

  37. Select Collections.

  38. Review the three collections.

  39. Click the back arrow to return to the canvas.

  40. In the menu, select File and then Close. If there are unsaved changes click Don’t save.

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.

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

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

  2. Make sure you are in the Practice environment.

  3. Select Solutions.

  4. Click to open the Fabrikam Environmental solution.

  5. In the Objects pane on the left, select Apps.

  6. Select the Environmental Work Delivery app, click on the ellipses (…), and select Edit.

  7. In the Tree view, select App.

  8. Select OnStart in the Property Selector.

  9. In the OnStart, change Set(BarrierSize,20) to Set(BarrierSize,10). Note that you can click the caret to the right of the formula bar to expand it.

  10. Select the ellipses (…) to the right on App and click Run OnStart. Note that the layout adjusts and the tiles become bigger.

  11. In the OnStart, change Set(LeftHandWidth,App.Width/10) to Set(LeftHandWidth,App.Width/12).

  12. Select the ellipses (…) to the right on App and click Run OnStart. Note that the layout adjusts.

  13. In the menu, select File and then Close. If there are unsaved changes click Don’t save.

Task 2.2 - Colors

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

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

  1. Select the Environmental Work Delivery app, click on the ellipses (…), and select Edit.

  2. In the Tree view, select App.

  3. Select OnStart in the Property Selector.

  4. In the OnStart, change Set(FabrikamBackColor,RGBA(0,0,0,1)) to Set(FabrikamBackColor,Color.Black).

  5. In the OnStart, change Set(FabrikamFrontColor,RGBA(255,255,255,1)) to Set(FabrikamFrontColor,Color.Azure).

  6. Select the ellipses (…) to the right on App and click Run OnStart. Note that the colors change.

  7. In the menu, select File and then Save.

  8. Click the back arrow to return to the canvas app editor.

  9. In the Tree view, select and expand ProjectScreen.

  10. Select and expand ProjectGallery.

  11. Select ProjectTitleTextInput and select BorderColor in the Property Selector.

  12. Replace the RGBA value in the formula bar with FabrikamColor.

  13. Select ProjectTypeComboBox and select ChevronBackGround in the Property Selector.

  14. Replace the RGBA value in the formula bar with FabrikamColor.

  15. Select BorderColor in the Property Selector for the ProjectTypeComboBox.

  16. Replace the RGBA value in the formula bar with FabrikamColor.

  17. Repeat the steps to change the BorderColor and ChevronBackGround color to FabrikamColor for ProjectStatusDropDown.

  18. Repeat the steps to change the BorderColor and IconBackground color to FabrikamColor for EstimatedCompletionDate.

  19. In the menu, select File and then Save.

  20. Click the back arrow to return to the canvas app editor.

Task 2.3 - Background

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

  • add an image as a background

  1. In the Tree view, select ProjectScreen.

  2. In the Properties pane on the right-hand side, select Background image > + Add an image file.

  3. Locate and select the Texture.jpg file and click on Open.

    This file is located in the Documents\PL-200 folder on your machine.

  4. The image will be added as the background for the screen.

  5. Select Fit in the Image position drop-down.

  6. In the menu, select File and then Save.

  7. Click the back arrow to return to the canvas app editor.

Task 2.4 - Label

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

  • correct the card label on the home screen

  1. In the Tree view, select and expand HomeScreen.

  2. Select and expand Card3.

  3. 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.

  4. Select Card3LabelHeader and select Text in the Property Selector.

  5. In the formula bar, change “Active Milestones” to “Active Outcomes”

  6. In the menu, select File and then Save.

  7. Click the back arrow to return to the canvas app editor.

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

  1. In the Tree view, select and expand OutcomeScreen.

  2. Select the ellipses (…) next to Button2 and select Rename.

  3. Enter SaveBtn.

  4. With the button still selected, select DisplayMode in the Property Selector.

  5. Enter the following formula:

    If(CountRows(OutcomeGallery.AllItems) > 0, DisplayMode.Edit, DisplayMode.Disabled)

  6. In the menu, select File and then Save.

  7. Click Publish.

  8. Click Publish this version.

Exercise 3 – Logic

In this exercise, you will update formulas and logic in the canvas app.

Task 3.1 - Outcome Status

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

  • remove Status Reason and replace with new choice column

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

  2. Make sure you are in the Practice environment.

  3. Select Solutions.

  4. Click to open the Fabrikam Environmental solution.

  5. In the Objects pane on the left, select Apps.

  6. Select the Environmental Work Delivery app, click on the ellipses (…), and select Edit.

  7. In the Tree view, select and expand OutcomeScreen.

  8. Select and expand OutcomeForm.

  9. In the Properties pane, click Edit fields.

  10. Click + Add field.

  11. Select Outcome Status.

  12. Click Add.

  13. Select the ellipses (…) next to Status Reason and select Remove.

  14. Select and expand OutcomeGallery.

  15. Select Subtitle5_1 and select Text in the Property Selector.

  16. In the formula bar, replace ThisItem.’Status Reason’ with ThisItem.’Outcome Status’

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

  1. Select and expand OutcomeGallery.

  2. Select NextArrow5_1 and select OnSelect in the Property Selector.

  3. In the formula bar, replace NewForm(OutcomeForm) with Select(Parent).

  4. Select OutcomeForm and select Item in the Property Selector.

  5. Enter the following formula:

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

Task 3.3 - Milestone form

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

  • correct the initialization of the form

  1. In the Tree view, select and expand MilestoneScreen.

  2. Select and expand MilestoneGallery.

  3. Select NextArrow5 and select OnSelect in the Property Selector.

  4. In the formula bar, replace NewForm(OutcomeForm) with Select(Parent).

Task 3.4 - Project type

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

  • display the Project Type for existing records

  1. In the Tree view, select and expand ProjectScreen.

  2. Select and expand ProjectGallery.

  3. Select ProjectTypeComboBox and select DefaultSelectedItems in the Property Selector.

  4. In the formula bar, enter ThisItem.’Project Type’.

  5. In the menu, select File and then Save.

  6. Click Publish.

  7. Click Publish this version.

  8. In the menu, select File and then Close.

Exercise 4 – Power Automate

In this exercise, you will add a Power Automate flow to the canvas app to reset the status of a Milestone.

Task 4.1 - Create flow

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

  • create an instant flow for use in the canvas app
  • perform a flow action to reset the status of a Milestone

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

  2. Make sure you are in the Practice environment.

  3. Select Solutions.

  4. Click to open the Fabrikam Environmental solution.

  5. In the Objects pane on the left, select Cloud flows.

  6. In the solution, select + New > Automation > Cloud flow > Instant.

    NOTE: If a Welcome to Power Automate dialog appears, click Get Started.

  7. Enter Reset milestone status for Flow name

  8. Select PowerApps for Chose how to trigger this flow.

  9. Click Create.

  10. Click on + New step.

  11. Select the Microsoft Dataverse connector.

  12. Select the Update a row action.

  13. Select Milestones for Table name.

  14. Click in the Row ID field.

  15. In Dynamic content, select Ask in PowerApps.

  16. Expand Show advanced options.

  17. Enter 0 for Milestone Percentage Complete..

  18. Select Planned for Milestone status.

  19. Click Save and wait for the flow to save.

  20. Click the back arrow icon in the top-left of the flow editor.

Task 4.2 - Add flow to canvas app

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

  • add the flow to the canvas app
  • run the flow from a button

  1. In the Objects pane on the left, select Apps.

  2. Select the Environmental Work Delivery app, click on the ellipses (…), and select Edit.

  3. In the left menu, select the Power Automate icon.

  4. Click + Add flow.

  5. Select Reset milestone status.

  6. The flow will be added to the app.

  7. In the Tree view, select and expand OutcomeScreen.

  8. Select SaveBtn.

  9. Select the ellipses (…) next to the button in the Tree View and select Copy.

  10. In the Tree view, select and expand MilestoneScreen.

  11. Right-click in the app area and select Paste.

  12. Select the ellipses (…) next to SaveBtn_1 and select Rename.

  13. Enter ResetBtn.

  14. Select Text in the Property Selector and enter “Reset”.

  15. Select DisplayMode in the Property Selector and change the formula to use the “MilestoneGallery”.

  16. Select OnSelect in the Property Selector.

  17. Enter the following formula:

    Resetmilestonestatus.Run(MilestoneGallery.Selected.Milestone);Refresh(Milestones);

  18. Drag ResetBtn under the form.

Task 4.3 - Publish and share the app

  1. In the menu, select File and then Save.

  2. Click Publish.

  3. Click Publish this version.

  4. In the menu, select File.

  5. Click Share.

  6. Enter Alex in Enter a name, email address, or Everyoneand select Alex Wilber

  7. Click Share.

  8. Enter Patti in Enter a name, email address, or Everyone and select Patti Fernandez.

  9. Check the Co-owner box.

  10. Click Share.

  11. Click Cancel to close the sharing pane.

  12. Close the tab.

Exercise 5 – Solutions

In this exercise, you will export the solution from the Practice environment and import it into the MOD Administrator’s environment.

Task 5.1 – Export managed solution

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

  2. Make sure you are in the Practice environment.

  3. Select Solutions.

  4. Select the Fabrikam Environmental solution but do not open it.

  5. Select Export solution.

  6. Click Next.

  7. The version number should have been incremented to 1.1.11.10.

  8. Select Managed for Export As.

  9. Click Export.

  10. The export will be prepared in the background. When the solution is ready, click the Download button.

Task 5.2 – Export unmanaged solution

  1. Select the Fabrikam Environmental solution.

  2. Select Export solution.

  3. Click Next.

  4. The version number should have been incremented to 1.1.11.11

  5. Select Unmanaged for Export As.

  6. Click Export.

  7. The export will be prepared in the background. When the solution is ready, click the Download button.

Task 5.3 – Import managed solution

  1. Switch environments by using the Environment Selector in the upper right corner of the Maker portal.

  2. Select the MOD Administrator’s Environment environment from the list.

  3. Select Solutions.

  4. Select Import solution.

  5. Select Browse, change to the Downloads folder and select FabrikamEnvironmental_1_1_11_10_managed.zip and select Open.

  6. Click Next.

  7. Click Import. The solution will import in the background.