Using Web Templates as Components in Microsoft Power Pages
Sergio García Fonseca 01/06/2025 
Microsoft Power Pages provides an intuitive, low-code approach to building external-facing websites that integrate seamlessly with your data stored in Microsoft Dataverse. One of the most powerful features is the ability to use web templates as reusable components that can render dynamic content on your site. In this post, we'll explore how you can use a web template in Power Pages to display article information from a Dataverse table called Post. Specifically, we'll walk through an example of a Card Component that retrieves an article's details using a FetchXML query.
What are Web Templates in Power Pages?
Web templates in Power Pages are HTML files embedded with Liquid code that enables dynamic content generation. Liquid is a templating language that allows you to integrate data from Dataverse, enabling you to build highly customizable web pages. A web template can contain reusable components like headers, footers, and more complex blocks, like a card or a list of articles, that can interact with your database.
Setting up the Example: A Card Component for Article Information
Let's say we have a Post table in Dataverse where articles are stored. Each post contains several fields, including the title, content, and a publication date. We want to create a Card component that pulls this information and displays it on a page.
Step 1: Create the Card Component in the Web Template
The first step is to define the Card component in the web template. This is where the HTML and Liquid code come together. Below is an example of how we might structure the code in our template:
<div class="card"><h2>{{ post.title }}</h2><p>{{ post.content }}</p><span class="date">{{ post.publication_date | date: "%B %d, %Y" }}</span></div>This butecname="content" />
attribute name="publication_date" />
To get the data for a specific article, we need to run a FetchXML query that retrieves the Post record. FetchXML is a proprietary query language used in Microsoft Dataverse to fetch data from tables. Below is a simple example of a FetchXML query that retrieves the most recent post from the Post table:
<fetch top="1"> <entity name="post"> <attribute name="title" /> <attribute name="content" /> <attribute name="publication_date" /> <order attribute="publication_date" descending="true"/> </entity> </fetch>`
is code:
Noentities.post refers to the Post table in Dataverse.
{% assign posts = entities.post | fetchxml: "<fetch top='1'><entity name='post'><attribute name='title' /><attribute name='content' /><attribute name='publication_date' /><order attribute='publication_date' descending='true' /></entity></fetch>" %}{% if posts.size > 0 %}<div class="card"><h2>{{ posts[0].title }}</h2><p>{{ posts[0].content }}</p><span class="date">{{ posts[0].publication_date | date: "%B %d, %Y" }}</span></div>{% else %}<p>No posts available.</p> {% endif %}In e the web template is created and the component is defined, you can add this web template to any Power Page. To do this, go to the Power Pages Studio, open the page where you want to add the Card component, and then reference the web template using the {% include 'template_name' %} syntax.
- r example:
- % include 'ArticleCardTemplate' %}
will render the Card component you created i
n the web template and display the article information on the page.
{% include 'ArticleCardTemplate' %}Why Use Web Templates and Components in Power Pages?
g web templates as components in Microsoft Power Pages provides several advantages:
To eusability: Once you create a web template, you can reuse it across different pages, making your site more consistent. As aintainability: If you need to update the design or functionality of the Card component, you can simply edit the template without needing to modify
Why Use Web Templates and Components in Power Pages?
Using web templates as components in Microsoft Power Pages provides several advantages:
- b templates are a powerful feature in Microsoft Power Pages that allow you to build dynamic, data-driven websites without extensive coding. By leveraging Liquid and FetchXML, you can create reusable components, such as the Card component in our example, that pull content directly from Dataverse.
- is flexibility makes it easy to build sophisticated websites that integrate seamlessly with your backend data. Whether you're displaying a list of articles, user profiles, or other data, web templates and FetchXML queries can help you bring your content to life.