PL-900 Objective 5.2: Create a Power Pages Site

Creating Power Pages Sites with Copilot

Conversational Site Generation

Power Pages Copilot revolutionizes site creation by enabling makers to describe desired websites in natural language rather than manually configuring every aspect. This AI-powered approach interprets business requirements expressed conversationally, translating them into functional site structures, content, and configurations. Makers type descriptions like "Create a customer portal where customers can track orders, view invoices, and submit support tickets" or "Build an event registration site with session selection, attendee profiles, and speaker information." Copilot analyzes these descriptions, identifies appropriate site patterns, and generates initial implementations including page structures, navigation menus, forms connected to relevant Dataverse tables, and lists displaying appropriate data.

The conversation continues interactively as Copilot asks clarifying questions to refine the site. If the initial description lacks specifics, Copilot might ask "Which Dataverse tables should I use for customer orders?" or "Should customers be able to update their profile information?" Makers provide additional details through continued dialogue, and Copilot adjusts the site accordingly. This iterative refinement builds increasingly accurate implementations without makers needing to know specific component names, Dataverse schema details, or configuration syntax. After Copilot generates the initial site, makers review the result, test functionality, and either accept the implementation or provide feedback requesting modifications through additional conversation.

Benefits of AI-Assisted Creation

Copilot-assisted site creation dramatically reduces development time by generating complete starting points rather than requiring makers to build everything from blank pages. What might take hours of manual page creation, component placement, and data connection configuration can be accomplished in minutes through conversational generation. The approach democratizes Power Pages by eliminating technical barriers, enabling business users who understand requirements but lack web development skills to create functional sites. These citizen developers describe what they need in business terms, and Copilot translates requirements into technical implementations.

Copilot also serves as a learning tool, teaching makers about Power Pages capabilities by showing generated examples. Users see which components achieve specific purposes, how forms connect to Dataverse tables, how lists filter and display data, and how pages organize into navigation structures. After creating several sites with Copilot assistance, many makers gain confidence to build sites manually or modify generated sites beyond Copilot's suggestions, having learned patterns through observation. The AI assistant thus accelerates immediate productivity while building long-term technical skills through practical examples demonstrating best practices and common patterns.

Modifying Copilot-Generated Sites

After Copilot generates initial sites, makers typically refine implementations to match specific organizational requirements. Common modifications include adjusting page layouts to better present information, adding authentication requirements for pages that should be private, configuring form fields to collect additional data points, modifying list filters to show different data subsets, and customizing styling to match brand identity. These refinements happen through the same design studio tools used for manual site creation, with Copilot-generated content serving as starting points rather than final implementations.

Makers can continue using Copilot during refinement, describing desired changes conversationally rather than manually configuring modifications. For example, "Add a section showing recent support cases on the homepage" or "Change the contact form to include a phone number field." Copilot interprets modification requests and updates the site accordingly, maintaining the conversational workflow throughout development. This hybrid approach combines AI-generated productivity with manual control over specifics, enabling rapid development while ensuring sites meet exact requirements. The flexibility to switch between conversational and manual modes enables makers to use whichever approach is most efficient for particular tasks.

Design Studio Workspaces

Pages Workspace

The Pages workspace serves as the primary environment for creating and editing site content, providing visual page builders with drag-and-drop interfaces for component placement. The workspace displays the site's page hierarchy in a tree view showing parent-child relationships and navigation structure. Makers select pages to edit, seeing immediate visual representations of page content and layout. The page editor includes a canvas showing page content as visitors would see it, a component toolbar providing elements available for addition, property panels configuring selected component settings, and preview modes enabling testing across different device sizes.

Working in the Pages workspace follows an intuitive pattern where makers add sections to pages establishing layout structure, place components within sections adding specific content or functionality, configure component properties controlling behavior and appearance, arrange elements through drag-and-drop repositioning, and preview results verifying layouts work correctly. The workspace automatically saves changes as makers work, preventing accidental loss of edits. Multiple makers can work on different pages simultaneously, though editing the same page concurrently isn't supported to prevent conflicting changes. The visual editing approach enables non-technical users to create sophisticated pages without writing code while remaining accessible to developers needing advanced customization.

