7.2 Power Pages Templates, Styling & Responsive Layouts

Power Pages Templates, Styling & Responsive Layouts

Designing enterprise web portals requires balancing aesthetic corporate branding, intuitive content layouts, and device responsiveness across smartphones, tablets, and widescreen desktop monitors. Microsoft Power Pages provides a multi-tiered templating and styling architecture that ranges from out-of-the-box industry templates to low-code visual styling controls and pro-code Liquid and CSS extensibility.

For the PL-200: Microsoft Power Platform Functional Consultant exam, candidates must understand how site templates accelerate project delivery, how Page Templates interact with Web Templates, how the Styling workspace controls CSS inheritance, and how the Bootstrap v5 grid framework enables fluid responsive layouts.

---

1. Prebuilt Site Templates & Industry Accelerators

When provisioning a new Power Pages website, makers can start from a blank slate or select from a library of prebuilt site templates designed for specific business scenarios. These templates do not just provide visual layouts; they automatically install underlying Dataverse solutions containing preconfigured tables, forms, views, web roles, and table permissions.

+-----------------------------------------------------------------------------------------+
|                           POWER PAGES PREBUILT SITE TEMPLATES                           |
|                                                                                         |
|   +--------------------------+  +--------------------------+  +---------------------+   |
|   | CUSTOMER SELF-SERVICE    |  |     PARTNER PORTAL       |  |  COMMUNITY PORTAL   |   |
|   |                          |  |                          |  |                     |   |
|   | - Case Management        |  | - Channel Sales Pipeline |  | - Discussion Forums |   |
|   | - Knowledge Base Search  |  | - Opportunity Bidding    |  | - Idea Crowdsource  |   |
|   | - Customer Profile Mgmt  |  | - Lead Distribution     |  | - Blog Posts        |   |
|   | - Support Ticket History |  | - Multi-tier Partner RBAC|  | - Public Voting     |   |
|   +--------------------------+  +--------------------------+  +---------------------+   |
|                                                                                         |
|   +--------------------------+  +--------------------------+  +---------------------+   |
|   |   PROGRAM REGISTRATION   |  |     FAQ & HELP DESK      |  |   BLANK / STANDARD  |   |
|   |                          |  |                          |  |                     |   |
|   | - Event Sign-ups         |  | - Categorized FAQs       |  | - Clean Canvas      |   |
|   | - Permit Applications    |  | - Searchable Q&A         |  | - Custom Dataverse  |   |
|   | - Multistep Submissions  |  | - Feedback Collection    |  | - Custom Theming    |   |
|   +--------------------------+  +--------------------------+  +---------------------+   |
+-----------------------------------------------------------------------------------------+

Common Site Templates Overview

---

2. Page Templates Architecture: Web Templates vs. Rewrite

In Power Pages, a Web Page does not directly store the full HTML structure of the page layout. Instead, every Web Page references a Page Template (adx_pagetemplate), which acts as an abstraction layer defining how the content should be rendered.

+-----------------------------------------------------------------------------+
|                   PAGE TEMPLATE EXECUTION ARCHITECTURE                      |
|                                                                             |
|   [WEB PAGE RECORD: adx_webpage]                                            |
|   - Name: "Product Catalog"                                                 |
|   - Partial URL: "products"                                                 |
|   - Page Template Pointer: [Page Template: "Full Width Layout"]             |
|                     |                                                       |
|                     v                                                       |
|   [PAGE TEMPLATE RECORD: adx_pagetemplate]                                  |
|   - Type: "Web Template" (or "Rewrite")                                     |
|   - Use Website Header and Footer: TRUE                                     |
|   - Web Template Pointer: [Web Template: "Full Width Content"]              |
|                     |                                                       |
|                     v                                                       |
|   [WEB TEMPLATE RECORD: adx_webtemplate]                                    |
|   - MIME Type: "text/html"                                                  |
|   - Source Code (HTML + Liquid + FetchXML):                                 |
|     <div class="container">
|       <h1>{{ page.title }}</h1>
|       {% include 'ProductListLiquidSnippet' %}
|       {{ page.adx_copy }}
|     </div>
+-----------------------------------------------------------------------------+

