Practice Lab 4 - Configure forms and views

Scenario

In this lab, you will configure forms and views for a model-driven app.

Contoso Real Estate wants to track two key elements:

  • Real estate property listings
  • Who is scheduled for showings of real estate properties

What you will learn

  • How to configure table forms
  • How to configure table views

High-level lab steps

  • Configure the Real Estate Property and Showing main form
  • Configure tabs and sections
  • Add columns to forms
  • Add a subgrid
  • Create a new forms
  • Associate security roles with forms
  • Configure Real Estate Property and Showing views
  • Filter views
  • Configure Quick Find view

Prerequisites

  • Must have completed Lab 2: Data model

Detailed steps

Exercise 1 - Real Estate Property main form

In this exercise, you will modify the main form for the Real Estate Property table.

Task 1.1 – Main form layout and columns

  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 Property listings solution.

  5. Select the Real Estate Property table.

  6. Under Data experiences, select Forms.

  7. Select the Information form where the Form type is Main, select the Commands menu (…), and select Edit > Edit in new tab.

  8. Select Tree view on the left-hand side of the form designer.

  9. Select the General tab.

  10. Enter generalTab for Name.

  11. In the Properties pane on the right-hand side, select 3 columns in the Layout drop-down.

    Screenshot of main form with 3 column tab.

  12. In the Tree view, expand the General tab. Select the first section and enter generalSection for Name.

  13. Select the second section and enter Timeline for Label and timelineSection for Name.

  14. Select the third section and enter Related for Label and relatedSection for Name.

  15. Drag the Owner field into the Header area.

    Screenshot of main form with tree view and names.

  16. Select Table columns from the left navigation in the form designer.

  17. Drag the Status Reason column into the Header area.

  18. Select the first section.

  19. Drag the Client column below the Property Name field.

  20. Select the Street column to add to the form below Client.

  21. Select the City column to add to the form below Street.

  22. Select Components from the left navigation in the form designer.

  23. Select the 1-column section control to add it to the form below the General section.

  24. Enter Details for Label and detailsSection for Name.

  25. Select Table columns from the left navigation in the form designer.

  26. Select the Asking Price column to add to the Details section.

  27. Select the Currency column to add to the form below Asking Price.

  28. Select the Bedrooms column to add to the form below Currency.

  29. Select the Bathrooms column to add to the form below Bedrooms.

    Screenshot of main form with table columns.

Task 1.2 – Add Timeline control

  1. Select Tree view from the left navigation in the form designer.

  2. Select the Timeline section.

  3. Select Components from the left navigation in the form designer.

  4. Expand Display.

  5. Select the Timeline control to add it to the Timeline section.

  6. Select Tree view from the left navigation in the form designer, expand General tab, and select the Timeline section.

  7. In the Properties pane on the right side, check the Hide label box.

    Timeline control on form.

  8. In the Tree view, select the Note Text control for the Timeline.

  9. In the Properties pane on the right side, select Social Activity, uncheck the Enable box, and select Done.

  10. In the Properties pane on the right side, select Date Created in the Sort activities by drop-down.

Task 1.3 – Add Quick View control

  1. Select Tree view on the left-hand side of the form designer.

  2. Select the Related section.

  3. Select Components on the left navigation of the form designer.

  4. Expand Display.

  5. Select the Quick View control to add it to the Related section.

  6. Select Client for Lookup and account contact card for Contact and select Done.

Task 1.4 – Add Tab

  1. Select Components on the left navigation of the form designer.

  2. Select the 1-column tab control to add it to the form.

  3. Enter Showings for Label and showingTab for Name.

  4. Select Tree view on the left side of the form designer, expand Showings tab, and select the New Section section.

  5. Enter Showings for Label and showingSection for Name.

  6. Select Components on the left navigation of the form designer.

  7. Expand Grid.

  8. Select the Subgrid control to add it to the Showings section.

  9. Select Show related records.

  10. Select Showings (Real Estate Property) for Table and Active Showings for Default view and select Done.

  11. Enter Showings for Label and showingsSG for Name.

  12. Select Hide label.

  13. Select Save and publish.

  14. Close the form designer.

  15. Select Done.

Exercise 2 - Showing main form

In this exercise, you will modify the main form for the Showing table.

Task 2.1 – Main form layout and columns

  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 Property listings solution.

  5. Select the Showing table.

  6. Under Data experiences, select Forms.

  7. Select the Information form where the Form type is Main, select the Commands menu (…), and select Edit > Edit in new tab.

  8. Drag the Owner field into the Header area.

  9. Select Table columns from the left navigation in the form designer.

  10. Drag the Real Estate Property column below the Name field.

  11. Select the Shown to column to add to the form below Real Estate Property.

  12. Select the Shown by column to add to the form below Shown to.

  13. Select the Showing Date column to add to the form below Shown by.

  14. Select the Level of Interest column to add to the form below Showing Date.

  15. Select the Comments column to add to the form below Level of Interest.

  16. In the Properties pane on the right-hand side, increase Form field height to 3 rows.

  17. Select Save and publish.

  18. Close the form designer.

  19. Select Done.

