Practice Lab 5.1 – Build a Power Pages portal

Scenario

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

In this practice lab, you will explore your Power Pages portal and expose Milestone data to customers.

Exercise 1 - Explore and configure a Power Pages site

In this exercise, you will explore a Power Pages site and the Power Pages tools. You will make minor changes to the site content.

IMPORTANT: At the time of writing, Power Pages is in technical preview and the steps may differ. Refer to https://docs.microsoft.com/power-pages/getting-started/create-manage for the latest documentation.

Task 1.1 - Review the Power Pages site

  1. Navigate to the Power Pages portal https://make.powerpages.microsoft.com/.

  2. Make sure you are in the Practice environment.

  3. Click on Preview and then select Desktop.

  4. In the portal site, note the name of the tab in the browser, Home - Starter Portal.

  5. Scroll down to the bottom of the page and note the page footer.

  6. In the menu, select Pages and then select Subpage 2. You should see an empty page.

  7. In the menu, select Contact us. You should see a form.

  8. Complete the Fill in your details form with dummy data and click Submit.

Task 1.2 - Sign in to the Power Pages site

  1. In the menu, select Sign in.

  2. Click Azure AD. This will sign you in with your Microsoft 365 credentials.

    Power Pages permissions requested.

  3. In the permissions requested dialog, click Accept.

Your user has been added to the portal site.

Task 1.3 - Review the Portal Management model-driven app

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

  2. Make sure you are in your Practice environment.

  3. Select Apps.

  4. Select the Portal Management app, click on the ellipses (…), and select Play.

  5. In the left-hand navigation, select Web Pages. You should see 9 pages including Subpage 2.

  6. Select and edit Subpage 2. You should see that this page uses the Default studio template page template.

  7. Click Default studio template. You should see that this page uses the Default studio template web template.

  8. Click Default studio template. You should see the source for the web template.

  9. In the left-hand navigation, select Web Templates. You should see many web templates.

  10. In the left-hand navigation, select Contacts.

  11. A contact has been created for your user, MOD Administrator.

  12. Select and edit MOD Administrator.

  13. Click the caret at the top-left of the form and select the Portal Contact form.

  14. Select the Web Authentication tab. You are authenticating using https://sts.windows.net which is Azure Active Directory.

  15. Select the Related tab and then select Web Roles. Note that you have the Administrators web role.

  16. In the left-hand navigation, select Web Roles. You will see three web roles:

    • Administrators
    • Anonymous Users
    • Authenticated Users
  1. In the left-hand navigation, select Content Snippets.

  2. Select and edit Footer. Do not navigate away from this page.

  3. Select the HTML tab.

  4. Replace the HTML with the following:

     <p class="smallText">Copyright ©Fabrikam </p>
     <p class="smallText"></p>
    
  5. Click Save & Close.

    NOTE: The footer on the site is not updated immediately.

Task 1.5 - Review Portal Designer

  1. Navigate to the Power Pages portal https://make.powerpages.microsoft.com/.

  2. Make sure you are in the Practice environment.

  3. Edit Edit.

    Power Pages designer.

  4. Scroll to the bottom of the page. You should see the footer that you changed in the earlier task.

  5. In the Pages pane on the left-hand side, click to expand Pages. You should see Subpage 2.

  6. Select Subpage 2. Do not navigate away from this page.

Task 1.6 - Update pages in the Portal Designer

  1. Select the ellipses (…) and select Page settings.

  2. Enter Milestones for Name.

  3. Enter milestones for Partial URL.

  4. Click OK.

  5. In the canvas, click on the heading, Subpage 2, and enter Milestones.

  6. In the canvas, click the line of text underneath the heading and enter Status of environmental miletones.

  7. Click on the background in the canvas above the heading and select the section.

  8. Click on Edit background.

  9. Pick the Yellow color under Brand colors.

  10. In the Pages pane on the left-hand side, select Subpage 1.

  11. Select the ellipses (…) and select Delete.

  12. Click Delete.

  13. In the Pages pane on the left-hand side, select Home.

  14. Click on Company name at the top of the page.

  15. Enter Fabrikam Environmental.

    Power Pages portal edits.