Web Templates vs. Rewrite Templates

There are two distinct types of Page Templates in Power Pages:

1. Web Template (Modern / Standard):

   • Points directly to a Web Template record (adx_webtemplate) stored in Dataverse.
   • Written in HTML5, CSS, and the Liquid template language.
   • Fully customizable by functional consultants and pro-developers via the browser or VS Code.
   • Supports dynamic server-side logic, conditional rendering ({% if user %}), FetchXML database queries ({% fetchxml myQuery %}), and snippet includes ({% include 'SnippetName' %}).
   • Exposes a toggle: Use Website Header and Footer (True/False).

2. Rewrite Template (Legacy / ASP.NET Handler):

   • Points to a compiled ASP.NET .aspx page hosted inside the Power Pages application runtime engine (e.g., ~/Pages/FullPage.aspx, ~/Pages/Search.aspx, ~/Pages/Account.aspx).
   • The underlying C# code is compiled and immutable; makers cannot modify the server-side code.
   • Used primarily for core system features such as site search, identity authentication login screens, and default out-of-the-box system pages.

[!TIP] Best Practice for Custom Development: Always create custom layouts using Web Template page templates. Rewrite templates should only be used when leveraging built-in system pages. Web Templates provide complete source code visibility, version control compatibility, and Liquid extensibility.

---

3. The Styling Workspace & CSS Precedence Hierarchy

The Styling workspace in Power Pages Design Studio empowers makers to configure global visual themes without writing complex CSS stylesheets manually.

+-----------------------------------------------------------------------------+
|                           THE STYLING WORKSPACE                             |
|                                                                             |
|   [THEME PALETTES]                 [TYPOGRAPHY & FONTS]                     |
|   - 16 Curated Theme Presets       - Title / Headings (H1 - H6)             |
|   - Primary Brand Color            - Subheadings                            |
|   - Secondary Accent Color         - Body Copy Font Family & Size           |
|   - Base Background Color          - Link Color & Underline Style           |
|   - Surface / Card Color                                                    |
|                                    [BUTTON STYLING]                         |
|   [CUSTOM CSS MANAGEMENT]          - Primary Button (Fill, Border, Radius)  |
|   - Upload custom .css files       - Secondary Button (Outline, Hover)      |
|   - Toggle CSS file activation     - Padding & Touch Target Sizing          |
+-----------------------------------------------------------------------------+

The CSS Precedence & Cascade Hierarchy

When styling rules conflict, Power Pages evaluates CSS rules according to a strict cascading order of precedence (from lowest to highest priority):

1. Bootstrap v5 Base Framework: Core framework styles providing responsive grid, reset, and default typography.
2. Selected Styling Workspace Preset Theme: The active visual theme selected in the Styling workspace (defining primary colors, font families, and standard component spacing).
3. Uploaded Custom CSS Files (Global): Custom .css files uploaded via the Styling workspace (e.g., brand-custom.css). Multiple files load in the order configured in the CSS management tray.
4. Page-Specific Custom CSS: CSS rules entered in the Custom CSS tab of an individual Page's Settings dialog in the Pages workspace.
5. Inline HTML Styles: Inline style attributes (style="color: red;") authored directly within Web Templates or rich text components.

Lowest Priority  [ Bootstrap v5 Base Framework               ] 
       │         [ Styling Workspace Theme Presets           ]
       │         [ Global Uploaded Custom CSS Files          ]
       │         [ Page-Specific Custom CSS Rules            ]
Highest Priority [ Inline HTML Component Styles (style="...")] 

---

4. Responsive Design with the Bootstrap v5 Framework

Power Pages websites are fully responsive, automatically adapting to mobile phones, tablets, and desktop displays. Modern Power Pages sites leverage the Bootstrap v5 open-source CSS framework.

