7.1 Power Pages Design Studio & Site Structure

Power Pages Design Studio & Site Structure

Microsoft Power Pages is an enterprise-grade, low-code Software-as-a-Service (SaaS) platform for creating, hosting, and administering external-facing websites. Built on the foundation of Microsoft Dataverse, Power Pages enables organizations to securely expose business data and business processes to external audiences—such as customers, partners, suppliers, citizens, and community members—without requiring internal Entra ID user licenses for every visitor.

For the PL-200: Microsoft Power Platform Functional Consultant certification exam, functional consultants must master the core authoring tool—Power Pages Design Studio—understand its four distinct workspaces, distinguish its capabilities from the advanced Portal Management app, and design robust information architectures utilizing page hierarchies, URL routing, and security configurations.

---

1. Power Pages Design Studio Architecture

Power Pages Design Studio provides a unified, web-based visual authoring experience (make.powerpages.microsoft.com). It allows low-code makers and functional consultants to construct modern, responsive web experiences while enabling professional developers to extend functionality with pro-code tooling (such as Liquid templates, JavaScript, Web APIs, and Visual Studio Code for the Web).

+-----------------------------------------------------------------------------------------+
|                           POWER PAGES DESIGN STUDIO ARCHITECTURE                        |
|                                                                                         |
|   +-------------------+  +-------------------+  +-------------------+  +------------+   |
|   |  PAGES WORKSPACE  |  | STYLING WORKSPACE |  |  DATA WORKSPACE   |  |   SET UP   |   |
|   |                   |  |                   |  |                   |  | WORKSPACE  |   |
|   | - Visual Layout   |  | - Theme Palettes  |  | - Dataverse Tables|  | - Security |   |
|   | - Canvas Controls |  | - Font Themes     |  | - Views & Forms   |  | - Identity |   |
|   | - Component Tree  |  | - Custom CSS      |  | - Sample Data     |  | - Perms    |   |
|   | - Page Hierarchy  |  | - Button Styles   |  | - Schema Modeling |  | - Go-Live  |   |
|   +---------+---------+  +---------+---------+  +---------+---------+  +-----+------+   |
|             |                      |                      |                  |          |
|             +----------------------+----------------------+------------------+          |
|                                            |                                            |
|                                            v                                            |
|   +---------------------------------------------------------------------------------+   |
|   |                     UNDERLYING DATAVERSE METADATA ENGINE                        |   |
|   |  (Web Pages, Page Templates, Content Snippets, Web Files, Site Settings, Roles) |   |
|   +----------------------------------------+----------------------------------------+   |
|                                            |                                            |
|                                            v                                            |
|   +---------------------------------------------------------------------------------+   |
|   |                   ADVANCED EXTENSION: PORTAL MANAGEMENT APP                     |   |
|   |   (Model-Driven App for Deep Metadata, Liquid Logic, Web Templates, & Caching)   |   |
|   +---------------------------------------------------------------------------------+   |
+-----------------------------------------------------------------------------------------+

The Four Core Design Studio Workspaces

The Design Studio is divided into four dedicated workspaces accessible from the left-hand navigation rail:

---

2. Deep Dive: Pages Workspace & Component Modeling

The Pages workspace is where functional consultants build user interfaces. Every page is composed of Sections and Components.

Section Layouts

Sections provide structural Bootstrap-based grid rows across the page canvas. Makers can choose from multiple column arrangements:

• 1-column layout: Full-width container ideal for hero banners, long-form text, or large data grids.
• 2-column layout: Equal split (50%/50%) or weighted split (e.g., 66%/33% or 33%/66%) for sidebars, forms with side instructions, or paired cards.
• 3-column layout: Equal three-way division (33%/33%/33%) for feature cards, KPI summaries, or multi-column navigation.
• Section Settings: Makers can adjust vertical section padding, horizontal margins, background colors, background images, and CSS classes per section.

Page Canvas Components (Controls)

Inside any section column, makers can insert the following core components via the contextual "+" flyout:

