Exercise - Use the list and form components
The purpose of this exercise is to provide you with hands-on experience in adding a list and a form to a Power Pages website.
Learning objectives
The objective of these exercises is to help you learn how to:
Add a list component to a webpage.
Add a form component to a webpage.
Set up the list component to drill down and view details of the row.
Prerequisites
The prerequisites for completing these exercises include:
Access to the Power Apps maker portal.
Default sample Microsoft Dataverse apps and data (optimally); however, you can use other Dataverse tables with data.
A provisioned Power Pages website. If you don't have a provisioned website, go to Create a site with Power Pages to create one.
Tip
The exercises work best when you have sample data to work with. When you provision a Dataverse environment, you can add sample apps and data. Review the Create Environment steps to provision a Dataverse environment with sample apps and data.
Scenario
Your organization has provisioned a Power Pages website and wants to display a list of available products on a public webpage. Another requirement is to give visitors the ability to drill down and view other details.
High-level steps
To finish the exercise, complete the following tasks:
Create table permissions to allow read access to the Dataverse table.
Create a webpage and add a list component that's linked to the Dataverse table.
Create a child webpage with a form component to display details for the Dataverse table.
Modify the list component to allow visitors to drill down and view the detail row on the form page.
Create a table permission row
Access to any Dataverse table is controlled by table permissions. To allow read-only access to the Products table, follow these steps:
Sign in to Power Pages.
Select the target environment in the upper-right corner.
Locate your website and then select Edit to open Power Pages design studio.
Select the Security tab.
Select Table permissions in the Protect section.
Select + New permission and then fill in the following information:
Name - Product
Table - Product Table
Access Type - Global access
Permission to - Read
Select Add roles and then add Anonymous Users and Authenticated Users.
Select Save.
The sample product form might contain a subgrid with product reviews. To avoid receiving an "access denied" message for the product reviews subgrid, repeat steps 4-6 and create a Global Read table permission row for the Review table.
Create a webpage for the list
To create a webpage that contains the list component in Power Pages design studio, follow these steps:
Select the Pages tab.
Select + Page.
Enter Products for the page name.
Make sure that the Start from blank page template is selected and then select Add.
Add and set up a list component
To add and set up a list component, follow these steps:
On the page canvas, select the List component.
In the component properties dialog, enter the following values:
Choose a table - Product Table or choose another table from your own app
Select the data views - Product Table
Name your list - Product List
Select Done.
Select Preview > Desktop from the command bar and then make sure that a list of product data rows from Dataverse displays.
Create a webpage for the form
Your next task is to create a webpage to contain the Form component to view row details. This webpage is a child page of the Products page.
Select the Pages tab.
Locate the Products page that you created previously.
Select the ellipsis (...) and then select Add a new subpage.
Enter Product for the page name.
Make sure that the Start from blank page template is selected and then select Add.
Add and set up a form component
To add and set up a form component, follow these steps:
On the page canvas, select the Form component.
If prompted to select an existing form, select New Form.
In the component properties dialog, enter the following values:
Choose a table - Product Table
Select a form - Information
Name your copy of the selected form - Product Details
Select the Data tab and then set the Data from this form dropdown list to Is read-only.
Select OK. The form preview should appear on the page canvas.
Modify the list to navigate to the form component
Your final task is to modify the list page to navigate to the form component when a user selects a row.
Select the Pages tab and then locate the Products page that contains the list component.
Select the list component on the canvas and then select Edit list.
On the List settings dialog, select the Actions tab.
Turn on the View details toggle and then fill in the following information:
Target Type - Form
Form - Product Details
Select Done.
Select Preview > Desktop from the command bar and then make sure that a list of product rows from Dataverse displays. The product names are now hyperlinks.
Select a product name to view the details form.
Note
If you receive the "You don't have the appropriate permissions" message for the product reviews subgrid, repeat steps in the Create table permission row task to create the Global Read table permission for the Review table.