Bootstrap 12-Column Responsive Grid

The layout engine divides horizontal space into 12 virtual columns. Elements declare how many columns they occupy across different viewport breakpoints:

+-----------------------------------------------------------------------------+
|                    BOOTSTRAP 12-COLUMN RESPONSIVE SYSTEM                    |
|                                                                             |
|   DESKTOP VIEWPORT (>= 992px): 3 Equal Columns (col-lg-4 x 3 = 12)          |
|   +-------------------+ +-------------------+ +-------------------+         |
|   | col-lg-4 (4 cols) | | col-lg-4 (4 cols) | | col-lg-4 (4 cols) |         |
|   +-------------------+ +-------------------+ +-------------------+         |
|                                                                             |
|   TABLET VIEWPORT (768px - 991px): 2 Rows (col-md-6 x 2, then col-md-12)    |
|   +-----------------------------+ +-----------------------------+           |
|   | col-md-6 (6 cols)           | | col-md-6 (6 cols)           |           |
|   +-----------------------------+ +-----------------------------+           |
|   +-------------------------------------------------------------+           |
|   | col-md-12 (12 cols)                                         |           |
|   +-------------------------------------------------------------+           |
|                                                                             |
|   MOBILE VIEWPORT (< 768px): Stacked Full Width (col-12 x 3)                |
|   +-------------------------------------------------------------+           |
|   | col-12 (100% Width)                                         |           |
|   +-------------------------------------------------------------+           |
|   +-------------------------------------------------------------+           |
|   | col-12 (100% Width)                                         |           |
|   +-------------------------------------------------------------+           |
|   +-------------------------------------------------------------+           |
|   | col-12 (100% Width)                                         |           |
|   +-------------------------------------------------------------+           |
+-----------------------------------------------------------------------------+

Standard Responsive Breakpoints

Design Studio Viewport Switcher & Mobile Preview

In the upper-right header of the Design Studio, makers can test responsiveness in real-time:

• Device Switcher: Instantly toggle the canvas between Desktop, Tablet, and Mobile viewport modes.
• Preview with QR Code: Clicking Preview > Mobile generates a dynamic QR code that makers can scan with a smartphone camera to test authentication, camera permissions, and touch responsiveness on a physical mobile device.

---

5. Pro-Developer Extensibility: VS Code for Web & PAC CLI

Power Pages bridges the gap between low-code makers and professional developers through integrated developer tooling.

+-----------------------------------------------------------------------------+
|                        PRO-DEVELOPER TOOLING ECOSYSTEM                      |
|                                                                             |
|   [VISUAL STUDIO CODE FOR THE WEB]         [POWER PLATFORM CLI (PAC CLI)]   |
|   - Browser-based IDE                      - Local desktop terminal CLI     |
|   - Launch via 'Edit code' button          - 'pac powerpages download'      |
|   - Live editing of HTML, CSS, Liquid      - Source Control (Git / GitHub)  |
|   - Instant save & auto-sync to Dataverse  - 'pac powerpages upload'        |
+-----------------------------------------------------------------------------+

Visual Studio Code for Web (code.powerpages.microsoft.com)

Clicking the Edit code button in the Pages workspace launches Visual Studio Code for Web directly in the browser window:

• Opens the exact HTML, custom CSS, and Liquid code files for the active page.
• Features full syntax highlighting, IntelliSense for Liquid tags and Dataverse entities, and auto-formatting.
• Saving files (Ctrl + S / Cmd + S) automatically commits the updated code back to Dataverse metadata and syncs the Design Studio canvas.

Power Platform CLI (pac powerpages)

For enterprise Application Lifecycle Management (ALM), developers use the Power Platform CLI to manage website code locally:

# Download portal website metadata to local disk for Git source control
pac powerpages download --path "C:\repos\powerpages" --webSiteId 00000000-0000-0000-0000-000000000000

# Upload updated custom HTML/CSS/JS templates from local repo to target environment
pac powerpages upload --path "C:\repos\powerpages\contoso-site"