Power Pages supports Liquid templates to render dynamic content. To enhance maintainability, consistency, and scalability, reusable snippets and layout templates are a best practice when building large or modular portals.
What Are Liquid Snippets?
Liquid snippets are small, reusable pieces of code stored in Web Templates. You can include them in pages or templates across your site, much like a partial in web development.
How to Create a Reusable Snippet
- Go to Power Pages Management App
- Navigate to Web Templates.
- Create a new template with:
- Name:
CommonFooter - Source: liquidCopyEdit
<footer class="site-footer"> <p>© {{ 'now' | date: '%Y' }} MyCompany. All rights reserved.</p> </footer>
- Name:
- To reuse it: liquidCopyEdit
{% include 'CommonFooter' %}
Examples of Common Snippets
| Snippet Name | Purpose |
|---|---|
HeaderMain | Portal header layout |
UserProfileCard | Shows logged-in user info |
AlertMessage | Centralized alert message UI |
LoginCTA | Call-to-action login button |
LanguageSelector | Render language options |
Layout Templates
Layout templates define the overall structure of a webpage and are used as the master layout for multiple web pages.
How to Create a Layout Template:
- Create a Web Template named
SiteLayout. - Sample layout:
<!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> <link rel="stylesheet" href="/custom.css"> </head> <body> {% include 'HeaderMain' %} <main> {{ content }} </main> {% include 'CommonFooter' %} </body> </html> - Use this layout in your Web Page:
- Set Page Template → Web Template
- Choose
SiteLayout
Benefits of Using Reusable Snippets & Layouts
Easier maintenance (edit once, update everywhere)
Enforces consistent styling and structure
Modular development (team-friendly)
Separation of concerns
Cleaner Web Page definitions (minimal duplication)
Best Practices
- Use naming conventions (e.g.,
Layout_,Comp_,Snippet_) - Store all reusable elements in Web Templates
- Use conditional logic inside snippets if needed:
{% if user %} Welcome, {{ user.fullname }} {% else %} <a href="/signin">Sign In</a> {% endif %} - Avoid large monolithic templates—compose using includes
Folder Structure Recommendation
You can prefix names to logically group them:
Layout_MainLayout_OneColumnComp_UserCardComp_LanguageSwitcherSnippet_Toast