{"id":46723,"date":"2026-10-28T16:14:36","date_gmt":"2026-10-28T10:44:36","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=46723"},"modified":"2026-10-28T16:14:36","modified_gmt":"2026-10-28T10:44:36","slug":"how-to-reuse-web-templates-as-components-in-power-pages","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2026\/10\/how-to-reuse-web-templates-as-components-in-power-pages\/","title":{"rendered":"How to Reuse Web Templates as Components in Power Pages"},"content":{"rendered":"

\"HowCopying the same Liquid and HTML block onto page after page works fine until the first design change, when you have to edit every copy. Web templates as components in Power Pages fix this: you write the layout once, reuse it on any page, and each page only sets its own values in the design studio.<\/p>\n

In this post I build a hiring agency site with just two reusable components, one for department cards and one for recruiter profiles. Both are fed live from Dataverse. You will get the tables, the full Liquid and FetchXML code, the manifest, the page setup, and the problems I hit along the way.<\/p>\n

What are web templates as components?<\/h3>\n

A web template becomes a component when it carries a {% manifest %} block that declares its type and parameters. Developers write the Liquid; makers then add the component to a page and set its values in the design studio without touching code. Microsoft documents the feature in Web templates as components<\/a>.<\/p>\n

    \n
  1. The manifest.<\/strong> A JSON object inside {% manifest %} and {% endmanifest %}. It sets type to “Functional” (required, so the component appears in the design studio), plus displayName, description, tables (Dataverse logical names) and params.<\/li>\n
  2. The template code.<\/strong> Liquid reads each parameter by its id, which acts like a variable name. All parameters arrive as strings, so numbers need a filter such as | integer.<\/li>\n
  3. The include tag.<\/strong> {% include ‘TemplateName’ param1: ‘value’ %} on a page passes the values. Makers can also change them later through Edit custom component<\/strong>.<\/li>\n<\/ol>\n

    One limit to know before you design: nesting is not supported, so one web template component cannot be placed inside another. That shapes this build, where the home page and the department pages use two separate components.<\/p>\n

    Use case:<\/h3>\n

    A hiring agency website where each department has its own page, and each page lists the recruiters who specialise in that sector. Two reusable components do the work, fed by two Dataverse tables. You will see the tables, the Liquid code, the pages, the finished site, and the problems I ran into along the way.<\/p>\n

    Every agency profile follows the same structure on every page:<\/p>\n