Practice Lab 4.2 – Create a custom page

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 add a custom page to a model-driven app.

Exercise 1 – Add an image to the Resource table

In this exercise, you will be adding an image column to the Resource table.

Task 1.1 – Create an image column

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

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

  3. Select Solutions.

  4. Open the Fabrikam Environmental solution.

  5. In the Objects pane on the left, expand Tables.

  6. Select the Resource table.

  7. Under Schema, select Columns.

  8. Select + New column.

  9. Enter Picture for Display name.

  10. Select File and then Image in the Data type drop-down.

  11. Check the Primary image box.

    Image column.

  12. Select Save.

Task 1.2 – Add images to resources

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

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

  3. Select Solutions.

  4. Open the Fabrikam Environmental solution.

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

  6. Select the Environmental Administration app, and select Play.

  7. Select Resources.

  8. Edit each of the resources and upload an image by clicking the circle in the top-left of the form.

    Add image to resource.

Exercise 2 – Build custom page

In this exercise, you will build a custom page to manage project resources.

Task 2.1 - Create a custom page

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

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

  3. Select Solutions.

  4. Open the Fabrikam Environmental solution.

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

  6. Select the + New drop-down and select App then Page.

  7. Select With layout and select Split Screen.

  8. Select Settings which may be behind the ellipsis (…) menu in the command bar.

  9. Enter Project Resources page for Name.

  10. Close Settings.

  11. Rename Screen1 to Project Resources.

  1. In the Tree view, expand ScreenContainer1.

  2. Select LeftContainer1.

  3. In LeftContainer1, select the + icon and select Vertical gallery.

  4. Search for Resources and select the Resources table.

  5. On the Properties tab for the gallery, select Active Resources for Views.

  6. On the Properties tab for the gallery, under Fields select 5 selected.

  7. Select Resource Type for Subtitle1.

  8. Rename the gallery to ResourceList

    Gallery for resources.

  9. Close the Data panel.

  1. In the Tree view, expand ScreenContainer1.

  2. Select RightContainer1.

  3. In RightContainer1, select the + icon and select Vertical gallery.

  4. Search for Resources and select the Project Resources table.

  5. On the Properties tab for the gallery, select Project Resources SubGrid for Views.

  6. On the Properties tab for the gallery, select Title, subtitle, and body for Layout.

  7. On the Properties tab for the gallery, under Fields select 5 selected.

  8. Enter ThisItem.'Status Reason' for Body.

  9. Enter ThisItem.'Project Role' for Subtitle.

  10. Enter ThisItem.Name for Title.

    Fields for project resources.

  11. Select the gallery and select Items in the property selector.

    Filter('Project Resources', Resource.Resource = ResourceList.Selected.Resource)
    
  12. Rename the gallery to ProjectResourceList

  13. Preview the page and verify that two projects are listed for Sidney.

    Preview custom page.

  14. Close the preview.

  15. Select Save.

  16. Select Publish.

  17. Select Publish this version.

  18. Select 🡠 Back.

Task 2.4 – Add custom page

In this task, you will add the custom page to a model-driven 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 Solutions.

  4. Open the Fabrikam Environmental solution.

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

  6. Select the Environmental Project Delivery app, select the Commands menu (…), and select Edit > Edit in new tab.

  7. In the Pages pane on the left side, select projects.

  8. Select the ellipsis () for Projects and select New page.

  9. Select Custom page.

  10. Select Next.

  11. Select Use an existing custom page.

  12. Select Project Resources page.

  13. Select Add.

  14. Select Save.

  15. Select Publish.

  16. Select Play.

    Custom page in model-driven app.

  17. Select Project Resources page under Projects and verify that resources are displayed and then close the app and app designer browser tabs.

  18. Select Done.