Working with Web Pages in Power Pages

Introduction to Web Pages in Power Pages

In Power Pages, Web Pages are the fundamental building blocks of your website. Every piece of content, whether it’s a landing page, form, list view, or static text, is presented through web pages.

Each web page represents a single navigable URL endpoint of your site and is backed by configuration in the Dataverse. This makes Power Pages both flexible and secure, with dynamic capabilities.

Key Concepts of Web Pages

1. Dataverse-Driven Architecture

Every web page you create is stored as a record in the Dataverse.
Web pages are part of the “Web Page” table, with related tables such as Web Files, Web Templates, Web Links, and Web Roles.

2. Page Hierarchy

Web pages are organized in a parent-child hierarchy.
The homepage is the root; all other pages are children or siblings.
This hierarchy affects navigation and breadcrumb generation.

3. Templates and Layouts

Each page is rendered using a Page Template, which determines the page’s layout and structure.
Web Templates allow advanced users to define reusable HTML/JavaScript snippets.

Working with Web Pages: Step-by-Step

Step 1: Accessing Web Pages in Design Studio

Go to https://make.powerpages.microsoft.com
Select your site and click “Edit” to open the Design Studio.
In the left menu, click Pages to view and manage existing web pages.

Step 2: Creating a New Web Page

Using Design Studio:

Click “+ Add Page”
Choose a page layout (e.g., sectioned, one-column, two-column)
Give it a name (e.g., “Contact Us”)
Define the navigation location (parent page or top-level)

The new page will be added to your navigation and site hierarchy.

Using Portal Management App:

For more control, go to the Portal Management app (available in Power Apps):

Open Web Pages table.
Click New to manually create a page.
Define:
- Name
- Website
- Parent Page
- Page Template
- Partial URL
- Publishing state

Step 3: Editing Content on a Web Page

In Design Studio:

Open the page
Use the WYSIWYG editor to add:
- Text
- Images
- Videos
- Dataverse Forms
- Dataverse Lists
Customize styling (colors, font, padding) using the Styling tab.

Advanced users can inject custom HTML/CSS using Web Templates.

Step 4: Managing Web Page Metadata

From the Portal Management App:

Each web page has metadata options:

Publishing State: (Draft, Published, Archived)
Web Roles: Controls visibility (Anonymous, Authenticated, Admin, Custom)
Page Template: Choose system or custom templates
Content Snippets: Reusable text blocks
Web Files: Associated media like images or scripts

Step 5: Setting Up Navigation

Navigation menus are not hardcoded—they’re managed via Web Link Sets.

Each page can appear as a navigation item based on its web link.
Create links under:
- Primary Navigation
- Footer Navigation
Navigate to Web Link Sets in Portal Management to configure this.

Step 6: Page Permissions and Visibility

You can restrict page access based on Web Roles.

Open your web page in the Portal Management App.
Under Access Control Rules, assign roles like:
- Anonymous Users
- Authenticated Users
- Custom Roles (e.g., Managers, Partners)

This is crucial for creating authenticated portals, such as employee or partner portals.

Step 7: Using Web Templates (Advanced)

Web Templates let you define dynamic rendering logic using Liquid syntax.

Use cases:

Custom layouts
Conditional rendering
Embedding scripts or analytics

You can bind a Web Template to a Web Page using a Page Template.

Step 8: Preview and Publish