New lab for custom pages

Instructions/Labs/LAB[PL-200]_M04L01_Custom_page.md

@@ -0,0 +1,203 @@
+---
+lab:
+    title: 'Lab 4.2: Create a custom page'
+    module: 'Learning Path 4: Create canvas apps'
+---
+
+# 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>.
+
+1. Make sure you are in the **Dev One** environment.
+
+1. Select **Solutions**.
+
+1. Open the **Fabrikam Environmental** solution.
+
+1. In the **Objects** pane on the left, expand **Tables**.
+
+1. Select the **Resources** table.
+
+1. Under **Schema**, select **Columns**.
+
+1. Select **+ New column**.
+
+1. Enter `Picture` for **Display Name**.
+
+1. Select **File** and then **Image** in the **Data type** drop-down.
+
+1. Check the **Primary image** box.
+
+    ![Image column.](../media/image-column.png)
+
+1. Select **Save**.
+
+### Task 1.2 – Add images to resources
+
+1. Navigate to the Power Apps Maker portal <https://make.powerapps.com>.
+
+1. Make sure you are in the **Dev One** environment.
+
+1. Select **Solutions**.
+
+1. Open the **Fabrikam Environmental** solution.
+
+1. In the **Objects** pane on the left, select **Apps**.
+
+1. Select the **Environmental Administration** app, and select **Play**.
+
+1. Select **Resources**.
+
+1. Edit each of the resources and upload an image by clicking the circle in the top-left of the form.
+
+    ![Add image to resource.](../media/add-image.png)
+
+## 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>.
+
+1. Make sure you are in the **Dev One** environment.
+
+1. Select **Solutions**.
+
+1. Open the **Fabrikam Environmental** solution.
+
+1. In the **Objects** pane on the left, select **Apps**.
+
+1. Select the **+ New** drop-down and select **App** then **Page**.
+
+1. Select **With layout** and select **Split Screen**.
+
+1. Select **Settings** .
+
+1. Enter `Project Resources page` for *Name*.
+
+1. Close Settings.
+
+1. Rename *Screen1* to `Project Resources`.
+
+### Task 2.2 - Add gallery for resources
+
+1. In the **Tree view**, expand **ScreenContainer1**.
+
+1. Select **LeftContainer1**.
+
+1. In **LeftContainer1**, select the **+** icon and select **Vertical Gallery**.
+
+1. Search for `Resources` and select the **Resources** table.
+
+1. In the Properties pane for the gallery, select **Active Resources** for *Views*.
+
+1. In the Properties pane for the gallery, select **Image, title and subtitle** for *Layout*.
+
+1. In the Properties pane for the gallery, **Edit fields**.
+
+1. Select **Resource Type** for *Subtitle*.
+
+1. Rename the gallery to `ResourceList`
+
+    ![Gallery for resources.](../media/custom-page-resources.png)
+
+### Task 2.3 - Add gallery for project resources
+
+1. In the **Tree view**, expand **ScreenContainer1**.
+
+1. Select **RightContainer1**.
+
+1. In **RightContainer1**, select the **+** icon and select **Vertical Gallery**.
+
+1. Search for `Resources` and select the **Project Resources** table.
+
+1. In the Properties pane for the gallery, select **Project Resources SubGrid** for *Views*.
+
+1. In the Properties pane for the gallery, select **Title, subtitle ans body** for *Layout*.
+
+1. In the Properties pane for the gallery, **Edit fields**.
+
+1. Select **ThisItem.Name** for *Name*.
+
+1. Select **ThisItem.'Project Role'** for *Subtitle*.
+
+1. Select **ThisItem.'Status Reason'** for *Subtitle*.
+
+    ![Fields for project resources.](../media/custom-page-projectresouce-fields.png)
+
+1. Select the gallery and select **Items** in the property selector.
+
+   ```powerappsfl  
+   Filter('Project Resources', Resource.Resource = ResourceList.Selected.Resource)
+   ```
+
+1. Rename the gallery to `ProjectResourceList`
+
+1. Preview the page and verify that two projects are listed for Sidney.
+
+    ![Preview custom page.](../media/custom-page-preview.png)
+
+1. Close the preview.
+
+1. Select **Save**.
+
+1. Select **Publish**.
+
+1. Select **Publish this version**.
+
+1. 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`
+
+1. Make sure you are in the **Dev One** environment.
+
+1. Select **Solutions**.
+
+1. Open the **Fabrikam Environmental** solution.
+
+1. In the **Objects** pane on the left, select **Apps**.
+
+1. Select the **Environmental Project Delivery** app, select the **Commands** menu (...), and select **Edit** > **Edit in new tab**.
+
+1. In the **Pages** pane on the left side, select **projects**.
+
+1. Select the ellipses **..** for **Projects** and select **New page**
+
+1. Select **Custom page**.
+
+1. Select **Next**.
+
+1. Select **Use an existing custom page**.
+
+1. Select **Project Resources page**.
+
+1. Select **Add**.
+
+1. Select **Save**.
+
+1. Select **Publish**.
+
+1. Select **Play**.
+
+    ![Custom page in model-driven app.](../media/custom-page-play.png)
+
+1. Select the Project Resources page and verify that resources are displayed and then  **Close** the app and app designer windows.
+
+1. Select **Done**.