• Text: Rich text editor supporting heading hierarchy (H1–H6), paragraphs, bulleted/numbered lists, inline links, and text formatting.
• Button: Clickable call-to-action buttons supporting internal page links, external URLs, and download triggers.
• Image: Static or dynamic graphics uploaded as Web Files or referenced via external URLs with alt-text accessibility attributes.
• Video: Embedded video streams from Microsoft Stream, YouTube, or Vimeo via direct URL links.
• Form (Basic Form): Single-step Dataverse data entry or display form mapped to a specific Dataverse table form.
• Multistep Form (Advanced Form): Multi-page, sequential wizard-style form with conditional branching and step-by-step progress indicators.
• List: Data grid component that renders records from a Dataverse table view with search, sorting, filtering, and action buttons.
• Power BI: Embedded interactive Power BI reports or dashboard tiles with Azure Active Directory or Power BI Embedded token authentication.
• Spacer & Divider: Visual vertical whitespace spacing controls and horizontal rules for aesthetic grouping.
• iFrame: Inline HTML frame to embed secure external web widgets or third-party tools.

+-----------------------------------------------------------------------------+
|                     PAGES WORKSPACE COMPONENT PALETTE                       |
|                                                                             |
|   [SECTION: 2-COLUMN (66% / 33%)]                                           |
|   +------------------------------------+ +------------------------------+   |
|   |  [TEXT COMPONENT]                  | |  [IMAGE COMPONENT]           |   |
|   |  # Service Request Portal          | |  +------------------------+  |   |
|   |  Submit and track your enterprise  | |  |     [Company Logo]     |  |   |
|   |  maintenance requests below.       | |  +------------------------+  |   |
|   |                                    | |                              |   |
|   |  [FORM COMPONENT]                  | |  [BUTTON COMPONENT]          |   |
|   |  +------------------------------+  | |  +------------------------+  |   |
|   |  | Case Subject: [____________] |  | |  |  Download User Guide   |  |   |
|   |  | Description:  [____________] |  | |  +------------------------+  |   |
|   |  | Priority:     [ Normal     v]|  | |                              |   |
|   |  | [Submit Request]             |  | |  [POWER BI TILE]          |   |
|   |  +------------------------------+  | |  | [Open Cases Chart]     |  |   |
|   +------------------------------------+ +------------------------------+   |
+-----------------------------------------------------------------------------+

---

3. Site Structure & Page Hierarchy

In Power Pages, pages are organized into a strict hierarchical tree structure that directly dictates navigation menus, breadcrumb trails, and URL path routing.

Main Navigation vs. Other Pages

In the Pages workspace left pane, pages are categorized into two primary buckets:

1. Main navigation: Pages positioned under this heading automatically appear in the site's top-level header navigation menu. You can drag and drop pages to rearrange their horizontal menu order or nest them under parent pages to automatically create flyout dropdown menus.
2. Other pages: Pages located in this section are active and published, but they do not appear in the top-level main navigation bar. This is used for landing pages, confirmation pages, transactional form steps, error handlers, and pages linked only via inline hyperlinks or footer menus.

+-----------------------------------------------------------------------------+
|                        PAGE HIERARCHY & SITEMAP TREE                        |
|                                                                             |
|   MAIN NAVIGATION (Visible in Top Header Bar)                               |
|   ├── Home (Root /)                                                         |
|   ├── Services (/services)                                                  |
|   │   ├── Equipment Maintenance (/services/equipment-maintenance)          |
|   │   └── Software Licensing (/services/software-licensing)                 |
|   ├── Support Portal (/support)                                             |
|   └── Contact Us (/contact)                                                 |
|                                                                             |
|   OTHER PAGES (Hidden from Header Bar, Accessible via Direct URL/Links)     |
|   ├── Request Submitted Confirmation (/support/confirmation)                |
|   ├── Privacy Policy (/privacy-policy)                                      |
|   └── Terms of Service (/terms)                                             |
+-----------------------------------------------------------------------------+

Page Settings Configuration

Selecting the ellipsis (...) next to any page in the tree opens the Page Settings dialog, which provides three critical configuration tabs:

• General: Edit the display name and the Partial URL (also known as the URL slug, e.g., equipment-maintenance). The full URL is formed by concatenating the parent page slugs: https://contoso.powerappsportals.com/services/equipment-maintenance.
• Display: Configure the browser window title tag (<title>) and choose whether to hide the page from search engine crawlers.
• Permissions: Toggle between Inherit parent page permissions (default) or establish Custom page permissions (Page Access Control Rules) to restrict page viewing to specific Web Roles (e.g., Authenticated Users, Partners, Employees).

