As a power pages developer, most of us are familiar with writing “Web Templates” using liquid to design our portal layout and templates. However, the opportunity to use your web template as a component can be beneficial when dealing with redundant code or complex requirements.
Initialising the component
To add a component to your webpage, you can copy the following code and edit it as per your component:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
For instance, to include the component (with default) created in this you would use the following code:
{% include 'alertscomponent' %}
Defining the component
The liquid code of your “alertscomponent” component will be as follows:
<div id="{{ _id | default: 'dvAlertInfo' }}" class="alert {{ _class | default: 'alert-info' }}" role="alert">
{{ _content | default: 'Default info alert content.'}}
</div>
{% manifest %}
{
"type": "Functional",
"displayName": "Alerts Component",
"description": "This returns the alerts html based on the class and the content",
"tables": ["alerts"], <!--This component can be updated based on the table schema you would like to use in current environment.-->
"params": [{
"id": "_id",
"displayName": "Alert id",
"description": "Element id of the alert div"
},{
"id": "_class",
"displayName": "Alert class",
"description": "Alert type class of the alert div"
},{
"id": "_content",
"displayName": "Alert content",
"description": "Content of the alert div"
}]
}
{% endmanifest %}
In the dynamics environment, you’ll be creating the component with following attribute:

Including in web page template
The component created is reusable and can be initialised at multiple occurances. Since, it is a parameterised component it’s behaviour may vary depending upon the parameters provided upon each instance as shown below:
<!-- This should display the default alerts component -->
{% include 'alertscomponent' %}
<!-- This should display the success alerts component with custom success message -->
{% include 'alertscomponent' _id: 'dvAlertSuccess' _class: 'alert-success' _content: 'This is the success content.' %}
<!-- This should display the danger alerts component with custom danger message -->
{% include 'alertscomponent' _id: 'dvAlertDanger' _class: 'alert-danger' _content: 'This is the danger content.' %}
<!-- This should display the warning alerts component with custom warning message -->
{% include 'alertscomponent' _id: 'dvAlertWarning' _class: 'alert-warning' _content: 'This is the warning content.' %}

Output
The output of the following page should as follows:

About the Author

Syed Kamran Akhter
This is the platform where I share my recent experiences, troubleshooting skills, and exciting news about recent development technologies. I have experience developing websites/portals, web-services, web, and desktop applications from scratch using various .NET Framework (ASP.NET MVC, ADX Studio Portals), Client-Side Scripting and Development Experience with Microsoft Products (Microsoft Dynamics 365 CE, Marketing, Sales, Project Operations, and Field Services). Moreover, extending the functionality using PowerApps (PowerApps Portal, Power BI, Model-Driven Apps, Power Automate, and Canvas Apps) along with integration with external source using API, Azure Functions or Logic Apps or Custom APIs.
Reference:
Akhter, S (2025). Power Pages – Web templates as components. Available at: Specify Date Ranges with the Modern Power Apps Date Picker [Accessed: 15th January 2025].