🔧 Create a Web Template Component in Power Pages /Websites

Hello Developers! 👋

In today’s post, we’ll see how to create a Web Template component in Power Pages, a very useful technique to modularize and reuse your HTML + Liquid code within multiple pages in your portal.

If you're already playing around with Power Pages, you must’ve come across Web Templates. But what if I told you that you can use them just like components and plug them wherever needed? Let’s see how.

🧠 What is a Web Template?

In simple terms, a Web Template in Power Pages is like a reusable layout or code block written using HTML and Liquid. You can define dynamic logic, include CSS/JS, and inject it into different portal pages.

But recently, Power Pages added a neat capability — you can now treat Web Templates as components and use them inside other templates using a simple tag.

🛠️ Why Use Web Templates as Components?

Let’s say you have a chunk of code — like a banner, footer, or dynamic list — that you want to reuse across 5 or 10 pages. Instead of copying and pasting the same code everywhere (which is messy and hard to maintain), you create a Web Template component and include it wherever needed.

✅ Benefits

• Reusability (write once, use everywhere)
• Easier maintenance
• Cleaner structure
• Follows DRY principle (Don’t Repeat Yourself)

Creating reusable components like a header using Web Templates in Power Pages is a best practice. It helps us avoid repeating code and gives a consistent layout across multiple pages.

In this post, I’ll show you step-by-step how to:

1. ✅ Create a Web Template for the Header
2. ✅ Use the Web Template as a Component
3. ✅ Create a Page Template
4. ✅ Attach it to a Web Page
5. ✅ See the final output on the site

🧠 Why Two Web Templates and One Page Template?

Let’s get this straight before jumping into steps:

Template Name	Role	What It Contains
HeaderComponent	Reusable component (like a widget)	Only the header HTML with Liquid placeholders
HeaderDemoTemplate	Full-page layout (calls the component)	Calls HeaderComponent + main page HTML
Page Template	Links a page to a Web Template layout	Binds the Web Page with HeaderDemoTemplate

🔁 This is similar to how in HTML, you have reusable <header> or <nav> sections and then insert them in the main layout. Power Pages follows the same modular logic.

🧱 Step 1. Create a Header Web Template Component

1. Go to Power Pages Portal Management
   
2. Select your site > Go to “Web Templates”
   
3. Click “+ New”
   

Now fill in the Web Template record:

• Name: HeaderComponent
• Website: Select your portal site
• Source:

<!-- HeaderComponent -->

<div class="site-header">

  <h1>{{ heading }}</h1>

  <p>{{ subheading }}</p>

</div>

📝 This is a dynamic header using Liquid placeholders for heading and subheading, which we’ll pass when we use it.

Click Save and Close.

✅ Your Web Template is now ready to be used as a component.

💡 Note. We're using Liquid placeholders like title and subtitle that we’ll pass later.

Save the template.

✅ Step 2. Create the Main Page Layout Web Template -2

Now, let’s create another Web Template that acts as the full page layout, which will use our HeaderComponent.

1. Go to Web Templates
2. Click + New

📝 Fill in the details:

• Name: HeaderDemoTemplate
• Website: Your site

Source Code

<!-- Full Page Layout -->

<!-- HeaderComponent -->

{% include 'HeaderComponent' heading: 'Welcome to My Power Pages Site', subheading: 'This is a dynamic header using a Web Template .' %}

<div class="main-content">
  <p>This is the main content of the page.</p>
</div>

✅ This code calls the HeaderComponent using the {% component %} tag and passes the values for heading and subheading.

Save and close this Web Template.

✅ Step 3. Create a Page Template to Use the Layout

Now we connect the full-page layout (second Web Template) to a Page Template.

1. Go to Page Templates
2. Click + New

📝 Fill in the following:

• Name: Header Demo Page Template
• Type: Web Template
• Web Template: Select HeaderDemoTemplate
• Website: Your site

Click Save and Close

✅ Step 4. Create a Web Page That Uses the Page Template

Now we’ll create a Web Page and link the Page Template.

1. Go to Web Pages
2. Click + New

📝 Fill the following

• Name: Header Demo
• Parent Page: Home (or any parent)
• Partial URL: header-demo
• Page Template: Select Header Demo Page Template

Click Save and Close

✅ Step 5. Browse Your Page

Visit your portal site using the URL:

🎉 Congratulations! You have created a fully working modular design using Web Templates in Power Pages.

🚨 Important Notes

• The {% component %} tag only works with Web Templates marked as components (which is the default now).
• You can pass named parameters like title, subtitle, etc.
• Avoid complex logic in these templates — keep them small and focused.

💡 Real-World Ideas for Components

Here are some practical ideas where this feature shines:

Component	Description
📌 Banner	Static or dynamic headers for pages
📌 Footer	Common footer across the portal
📌 Navigation Menu	Custom nav menus that change per user
📌 Alerts	Info or error messages are shown conditionally
📌 Cards	Reusable card layouts for dashboards

🧹 Cleanup Tip

If you're not using older templates, go ahead and remove them. Keep your Web Templates area neat and clean. Trust me, it helps later when your project grows big.

📘 Reference

This feature is officially documented by Microsoft here:

👉 Use Web Templates as Components

👋 Final Words

I hope this helped you understand how to treat Web Templates as components in Power Pages. It’s a small but powerful trick that makes your portal projects clean, scalable, and developer-friendly.

Have questions or want to share your use cases? Drop them in the comments below. Happy coding! 💻