Power Pages (formerly Power Apps Portals) enables makers and developers to build powerful business websites using Dataverse. Two critical components that enable flexibility, customization, and dynamic content delivery in Power Pages are Web Files and Web Templates.
This guide walks you through a detailed, step-by-step explanation of Web Files and Web Templates, their roles, creation process, practical use cases, and best practices.
1. What Are Web Files?
Web Files in Power Pages are used to store and serve static content like:
- Images (JPG, PNG, SVG)
- Documents (PDF, DOCX)
- Scripts (JS files)
- Stylesheets (CSS files)
- Fonts and other web assets
These files are stored in Dataverse and made accessible via public URLs, making them suitable for referencing in pages, templates, and themes.
Key Features:
- Can be stored securely or publicly.
- Accessible via
/webfiles/filename.extpath. - Can be tied to a specific website.
- Indexed by search engines (if public).
2. Creating a Web File
You can create Web Files via the Power Pages Design Studio or the classic Power Apps Portals Management App.
Step-by-step (Design Studio):
- Go to Power Pages Studio.
- Navigate to the “Media” or “Files” tab.
- Click “+ New Web File”.
- Provide the following:
- Name: Friendly name (e.g., LogoImage).
- Website: Choose your current portal site.
- Parent Page (optional): Define hierarchy.
- Partial URL: Define URL slug (e.g., logo.png).
- Upload the file content (image, CSS, JS, etc.).
- Save and publish.
Access Example:
https://yourportal.powerappsportals.com/webfiles/logo.png
3. Using Web Files in Your Site
You can use Web Files in your HTML or Liquid templates like so:
Images:
<img src="/webfiles/logo.png" alt="Company Logo">
Stylesheets:
<link rel="stylesheet" href="/webfiles/custom-style.css">
JavaScript:
<script src="/webfiles/app-script.js"></script>
4. What Are Web Templates?
Web Templates are reusable HTML structures enhanced with Liquid syntax. These templates are used to build layouts and serve content dynamically.
They allow rendering of:
- Entire pages (via Page Templates)
- Sections of pages
- Reused content structures
Web Templates are stored in Dataverse and referenced by Page Templates.
Key Features:
- Written in HTML + Liquid.
- Can include reusable components.
- Can fetch and display Dataverse data.
- Used by Web Pages to render dynamic layouts.
5. Creating a Web Template
Via Power Pages Management App:
- Go to Portals Management App.
- Navigate to Web Templates.
- Click “+ New”.
- Provide:
- Name: Template identifier (e.g.,
MainLayout). - Website: Select your site.
- Source: HTML + Liquid content.
- Name: Template identifier (e.g.,
Sample Source:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My Site{% endblock %}</title>
<link rel="stylesheet" href="/webfiles/main.css">
</head>
<body>
{% include 'header' %}
{% block content %}{% endblock %}
{% include 'footer' %}
</body>
</html>
6. Linking Web Template to Web Page
To use a Web Template:
- Create a Page Template.
- Type: Web Template
- Link to your Web Template record.
- Create a Web Page.
- Assign your Page Template.
- Provide page content.
The content will render inside your Web Template using {% block content %}.
7. Practical Use Cases
Web Files:
- Host custom styles or JS scripts (
custom.css,theme.js). - Display static media (images, icons).
- Offer downloadable PDFs or guides.
Web Templates:
- Layout engine for entire site.
- Create master-child page structure.
- Embed navigation bars, footers, sidebars.
- Pull Dataverse records using Liquid.
8. Best Practices
For Web Files:
- Use descriptive names and extensions (
header-logo.png,whitepaper-2025.pdf). - Minify CSS and JS before upload to improve performance.
- Use versioning (e.g.,
style-v2.css) to manage cache invalidation.
For Web Templates:
- Keep layout clean and use Liquid blocks (
{% block %}) wisely. - Break down large templates with
include. - Test template logic with sample Web Pages.
- Avoid excessive Liquid logic — offload to client-side or automation.
9. Common Pitfalls to Avoid
| Issue | Solution |
|---|---|
| Web File not loading | Ensure it’s published and has correct file extension. |
| 404 error | Check URL and whether the file is linked to the correct site. |
| Styles not applying | Verify MIME type and relative paths. |
| Template not rendering | Ensure correct mapping via Page Template. |
10. Summary
| Feature | Web File | Web Template |
|---|---|---|
| Purpose | Serve static content | Render HTML/Liquid logic for pages |
| Stored in | Dataverse | Dataverse |
| Usage | Media, CSS, JS, Docs | Page layout, dynamic rendering |
| Linked To | Web Pages (indirect) | Page Template > Web Page |
| Supports Logic | (Static only) | (Uses Liquid template language) |