How to Add a Custom Component in Microsoft Power Pages
Add a Custom Component in Microsoft Power Pages
Custom Components allow makers and developers to reuse functionality across Microsoft Power Pages websites. These components are built using Web Templates and Liquid code, making it possible to create reusable page elements that can be inserted directly into Design Studio without requiring manual coding each time.
Tip: Custom Components help standardize website design and functionality by allowing reusable content blocks to be added across multiple pages.What is a Custom Component?
A Custom Component is a reusable component created using a Web Template and Liquid code. Once configured with a component manifest, it becomes available within Power Pages Design Studio and can be added to pages just like built-in components.
Benefits of Custom Components
- Create reusable website functionality.
- Reduce duplicate development effort.
- Maintain consistent branding and design.
- Improve maintainability.
- Extend Power Pages capabilities.
- Enable low-code reuse of advanced features.
Prerequisites
Before a Custom Component can appear in Design Studio, it must be configured with a valid Web Template, Liquid code, and Component Manifest.
Important: Only Custom Components that contain a valid manifest will be displayed in the Design Studio component list.Steps to Add a Custom Component
- Open Power Pages Design Studio.
- Navigate to the Pages workspace.
- Select the page where you want to add the component.
- Select an existing section or create a new section.
- Click the Ellipsis (⋯) menu.
- Browse the available Custom Components.
- Select the desired component.
- The component will be inserted into the selected section.
- Save and publish the page.
How Component Discovery Works
Power Pages automatically scans available component manifests and displays eligible Custom Components inside Design Studio.
- Components with manifests appear in the list.
- Components without manifests remain hidden.
- Components can be reused across multiple pages.
- Manifest metadata controls component behavior.
Working with Web Templates
Custom Components are powered by Web Templates that contain HTML, CSS, JavaScript, and Liquid code. These templates allow dynamic content to be rendered based on Dataverse data and user interactions.
Using Liquid with Custom Components
Liquid enables developers to create dynamic and data-driven experiences inside Custom Components. Data from Dataverse tables can be retrieved and displayed using Liquid syntax.
{% assign records = entities.account %}
{{ records.name }}
Component Manifest
A Component Manifest defines how the component appears and behaves inside Design Studio. It provides metadata that allows Power Pages to identify and render the component correctly.
| Manifest Element | Purpose |
|---|---|
| Name | Component display name. |
| Description | Information shown in Design Studio. |
| Properties | Editable configuration options. |
| Category | Component grouping within Design Studio. |
Best Practices
- Create reusable and modular components.
- Use meaningful manifest names and descriptions.
- Keep Liquid code optimized.
- Test components across devices.
- Document component functionality.
- Follow organizational branding standards.
Summary
Custom Components in Microsoft Power Pages provide a powerful way to build reusable functionality using Web Templates and Liquid code. By leveraging component manifests, organizations can make advanced functionality available directly within Design Studio while maintaining consistency, scalability, and ease of maintenance.