Styling Workspace

The Styling workspace centralizes all visual design controls, ensuring consistent appearance across entire sites. This workspace separates visual design from content creation, enabling designers to establish brand-consistent styling without modifying individual pages. The color palette section defines primary colors for prominent elements like headers and buttons, secondary colors for supporting elements, background colors for different page areas, text colors ensuring readability, and accent colors for highlights or calls-to-action. Color selectors provide visual pickers or accept hex codes for precise color matching with brand guidelines.

Typography controls select font families for headings and body text, configure font sizes for different text levels from large headings to small captions, set font weights for regular and bold text, and adjust line heights for readability. Button styling defines button shapes including fully rounded, slightly rounded, or square corners, button sizes for different emphasis levels, padding controlling button dimensions, and hover effects providing visual feedback on interaction. The spacing section adjusts padding and margins throughout the site, controlling density and white space. Theme presets provide starting points that makers customize, or makers build custom themes from scratch. All styling changes apply site-wide immediately, with live preview showing results across sample pages representing different content types.

Data Workspace

The Data workspace manages all connections between Power Pages sites and Dataverse tables, creating the data-driven functionality distinguishing Power Pages from static websites. This workspace lists all Dataverse tables available in the environment, showing which tables the site currently uses. Makers browse available tables, view table schemas including columns and data types, create new tables directly from the workspace if needed, and configure how tables connect to site components. The workspace includes tools for creating forms that interact with tables, lists displaying table records, and views filtering data shown to users.

Form configuration in the Data workspace includes selecting source tables, choosing form modes (create, edit, read-only), selecting fields to display, arranging field order and grouping, configuring validation rules, and setting up conditional visibility. List configuration involves selecting source tables, defining filter criteria limiting displayed records, choosing columns to show, enabling sorting or searching, and configuring pagination for large data sets. View configuration creates saved filter and sort combinations that lists reference. The Data workspace abstracts Dataverse complexity, enabling makers to work with data through business-friendly interfaces rather than requiring direct Dataverse administration knowledge. Changes in the Data workspace affect how components throughout the site interact with data without requiring modifications to individual pages.

Set Up Workspace

The Set up workspace handles site-wide configurations affecting overall site behavior, security, and operational characteristics. Authentication settings configure which identity providers are available (local authentication, Azure AD, social providers), whether users can self-register or require invitations, what information registration forms collect, and email templates for account verification and password resets. Security configurations include managing web roles that define page access, configuring table permissions controlling data operations, and mapping users or groups to appropriate roles based on authentication attributes.

Additional settings in the Set up workspace include domain management for mapping custom URLs to sites, SSL certificate configuration for secure connections, search settings controlling site search functionality and indexing, caching configurations optimizing performance, progressive web app settings enabling mobile app-like experiences, and analytics integration for usage monitoring. The workspace also provides access to site-wide content like shared headers and footers appearing on all pages, and error pages shown when users encounter access denials or missing content. These centralized configurations ensure consistent behavior across sites without requiring per-page settings that would be difficult to maintain as sites grow.

Additional Workspaces

Beyond the primary workspaces, Power Pages design studio includes specialized areas for specific tasks. The Templates workspace provides access to pre-built page templates and component patterns that makers copy into their sites, accelerating development through reusable patterns. Templates include common page layouts like landing pages, profile pages, or search result pages that makers customize with actual content. The Extensions workspace enables developers to add custom code, including JavaScript for client-side interactivity, CSS for advanced styling, and web templates for server-side logic. The Site checker workspace analyzes sites for issues including broken links, accessibility violations, or configuration errors, providing recommendations for improvements. These additional workspaces complement the primary four, providing specialized capabilities for advanced scenarios while keeping the main interface focused on common tasks.

Creating and Modifying Pages

Page Creation Process

Creating new pages in Power Pages begins in the Pages workspace where makers click the add page button, opening a creation dialog requesting essential information. Makers provide a page name displayed in browser tabs and bookmarks, a URL slug determining the page's web address, and a parent page if creating child pages for hierarchical navigation. The dialog offers layout choices including blank pages for complete customization, templated layouts providing starting structures, or copying existing pages as starting points. After creation, the new page appears in the site hierarchy, and makers can immediately begin adding content through the visual editor.

