Exercise - Update webpages generated with Copilot

30 minutes

In this exercise, you'll update additional pages of your website created in the previous exercise. You'll add content to these pages using Copilot.

Update the About Us page

Sign in to your Microsoft Power Pages environment.
On the Home page, under Active sites, identify the Contoso Real Estate site that you previously created and then select Edit.
In the Power Pages design studio, select Pages in the left pane to open the Pages workspace.
Select About Us to open this page in the design studio.
Delete all sections between the Header and Footer sections by selecting each section, selecting the ellipsis (...), and then selecting Delete.
Under the Site Header, select Add a section > One third (left).

This layout creates a two-column section where the left column occupies one-third of the width.
On the left column, select Text and change the text type from Paragraph to Heading 2.
Change the text to Our Vision.
Select the plus icon below the Our Vision heading and then select Text again.
Clear the default text so the text box is empty, then select Copilot in the toolbar.

In the Describe the text you need pane, enter Two paragraphs describing the vision of the Contoso Real Estate company.

Press Enter to generate the content.
Use the available options to Rewrite, adjust the Tone, or change the Length of the text until you're satisfied with the content.

Select Add to page to insert the content. You may need to manually add a paragraph break.
In the right column, select Image > Stock Images and search for office building. Select an image that you like and then select Insert.
Add a new section to introduce the company team.
- Use the One third (right) layout.
- Set the heading to Our Team.
- Use Copilot to generate a descriptive paragraph about the team.
- Add a relevant image of a team.
Add a button below the Our Team that links to the Contact Us page.

Update the Property Listings page

On the left pane under Pages and Main navigation, select Property Listings to open the Property Listings page in the design studio.
Delete all sections between the Header and Footer by selecting each section, selecting the ellipsis (...), and then selecting Delete.
Add a section and then select Edit background on the toolbar. Select Image > Add an image.
Select Stock images and search for house, choose, and image, and then select Insert.
Hover over and select the section and then select the Design icon on the toolbar.
Under the Standard tab, set the Overlay to 65%. Also set the Overlay Color to Black or another dark color. Exit the Design pane by clicking the X.
On top of the image, select Text and change the text type from Paragraph to Heading 2. Change the Text color to White or a visible color that contrasts with the image.
Select the Design icon on the toolbar. Under the Typography tab, set the Font weight to Bold. Exit the Design pane.
Set the Alignment to Center Align and change the text to Featured Listings.
Open the Copilot pane and enter Create a new section to show real estate listings, then press Enter.

Select Keep it to add the generated section to the page.
Use a combination of Copilot and the design studio toolbar to update the section to display at least three listings. The section should have a 3 Column layout.

Note

You'll be hardcoding the data for the Real Estate Listings. In a production scenario, this data would typically be connected to a data source such as a SharePoint list, a Dataverse table, or an external source.

Data display would then be handled using a Custom Component. This step is beyond the scope of this module.

To learn more, see the Used code components in Power Pages article.
Each column should contain an image. Use the URL option to add the images.
- For the first image, select Image > URL and enter this URL: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property1.jpg
- For the second image, use this URL: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property2.jpg
- For the third image, use this URL: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property3.jpg
Each column should contain a Heading 3 text that contains the property's price.
- For the first column, use the price $350,000.
- For the second column, use the price $250,000.
- For the third column, use the price $600,000.
Each column should contain Small text text that contains the property's address.
- For the first column, use the address 432 Elm Street, Riverside, CA 92501
- For the second column, use the address 789 Maple Avenue, Lexington, KY 40502
- For the third column, use the address 210 Pine Road, Portland, OR 97204
Each column should contain a Button that navigates to the Contact Us page.
- Button label should be Enquire Now.
You're free to customize the section as you see fit.

Setting the solution for your data

You'll now start working with Dataverse tables and data. Keeping with the theme of organizing your Real Estate Solution components, you need to assign a solution for all data.

On the left pane, select Data.
On the top of the Data pane, select the gear Set a solution icon.
Select the Real Estate Solution solution from the dropdown. This ensures that all tables, columns, views, and forms you create are added to the Real Estate Solution.

Exit the Set a solution pane.

Update the Contact Us page

On the left pane, select Pages.
Then select Contact Us to open the Contact Us page in the design studio.
Delete all sections between the Header and Footer sections by selecting each section, choosing the ellipsis (...), and selecting Delete.
Use the steps from the Property Listings page to add a title banner to the Contact Us page.
Under that, add a section with the One third (left) layout.
On the left column, select Text and change the text type from Paragraph to Heading 2.

Change the text to We want to hear from you!.

Select the plus icon below the We want to hear from you heading and then select Text again.

Change the text to:

Explore the world of real estate with us. Whether you're buying, selling, or investing, our expert team is here to guide you every step of the way. 

Contact us today to start your real estate journey!

On the right column of the section, select the More ellipsis and then select Form. A pop-up appears where we can create an AI-generated form.
In the Describe a form to create it field, enter Create a contact us form to capture user inquiries.

Press Enter and Copilot will generate the form. A preview appears on the right.
You can modify the form by entering prompts such as Move the Email field up or Remove the Subject field.

Once you're satisfied with the form, select OK to add it to the page.

Copilot will also create a Dataverse table to store the submitted form data.
Next, configure permissions so all users can view and submit the form. Select + New permission.
Configure the table permission:
- Name: Contact Us Form
- Table: Leave the preselected table as is
- Access type: Global Access
- Permission to: Create
- Under Roles, select + Add roles, then choose Anonymous and Authenticated users
Select Save to save the permission.

On the confirmation pane that states The data displayed in your site can be seen by anyone pane, select Save again.

Note

In a previous module, you configured a flow that uses AI to analyze email content from users.

You can configure a similar flow to analyze Contact Us form submissions and perform actions based on the data.

This step is outside the scope of this module, but you can learn more in the Power Pages configuration documentation

Update the Services page

Use your creativity and knowledge gained thus far to update the Services page. Use a combination of Copilot and the in-product toolbar to add relevant content to the page.

Feedback

Was this page helpful?