---

4. Design Studio vs. Portal Management Model-Driven App

While Design Studio covers approximately 85% of standard visual design and basic data binding tasks, the Portal Management app is the legacy, comprehensive model-driven application used for deep pro-developer metadata configuration.

+-----------------------------------------------------------------------------+
|               DESIGN STUDIO VS. PORTAL MANAGEMENT APP MATRIX                |
|                                                                             |
|   CAPABILITY / TASK                  DESIGN STUDIO     PORTAL MANAGEMENT    |
|   -----------------------------------------------------------------------   |
|   Visual Drag-and-Drop Layout        YES (Primary)     NO (Raw HTML/Liquid) |
|   Theme & Font Palette Styling       YES (Visual)      NO (CSS upload only) |
|   Table Permissions (Basic/Global)   YES (Wizard)      YES (Full Detail)    |
|   Basic / Multistep Form Wizard      YES (Simplified)  YES (Deep Advanced)  |
|   Custom Liquid Code in Templates    NO (Via VS Code)  YES (Direct Editor)  |
|   Content Snippet Management         NO                YES (Full Entity)    |
|   Web Link Sets (Custom Nav Menus)   NO                YES (Full Entity)    |
|   Web File Management & MIME Types   NO (Basic Asset)  YES (Full Entity)    |
|   Site Settings (Key/Value Flags)    NO                YES (Full Entity)    |
|   Search & Filter Metadata Config    NO                YES (Full Entity)    |
+-----------------------------------------------------------------------------+

When to Transition to the Portal Management App

Functional consultants must know when the Design Studio is insufficient and requires opening the Portal Management model-driven app:

1. Advanced Site Settings: Configuring global runtime feature flags such as Authentication/Registration/Enabled, Search/Enabled, or HTTP/CustomHeaders.
2. Granular Web Link Sets: Creating custom multi-tiered secondary menus, sidebar link groups, or localized footer links.
3. Content Snippets: Creating localized multi-language text strings and HTML boilerplate chunks injected via Liquid.
4. Web Template Logic: Authoring complex server-side Liquid logic, FetchXML queries, and custom JSON endpoints for client-side JavaScript.
5. Web Page Access Control Rules: Implementing granular "Restrict Read" or "Grant Change" rights tied to specific Web Roles.

[!IMPORTANT] Cache Invalidation Rule (PL-200 Exam): When changes are made directly inside the Portal Management app (such as updating a Site Setting or Content Snippet), the Power Pages web runtime caches may not immediately reflect the update. To force an immediate cache refresh, makers must click the Sync button in the top-right corner of the Power Pages Design Studio, or navigate to https://<site-url>/_services/about as an administrator and click Clear Cache.

---

5. Set Up Workspace & Site Administration

The Set up workspace houses operational governance, security, and administrative tools required before launching a site.

Key Set Up Configuration Modules

1. Site Visibility: Sites are provisioned in Private mode by default, accessible only to site creators and users explicitly granted access within the tenant. When development and testing are complete, administrators toggle the site to Public to make it accessible to external internet audiences.
2. Identity Providers: Centralized configuration of external authentication protocols. Out of the box, Power Pages supports Azure Active Directory B2C, Microsoft Entra ID, Google, Facebook, LinkedIn, Twitter (X), and generic SAML 2.0, OpenID Connect (OIDC), and WS-Federation identity providers.
3. Table Permissions: Configures role-based access control (RBAC) linking Dataverse tables to Web Roles with explicit privilege scopes (Global, Contact, Account, Self).
4. Cloud Flows: Authorizes specific Power Automate instant cloud flows to be triggered securely from Power Pages client-side JavaScript via the Power Pages Web API.
5. Progressive Web App (PWA): Enables mobile PWA capabilities, including offline page caching, home screen install banners, and service worker push notifications.
6. Go-Live Checklist: A built-in diagnostic assessment tool that validates site security, ensures all table permissions are configured, checks that no test data or anonymous loopholes exist, and verifies custom domain SSL certificates.