Page organization follows hierarchical structures where pages can have child pages creating multi-level navigation. For example, a "Support" parent page might have children like "Submit Ticket," "View My Cases," and "Knowledge Base." This hierarchy creates organized information architectures helping visitors navigate sites logically. Makers reorder pages within hierarchies through drag-and-drop in the tree view, and page URLs automatically reflect hierarchies like /support/submit-ticket. The hierarchical approach also enables permission inheritance where child pages inherit authentication requirements from parents, simplifying security management for related page groups.

Adding Sections and Components

Building page content involves a two-level structure where sections provide layout containers and components provide actual content. Makers add sections to pages by clicking the add section button, selecting section layouts (full-width, two-column, three-column, or custom arrangements), and configuring section properties like background colors, background images, or padding. Sections span page width horizontally, creating visual bands that organize content vertically down pages. Multiple sections on single pages enable varied layouts mixing different content types or visual treatments.

After adding sections, makers place components within section columns. The component toolbar categorizes available components including basic elements (text, images, buttons, videos), data elements (forms, lists), navigation elements (breadcrumbs, menus), and advanced elements (charts, Power BI reports). Makers drag components from the toolbar into section columns, drop them at desired positions, and immediately configure properties through side panels. Components can be moved between sections or reordered within sections through drag-and-drop. Duplicate components enable quickly creating similar elements that makers modify for variations. Delete components remove unwanted elements. This flexible approach enables rapid page layout iteration where makers experiment with different arrangements until achieving desired designs.

Configuring Page Properties

Beyond content, pages have properties controlling behavior and visibility. Permission settings determine whether pages require authentication, which web roles can access pages, and whether pages are visible in navigation menus. Pages can be marked as home pages serving as default landing pages, or set as error pages shown when visitors encounter access denials or missing content. SEO settings include meta descriptions improving search engine results, page titles for browser tabs, and keywords for discoverability. Advanced settings control whether pages are indexable by search engines, cache durations for performance optimization, and whether pages are enabled (accessible to visitors) or disabled (hidden during development).

Page templates enable creating reusable layouts applied to multiple pages, ensuring consistency for similar content types. For example, a blog post template might define standard structures for all blog articles, with makers customizing specific content while maintaining consistent layouts. Custom templates save development time for sites with many similar pages and ensure visual consistency reinforcing professional appearances. Makers create templates from existing pages, promoting successful designs to reusable patterns others can leverage. This template approach scales site development beyond what individual page creation enables, supporting large sites with hundreds of pages through consistent, efficient patterns.

Configuring Power Pages Components

Text and Media Components

Text components provide rich content editing capabilities for paragraphs, headings, lists, and formatted text. The rich text editor includes formatting tools for bold, italics, underline, text colors, background colors, alignment, bullet lists, and numbered lists. Heading levels create document hierarchy for readability and accessibility, with H1 typically reserved for page titles and H2-H6 for subsections. Text components support hyperlinks to internal pages or external URLs, enabling navigation and reference. Makers paste content from word processors with formatting preservation, or paste as plain text to remove formatting. Accessibility features include alternative text for screen readers and semantic HTML structure supporting assistive technologies.

Image components display photos, illustrations, or graphics with configuration options for image sources (uploaded files or external URLs), alternative text describing images for accessibility, image sizing and alignment, link destinations when images are clickable, and responsive behavior across device sizes. Video components embed videos from files or streaming platforms like YouTube or Vimeo, with configuration for video sources, aspect ratios, autoplay behavior, and playback controls. Button components create calls-to-action with configurable text labels, navigation destinations, visual styling, and accessibility descriptions. These basic components enable rich, engaging content without requiring HTML or CSS knowledge.

Form Components

Form components provide the primary mechanism for collecting data from site visitors into Dataverse tables. Form configuration begins with selecting the target Dataverse table, choosing form mode (create new records or edit existing records), and selecting which table columns appear as form fields. Field arrangement controls the order fields appear and whether forms use single-column or multi-column layouts. Each field has properties controlling labels displayed to users, placeholder text providing examples or hints, default values pre-populating fields, and whether fields are required or optional.

