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.

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

Task 1.1 - Create a Power Pages site

Navigate to the Power Pages portal https://make.powerpages.microsoft.com/ and sign in with your Microsoft 365 credentials if prompted.
Use the Environment selector to switch to the Dev One environment.
Select Get started.
If you are asked about your experience creating websites, select Skip.
Choose the default design template, Starter layout 1, and select Choose this template.
Enter Fabrikam Milestones for Give your site a name.
Use the autogenerated web address.
Select Done.

The portal site will deploy. It can take a while for your site to fully deploy.
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

Navigate to the Power Pages portal https://make.powerpages.microsoft.com/.
Make sure you are in the Dev One environment.
Select Preview and then select Desktop.
If permissions are requested, check the Consent on behalf of your organization and select Accept.
Scroll down to the bottom of the page and note the page footer.
In the menu, select Pages and then select Subpage 2. You should see an empty page.
In the menu, select Contact us. You should see a form.
Complete the Fill in your details form with dummy data and select Submit.

In the menu, select Sign in.
Select Azure AD. This will sign you in with your Microsoft 365 credentials.
If permissions are requested, select Accept.
Enter MOD and Administrator for name and select Update.

Task 2.3 - Review the Power Pages Management model-driven app

Navigate to the Power Apps Maker portal https://make.powerapps.com
Make sure you are in the Dev One environment.
Select Apps and select All.
Select the Power Pages Management app, select the ellipsis menu (…), and select Play.
In the left navigation, select Web Pages. You should see 10 pages including Subpage 2.
Select and edit Subpage 2. You should see that this page uses the Default studio template page template.
Select Default studio template. You should see that this page uses the Default studio template web template.
Select Default studio template. You should see the source for the web template.
In the left navigation, select Web Templates. You should see many web templates.
In the left navigation, select Contacts.
A contact has been created for your user, MOD Administrator.
Select and edit MOD Administrator.
Select the caret at the top-left of the form and select the Portal Contact form.
Select the Web Authentication tab. You are authenticating using https://sts.windows.net which is Microsoft Entra Id (Azure Active Directory).
Select the General tab and view the Web Roles subgrid. Note that you have the Administrators web role.
In the left navigation, select Web Roles. You will see three web roles:
- Administrators
- Anonymous Users
- Authenticated Users

In the left navigation, select Content Snippets.
Select and edit Footer. Do not navigate away from this page.

Replace the HTML with the following:

 <p class="smallText">Copyright ©Fabrikam </p>
 <p class="smallText"></p>

Select Save & Close.

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

Task 2.5 - Review Portal Designer

Navigate to the Power Pages portal https://make.powerpages.microsoft.com/
Make sure you are in the Dev One environment.
Select Edit to open the site designer.
Scroll to the bottom of the page. You should see the footer that you changed in the earlier task.
In the Pages pane on the left side, select to expand Pages. You should see Subpage 2.
Select Subpage 2. Do not navigate away from this page.

Task 2.6 - Update pages in the Portal Designer

Select the ellipsis (…) and select Page settings.
Enter Milestones for Name.
Enter milestones for Partial URL.
Select OK.
In the canvas, select the heading, Subpage 2, and enter Milestones.
In the canvas, select the line of text underneath the heading and enter Status of environmental milestones.
Select the background in the canvas above the heading and select the section.
Select Edit background.
Pick the Yellow color under Brand colors.
In the Pages pane on the left side, select Subpage 1.
Select the ellipsis (…) and select Delete.
Select Delete.
Select Company name at the top of the page and select Edit site header.
Enter Fabrikam Environmental.

Task 2.7 - View the changes to the site

In the top-right of the Power Pages designer, select Sync.
Select Preview and then select Desktop.
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.

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 3.1 - Display Dataverse records

Navigate to the Power Pages portal https://make.powerpages.microsoft.com/.
Make sure you are in the Dev One environment.
Select Edit to open the site designer.
In the Pages pane on the left side, select and expand Pages, and select Milestones.
In the canvas under Choose a component to add to this section, select the List icon.
Select Milestone for Choose a table.
Select Milestones SubGrid for Select Dataverse views.
Enter Milestones for Name your list.
Select Done.

Task 3.2 - Security

Select Permissions in the list component editor (you may need to hover over the list to see this).
In the Table Permissions pane on the right-hand side, select + New permission
Enter Milestones for Name.
Select Milestone for Table.
Select Global access for Access type.
Check the following permissions:
- Read
- Update
- Create
- Append
- Append To
Select + Add Roles
Check the following permissions:
- Administrators
- Authenticated Users
Select Save.
In the Table Permissions pane on the right-hand side, select New table permission
Enter Projects for Name.
Select Project for Table.
Select Global access for Access type.
Check the following permissions:
- Read
- Append
Select + Add Roles
Check the following permissions:
- Administrators
- Authenticated Users
Select Save.
Select Close to close the Table permissions pane.
In the top-right of the Power Pages designer, select Sync.
Select Preview and then select Desktop.
Verify that milestone records are listed in the Power Pages site.

Task 3.3 - Form

In the Pages pane on the left side, and select Pages.
Select the ellipsis (…) and select Add a new subpage.
Enter Milestone Details.
Uncheck Add page to main navigation
Select Start from blank.
Select Add
In the canvas under Choose a component to add to this section, select the Form icon.
Select + New form.
Select Milestone for Choose a table.
Select Information for Select a form.
Enter Milestone for Name your copy of the select form.
Select the Data tab.
Select Updates an existing record for Data from this form.
Select the On submit tab.
Select Redirect to a page for When this form is submitted and then select the Milestones page.
Select the CAPTCHA tab.
Uncheck both boxes.
Select OK.
In the Pages pane on the left side, select Milestones.
Select the ellipsis (…) and select Promote this subpage.
In the Pages pane on the left side, select Pages.
Select the ellipsis (…) and select Delete.
In the Pages pane on the left side, select Milestones.
In the canvas, select the Milestones list component.
Select Actions.
Toggle View details to On.
Select Form for Target type.
Select Milestone for Forms.
Toggle Create a new record to On.
Select Form for Target type.
Select Milestone for Form.
Select OK.
In the top-right of the Power Pages designer, select Sync.
Select Preview and then select Desktop.
Test viewing and editing Milestones.