Exercise 3 - Multiple forms

In this exercise, you will create a new form and restrict access with a security role.

Task 3.1 – Security role

  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 Property listings solution.

  5. Select + New, select Security, and select Security role.

  6. Enter Property admin for Role Name.

  7. Select the Root Business Unit and select Save.

  8. Enter cre_ in Search by table name in the upper-right of the page.

  9. Select Show all tables in the drop-down on the left-hand side of the page.

  10. Select the Real Estate Property table.

  11. Select the Commands menu (…), and select Permission Settings.

  12. Select Full Access to change the access level on all privileges to Organization.

  13. Select Save.

    Real Estate Property privileges in security role.

  14. Select the Showing table.

  15. Select the Commands menu (…), and select Permission Settings.

  16. Select Full Access to change the access level on all privileges to Organization.

  17. Select Save.

  18. Select the Open House table.

  19. Select the Commands menu (…), and select Permission Settings.

  20. Select Full Access to change the access level on all privileges to Organization.

  21. Select Save.

  22. Select <- Back.

Task 3.2 – Copy form

  1. Select the Showing table.

  2. Under Data experiences, select Forms.

  3. Select the Information form where the Form type is Main, select the Commands menu (…), and select Edit > Edit in new tab.

  4. Select Level of Interest and in the Properties pane, select Read-only.

  5. Select Comments and in the Properties pane, select Read-only.

  6. Select Save a copy.

  7. Enter Showing admin form for Display Name and select Save.

    Copy of Showing main form.

  8. Select Form settings.

  9. Select the Property admin security role.

    Main form security roles.

  10. Select Save and publish.

  11. Close the form designer.

  12. Select Done.

Exercise 4 - Real Estate Property views

In this exercise, you will modify the views for the Real Estate Property table.

Task 4.1 – Real Estate Property Public view

  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 Property listings solution.

  5. Select the Real Estate Property table.

  6. Under Data experiences, select Views.

  7. Select the Active Real Estate Properties view, select the Commands menu (…), and select Edit > Edit in new tab.

  8. Select the caret next to the Created On column and select Remove.

  9. Select the Asking Price column to add to the view.

  10. Select the City column to add to the view.

  11. Select the Bedrooms column to add to the view.

  12. Select the Bathrooms column to add to the view.

  13. Select the Client column to add to the view.

  14. In the Properties pane, remove Property Name under Sort by.

  15. In the Properties pane, select Sort by and select Asking Price.

    Real Estate Property active view.

  16. Select Save and publish.

  17. Close the view designer.

  18. Select Done.

Task 4.2 – Real Estate Property Quick Find view

  1. Select the Quick Find Active Real Estate Properties view, select the Commands menu (…), and select Edit > Edit in new tab.

  2. Select the caret next to the Created On column and select Remove.

  3. In the Quick Find Active Real Estate Properties pane on the right, select Edit find table columns under Find by.

  4. Choose the following columns and select Apply.

    • City
    • Client
    • Property Name
  5. Select Save and publish.

  6. Close the view designer.

  7. Select Done.

Exercise 5 - Showing views

In this exercise, you will modify the views for the Showing table.

Task 5.1 – Showing Public view

  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 Property listings solution.

  5. Select the Showing table.

  6. Under Data experiences, select Views.

  7. Select the Active Showings view, select the Commands menu (…), and select Edit > Edit in new tab.

  8. Select the caret next to the Created On column and select Remove.

  9. Select the Real Estate Property column to add to the view.

  10. Select the Showing Date column to add to the view.

  11. Select the Shown to column to add to the view.

  12. Select the Level of Interest column to add to the view.

  13. Select the Related tab.

  14. Expand Real Estate Property.

  15. Select the Asking Price column to add to the view.

  16. In the Properties pane, remove Name under Sort by.

  17. In the Properties pane, select Sort by and select Showing Date.

  18. On the Save and publish drop-down menu, select Save only.

Task 5.2 – New Showing view

  1. Select Save As.

  2. Enter High Interest showings for Name.

  3. Select Save.

  4. Select the caret next to the Level of Interest column and select Filter by.

  5. Select Equals and choose Very High and High.

  6. Select Apply.

  7. Select Save and publish.

  8. Close the view designer.

  9. Select Done.