Posts

Showing posts with the label Liquid

Tutorial: Add a Custom Page Layout in Power Pages

Image
Tutorial: Add Custom Page Layout to Your Power Pages Site When you create new webpages using the Pages workspace in Power Pages, you can choose from predefined page layouts. In some scenarios, you may want to create a custom page layout to display information in a specific format or provide a specialized user interface. In this tutorial, we create a custom page layout using Liquid . The example demonstrates a two-column layout with the main site menu on the left and page content on the right. What We Will Build Create a common base web template with custom layout code Create a second web template that extends the base template Create a page template referencing the web template Create a web page using the custom page layout Prerequisites A Power Pages subscription or trial An existing Power Pages site Basic knowledge of HTML and Liquid Step 1: Create a Web Template and Wri...

Exercise: Display a List of Accounts Using Liquid in Power Pages

Image
Exercise: Display a List of Accounts Using Liquid in Power Pages In this hands-on lab, you learn how to access Dataverse data using Liquid code. The goal of this exercise is to: • Enter Liquid code as page content • Access Dataverse data using Liquid • Use conditional statements to display available data You will create a page that lists active accounts and shows the total number of accounts. Step 1: Open Power Pages Design Studio Sign in to Power Pages and open the website you want to edit. Step 2: Create the Suppliers Webpage In the Pages workspace, select + Page, enter "Suppliers" as the page name, choose the blank template, and add the page. Step 3: Add HTML and Liquid Code On the Suppliers page, add a text component and replace its placeholder with the following HTML and Liquid: <h2>Lis...

Using Liquid in Power Pages – Step by Step guide

Image
Using Liquid in Power Pages – Step by Step Learn how to add a simple Liquid expression to a Power Pages site. Example Used The following Liquid expression displays the current time dynamically whenever the page is loaded. Hello, visitor. The time is {{ 'now' | date: 'g' }} Steps to Add This Liquid Example in Power Pages Step 1: Open your Power Pages site using Design Studio. Step 2: Navigate to the page where you want to display the Liquid content. Step 3: Select the text component or section on the page. Step 4: Paste the Liquid expression directly into the content area. Step 5: Save the page and preview the site. When the page loads, Power Pages evaluates the Liquid expression on the server and replaces it with the current time before sending the HTML to the browser. Why This Works ...

Power Pages Liquid Overview

Power Pages Liquid Templates - Complete Guide Understand how Liquid works in Power Pages and how it helps build dynamic, Dataverse-driven portal pages and blog layouts. What is Liquid in Power Pages? Liquid is an open-source templating language built into Microsoft Power Pages. It allows developers to render dynamic content from Dataverse, control visibility, and customize portal layouts without using JavaScript. Liquid runs on the server side and outputs clean HTML, ensuring security and performance for Power Pages websites. Where Liquid is Used in Power Pages • Web Templates for reusable layouts • Page Templates to define page structure • Page content in advanced editor • Content Snippets for reusable UI blocks Core Liquid Components Liquid Objects Liquid objects expose runtime data such as cu...