Task 1.7 - View the changes to the site

  1. In the top-right of the Power Pages designer, click on Sync.

  2. Click on Preview and then select Desktop.

  3. Verify your changes have been made.

Exercise 2 – Expose Dataverse data

In this exercise, you will add a list of Milestone rows to the page, add a form to edit rows, and configure security to allow the data to be changed in the portal site.

IMPORTANT: At the time of writing, Power Pages is in technical preview and the steps may differ. Refer to https://docs.microsoft.com/power-pages/getting-started/what-is-dataverse for the latest documentation.

Task 2.1 - Display Dataverse records

  1. Navigate to the Power Pages portal https://make.powerpages.microsoft.com/.

  2. Make sure you are in the Practice environment.

  3. Edit Edit.

  4. In the Pages pane on the left-hand side, click to expand Pages, and select Milestones.

  5. In the canvas under Choose a component to add to this section, select the List icon.

  6. Select Milestone (contoso_milestone) for Choose a table.

  7. Select Milestones SubGrid for Select Dataverse views.

  8. Enter Milestones for Name your copy of the select list.

  9. Click OK.

Task 2.2 - Security

  1. Click on Permissions in the list component editor (you may need to hover over the list to see this).

  2. In the Table Permissions pane on the right-hand side, click + New permission

  3. Enter Milestones for Name.

  4. Select Milestone (contoso_milestone) for Table.

  5. Select Global access for Access type.

  6. Check the following permissions:

    • Read
    • Write
    • Create
    • Append
    • Append To
  7. Click + Add Roles

  8. Check the following permissions:

    • Administrators
    • Authenticated Users
  9. Click Save.

    Power Pages table permissions.

  10. In the Table Permissions pane on the right-hand side, click New table permission

  11. Enter Project for Name.

  12. Select Project (contoso_project) for Table.

  13. Select Global access for Access type.

  14. Check the following permissions:

    • Read
    • Append To
  15. Click + Add Roles

  16. Check the following permissions:

    • Administrators
    • Authenticated Users
  17. Click Save.

  18. Click Close to close the Table permissions pane.

  19. In the top-right of the Power Pages designer, click on Sync.

  20. Click on Preview and then select Desktop.

  21. Verify that milestone records are listed in the Power Pages site.

  22. Close the Starter Portal tab.

Task 2.3 - Form

  1. In the Pages pane on the left-hand side, and select Pages.

  2. Select the ellipses (…) and select Add a new subpage.

  3. Enter Milestone Details

  4. Uncheck Add this page to main navigation

  5. Select Start from blank.

    Add page to site.

  6. Click Add

  7. In the canvas under Choose a component to add to this section, select the Form icon.

  8. Click + New form.

  9. Select Milestone (contoso_milestone) for Choose a table.

  10. Select Information for Select a form.

  11. Enter Milestone for Name your copy of the select form.

  12. Select Data.

  13. Select Updates an existing record for Data from this form.

  14. Select On submit.

  15. Select Redirect to a page for When this form is submitted and then select the Milestones page.

  16. Select CAPTCHA.

  17. Uncheck both boxes.

  18. Click OK.

  19. In the Pages pane on the left-hand side, and select Milestones.

  20. Select the ellipses (…) and select Promote this subpage.

  21. In the Pages pane on the left-hand side, and select Pages.

  22. Select the ellipses (…) and select Delete.

  23. In the Pages pane on the left-hand side, and select Milestones.

  24. In the canvas, select the Milestones list component.

  25. In the list component editor, select Edit list.

  26. Select Data.

  27. Toggle View details to On.

  28. Select Form for Target type.

  29. Select Milestone for Forms.

  30. Toggle Create a new record to On.

  31. Select Form for Target type.

  32. Select Milestone for Form.

  33. Click OK.

  34. In the top-right of the Power Pages designer, click on Sync.

  35. Click on Preview and then select Desktop.

  36. Test viewing and editing Milestones.