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 deploy a Power Pages portal and expose Milestone data to customers.

Exercise 1 - Sign up for Power Pages

In this exercise, you will provision a Power Pages site using a starter template.

Task 1.1 - Create a Power Pages site

  1. Navigate to the Power Pages portal https://make.powerpages.microsoft.com/ and sign in with your Microsoft 365 credentials if prompted.

  2. Use the Environment selector to switch to the Dev One environment.

  3. Select Get started.

  4. If you are asked about your experience creating websites, select Skip.

  5. Scroll down and select Start with a template.

  6. Choose the default design template, Starter layout 1, and select Choose this template.

    Select Starter layout template..

  7. Enter Fabrikam Milestones for Give your site a name.

  8. Use the autogenerated web address.

  9. Select Done.

    The portal site will deploy. It can take a while for your site to fully deploy.

    Power Pages portal deployed.

  10. Wait for the site to be deployed.

Exercise 2 - 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.

Task 2.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 Dev One environment.

  3. Select Preview and then select Desktop.

  4. If permissions are requested, check the Consent on behalf of your organization and select Accept.

    Power Pages consent.

  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 select Submit.

Task 2.2 - Sign in to the Power Pages site

  1. In the menu, select Sign in.

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

  3. If permissions are requested, select Accept.

    Power Pages permissions requested.

  4. Enter MOD and Administrator for First Name and Last Name respectively and select Update.

Task 2.3 - Review the Power Pages Management 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 Apps and select All.

  4. Select the Power Pages Management app, select the ellipsis menu (…), and select Play.

  5. In the left navigation, select Web Pages. You should see 10 rows including Subpage 2.

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

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

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

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

  10. In the left navigation, select Contacts.

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

  12. Select and edit MOD Administrator.

  13. Select the caret at the top-left of the form and select the Portal Contact (enhanced) form.

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

  15. Select the General tab and view the Web Roles subgrid. Note that you have the Administrators web role.

  16. In the left navigation, select Web Roles. You will see active Web Roles listed

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

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

  3. Replace the HTML with the following:

     <p class="smallText">Copyright ©Fabrikam </p>
     <p class="smallText"></p>
    
  4. Select Save & Close.

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

Task 2.5 - Review Portal Designer

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

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

    Power Pages sites.

  3. Select Edit to open the site designer.

    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 side, select to expand Pages. You should see Subpage 2.

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

Task 2.6 - Update pages in the Portal Designer

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

  2. Enter Milestones for Name.

  3. Enter milestones for Partial URL.

  4. Select OK.

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

  6. In the canvas, select the line of text underneath the heading and enter Status of environmental milestones.

  7. Select the background in the canvas above the heading and select the section.

  8. Select Edit background.

  9. Pick the Yellow color under Brand colors.

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

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

  12. Select Delete.

  13. Select Company name at the top of the page and select Edit site header.

  14. Enter Fabrikam Environmental.

    Power Pages portal edits.

Task 2.7 - View the changes to the site

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

  2. Select Preview and then select Desktop.

  3. Verify your changes have been made.

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

Task 3.1 - Display Dataverse records

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

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

  3. Select Edit to open the site designer.

  4. In the Pages pane on the left side, select and 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 for Choose a table.

  7. Select Milestones SubGrid for Select the data views.

  8. Enter Milestones for Name your list.

  9. Select Done.

Task 3.2 - Security

  1. Select 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, select + New permission

  3. Enter Milestones for Name.

  4. Select Milestone for Table.

  5. Select Global access for Access type.

  6. Check the following permissions:

    • Read
    • Update
    • Create
    • Append
    • Append To
  7. Select + Add roles

  8. Check the following permissions:

    • Administrators
    • Authenticated Users
  9. Select Save.

    Power Pages table permissions.

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

  11. Enter Projects for Name.

  12. Select Project for Table.

  13. Select Global access for Access type.

  14. Check the following permissions:

    • Read
    • Append
  15. Select + Add roles

  16. Check the following permissions:

    • Administrators
    • Authenticated Users
  17. Select Save.

  18. Select Close to close the Table permissions pane.

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

  20. Select Preview and then select Desktop.

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

Task 3.3 - Form

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

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

  3. Enter Milestone Details.

  4. Uncheck Add page to main navigation

  5. Select Start from blank.

    Add page to site.

  6. Select Add

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

  8. Select + New form.

  9. Select Milestone for Choose a table.

  10. Select Information for Select a form.

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

  12. Select the Data tab.

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

  14. Select the On submit tab.

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

  16. Select the CAPTCHA tab.

  17. Uncheck both boxes.

  18. Select OK.

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

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

  21. In the Pages pane on the left side, select Pages.

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

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

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

  25. Select Actions.

  26. Toggle View details to On.

  27. Select Form for Target type.

  28. Select Milestone for Forms.

  29. Toggle Create a new record to On.

  30. Select Form for Target type.

  31. Select Milestone for Form.

  32. Select OK.

  33. In the top-right of the Power Pages designer, select Sync.

  34. Select Preview and then select Desktop.

  35. Test viewing and editing Milestones.