Advanced form features include validation rules ensuring data quality through patterns like email format validation, numeric range checking, or required field enforcement. Conditional visibility shows or hides fields based on other field values, creating dynamic forms adapting to user input. Multi-step forms break complex data collection into sequential screens, improving user experience for lengthy forms. File upload fields enable document attachment, with configuration for accepted file types and size limits. CAPTCHA protection prevents spam submissions from automated bots. Success messages display after successful submission, and redirect options navigate users to confirmation pages or other destinations. Form styling controls visual appearance while maintaining consistency with site themes. The comprehensive form capabilities enable sophisticated data collection scenarios without custom development.

List Components

List components display collections of Dataverse records in tabular or card formats, enabling visitors to browse, search, and interact with data. List configuration starts with selecting source tables and choosing which records to display through filter criteria. For example, a customer portal might filter cases to show only cases owned by the current user, while a product catalog might show all active products. Column selection determines which table fields appear in lists, with column order configurable through drag-and-drop. Column formatting controls data presentation including date formats, number formats, or custom text transformations.

List interactivity features include sorting enabling visitors to reorder records by clicking column headers, searching allowing keyword filtering across visible columns, and pagination breaking large result sets into manageable pages. Record actions enable visitors to view details, edit records (if permitted), or delete records (if authorized), with actions respecting table permissions configured for user roles. List styling controls visual presentation including table or card layouts, column widths, row highlighting on hover, and responsive behavior collapsing to mobile-friendly views on smaller screens. Advanced configuration includes custom views applying complex filter and sort combinations, and list templates defining reusable list configurations for multiple pages. Lists provide powerful data presentation capabilities transforming Dataverse data into accessible web interfaces without custom code.

Advanced Components

Beyond basic components, Power Pages offers advanced elements for specialized scenarios. Chart components visualize Dataverse data through bar charts, pie charts, line graphs, or other visualizations, with configuration for data sources, aggregations, and visual styling. Power BI components embed reports from Power BI service, enabling sophisticated analytics and interactive dashboards within portal pages. IFrame components embed external websites or applications, useful for integrating content from other systems. Code components enable developers to add custom HTML, JavaScript, or CSS for requirements beyond standard components, providing extensibility when built-in components don't meet specific needs.

Navigation components include breadcrumb trails showing current location in site hierarchy, site maps displaying complete navigation structures, and custom menu components for specialized navigation patterns. Search components add site-wide search capabilities with configuration for indexed content and result presentation. Social sharing components enable visitors to share content on social media platforms. Language selector components enable multi-language site support where available. These advanced components extend Power Pages capabilities beyond basic content and forms, enabling sophisticated websites meeting diverse business requirements without requiring full custom development.

Modifying Power Pages Themes

Theme Selection and Customization

Power Pages includes several preset themes providing professional starting points for site styling. Makers access themes through the Styling workspace, viewing theme previews showing how different themes present sample content. Preset themes include business-focused designs with professional color schemes, modern designs with bold colors and contemporary typography, classic designs with traditional layouts and muted colors, and high-contrast designs prioritizing accessibility. Selecting preset themes instantly applies all associated styling across entire sites, providing rapid transformation from default appearances to branded designs.

Theme customization enables modifying preset themes or creating custom themes from scratch. Color customization starts with primary colors typically matching organizational brand colors, used prominently in headers, buttons, and key interface elements. Secondary colors complement primaries, used for supporting elements and providing visual interest. Background colors establish page foundations, with light backgrounds for readability or dark backgrounds for modern aesthetics. Text colors ensure sufficient contrast with backgrounds for accessibility compliance. The color picker tool enables visual selection or precise specification through hex codes, RGB values, or HSL values for exact brand color matching.

Typography and Button Styling

Typography configuration controls all text appearance throughout sites. Font family selection includes web-safe fonts available across all browsers and devices, Google Fonts providing extensive font libraries, or custom fonts uploaded by organizations. Heading fonts often differ from body fonts, creating visual hierarchy distinguishing titles from content. Font size settings establish baseline text sizes with responsive adjustments for different screen sizes, and heading scales defining relative sizes for H1 through H6. Font weight configurations set normal and bold text appearances, and line height adjustments control spacing between text lines affecting readability and density.

