Developing reusable components for portals

Creating reusable components in Power Pages allows for consistency, easier maintenance, and faster development across your portal project. These components can include UI elements, data display blocks, scripts, or layout containers that are commonly used on multiple pages.

What Are Reusable Components in Power Pages?

Reusable components are modular, repeatable blocks or features that can be embedded across various parts of a portal. These include:

Web Templates
Page Templates
Web Files (HTML/JS/CSS)
Liquid Snippets
JavaScript Libraries
Reusable Forms and Lists

1. Web Templates as Reusable Layouts

Web Templates allow you to define HTML structure with embedded Liquid syntax.

Use case: Page layouts, headers, footers, breadcrumb navigations.

<!-- Web Template: Footer -->
<div class="footer">
  <p>&copy; {{ 'now' | date: "%Y" }} My Company. All rights reserved.</p>
</div>

You can include this in multiple pages using:

liquidCopyEdit{% include 'Footer' %}

2. Liquid Snippets

Liquid snippets allow reuse of small logic or UI blocks.

Use case: Dynamic greetings, reusable filters, conditional content blocks.

<!-- Snippet: Greeting -->
{% assign user = user.fullname %}
<p>Hello, {{ user }}!</p>

3. Reusable Forms and Lists

Power Pages supports Entity Forms and Lists.

Create Entity Forms or Lists once and reuse them via Web Pages or Liquid includes.
Parameterize them for different scenarios using query strings or conditional Liquid.

4. Web Files for Shared Assets

Web Files can contain shared:

JavaScript functions
CSS stylesheets
Image or icon assets

Best Practice: Load these files globally via the Page Copy or layout Web Template.

Example:

<!-- Include a reusable JS file -->
<script src="/webfiles/custom-utils.js"></script>

5. JavaScript Libraries

Modularize common logic into JS functions.

Use case:

Form validation
API call wrappers
UI interactions (modals, toasts)

// File: form-helper.js
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/;
  return re.test(email);
}

Load in multiple pages with one include.

6. Page Templates

Create Page Templates that act as layout blueprints (e.g., two-column layout, article layout) and link them to multiple Web Pages.

7. Embedding Canvas Apps or Power BI Reports

Wrap these elements in Web Templates or use Liquid to build a layout that receives parameters, making them reusable.

Best Practices

Naming Convention: Use consistent names for Web Templates and files, like comp-header, lib-utils, layout-standard.
Centralize Changes: One change to a template or snippet affects all referencing pages.
Minimize Duplication: Store business logic in reusable Liquid or JavaScript.
Version Control: Store reusable components in a solution and integrate with ALM tools like Azure DevOps.