Button styling creates consistent interactive elements matching brand identity. Border radius controls button shapes from fully rounded pills to sharp rectangular corners, with middle values creating slightly rounded modern appearances. Button sizes define small, medium, and large variants used for different emphasis levels, with size including padding, font size, and overall dimensions. Hover effects provide visual feedback when users move cursors over buttons, typically including color changes, shadow additions, or subtle animations indicating interactivity. Button variants include primary buttons for main actions using bold colors, secondary buttons for alternative actions with subdued styling, and text buttons providing minimal visual weight for low-priority actions. These button styles apply consistently across all site buttons without requiring individual configuration.

Spacing and Layout

Spacing controls adjust white space throughout sites, significantly impacting visual density and readability. Padding settings control space inside elements like sections or components, affecting how tightly content fits within boundaries. Margin settings control space between elements, creating visual separation and grouping. Spacing scales define consistent spacing increments used throughout sites like small (8px), medium (16px), large (32px), and extra-large (64px) values, ensuring visual consistency rather than arbitrary spacing values. Container widths control maximum content width on large screens, with wider containers utilizing screen real estate and narrower containers improving readability by limiting line length.

Responsive behavior configurations determine how layouts adapt to different device sizes. Breakpoint settings define screen widths triggering layout changes, typically including mobile (phones), tablet (iPads), and desktop (computers) breakpoints. Component behavior at each breakpoint controls whether elements stack vertically on small screens, hide on certain device types, or adjust sizing for optimal viewing. The styling workspace includes responsive preview modes enabling makers to verify layouts work correctly across device sizes during theme development. These spacing and responsive configurations ensure sites provide excellent experiences whether visitors access from phones, tablets, or desktop computers.

Saving and Exporting Themes

After customizing themes, makers save them as named theme configurations enabling quick switching between different design approaches or reverting to previous styles if new directions don't work as expected. Saved themes appear in theme selection interfaces alongside preset themes, enabling rapid application to other pages or sites. Theme export functionality generates theme definition files containing all styling configurations, enabling theme transfer between environments (development, test, production) or between different sites requiring consistent branding. Import theme functionality applies exported themes to new sites, ensuring brand consistency across multiple portals or accelerating new site creation through proven design patterns.

Organizations managing multiple Power Pages sites benefit from centralized theme management where design teams create and maintain approved themes, distributing them to site makers who apply consistent branding without needing design expertise. Theme governance ensures sites maintain professional appearances aligned with brand guidelines while empowering makers to create functional sites without waiting for design resources. Regular theme updates propagate across all sites using those themes, enabling brand refreshes or seasonal styling changes without individual site modifications. This scalable approach to visual design supports enterprise Power Pages adoption without sacrificing brand consistency.

Real-World Power Pages Creation Scenarios

Scenario 1: Customer Self-Service Portal with Copilot

Scenario 2: Event Registration Site Manual Creation

Scenario 3: Partner Portal Theme Customization

Exam Preparation Tips

Key Concepts to Master

• Copilot creation: Describe desired sites in natural language, AI generates structure and content
• Pages workspace: Create and edit pages, add sections and components, organize page hierarchies
• Styling workspace: Control colors, typography, buttons, spacing - applies site-wide
• Data workspace: Manage Dataverse connections, configure forms and lists
• Set up workspace: Configure authentication, security, domain settings
• Sections vs components: Sections provide layout structure, components provide content
• Form configuration: Select tables, choose fields, set validation, define success actions
• Theme modification: Customize colors, fonts, buttons to match brand identity

Practice Questions

Hands-On Practice Lab

Lab Activities

Lab Outcomes

After completing this lab, you'll have practical experience creating Power Pages sites with Copilot (if available), navigating design studio workspaces, creating pages with sections and components, configuring forms and lists for data interaction, and customizing themes to match brand identity. This hands-on knowledge demonstrates the complete Power Pages development workflow tested in PL-900 exam and provides foundation for creating professional external-facing websites.

Frequently Asked Questions