As we all know, creating dynamic and interactive websites has become more accessible than ever with tools like Microsoft Power Pages. Even though the platform is built on the concept of low-code, allowing anyone to build a world class website, it also allows pro-code developers to add their own customizations that cannot be achieved with the out of the box toolset using Liquid templating and JavaScript.
You can get very far with knowing the out of the box components that can be manually configured, but if you want to utilize the full power of Power Pages (pun intended), understanding how to leverage Liquid and JavaScript within Power Pages is key.
This blog post is your starter guide to the concept of web templates. Once you understand what it is, you can go on and start building your own web templates today.
The Power of Power Pages
Before diving into the specifics of Liquid and JavaScript, let’s briefly revisit what makes Power Pages a go-to solution for both technical and non-technical users.
Power Pages is part of Microsoft’s Power Platform, designed to enable users to build secure, data-driven websites with minimal coding. It stands out for its ease of use, integration capabilities with Microsoft Dataverse, and the ability to connect to various data sources and other apps within the Microsoft ecosystem.
You can also utilize things like Power Automate and Dynamics products with Power Pages, thanks to its connection to Dataverse, making websites built with Power Pages truly powerful.
But, as mentioned, to fully unlock the low-code lock and build anything in a Power Page, its important to know what liquid templating is.
Understanding Liquid Templating
Liquid is an open-source template language created by Shopify and is used in Power Pages to render data dynamically (altho with a somewhat different syntax). This means that if you are searching for answers online, you need to specify that you are looking for Liquid for Power Pages and not just liquid.
Liquid allows you to use simple markup and tags to control the logic displayed on the page, such as loops, conditionals, and data manipulation. This makes it really powerful for creating personalized user experiences based on the data from your backend systems.
The Basics of Liquid
Liquid syntax is straightforward. It uses double curly braces {{ }} for outputting data and curly braces with percentage signs {% %} for logic and control flow. Here’s a basic example:
{% if user.logged_in %}
Hello, {{ user.name }}!
{% else %}
Welcome, Guest!
{% endif %}
This snippet checks if a user is logged in and displays their name; if not, it greets them as a guest. Such dynamic content rendering is important for creating interactive, user focused websites.
You can also use more advanced features like filters for modifying output data, for-loops for iterating over collections, and even integrating custom objects from Dataverse. For instance, displaying a list of products stored in Dataverse can be as simple as:
<ul>
{% for product in products %}
<li>{{ product.name }} – ${{ product.price }}</li>
{% endfor %}
</ul>
This loop goes through each product in your products collection, outputting its name and price in an unordered list. These are just a few examples of what you can do with liquid, you can read way more about it here in the official Power Pages Liquid documentation.
Enhancing The Liquid Ice Cream with Vanilla JavaScript
While Liquid handles data manipulation and displays logic, JavaScript steps in to add interactivity and handle client-side logic. You can use JavaScript in Power Pages to create dynamic forms, validate user input, interact with APIs, and much more, just like you would if you were building any other website outside of Power Pages.
Basic JavaScript Integration
Integrating JavaScript into your Power Pages web template is as straightforward as including it within <script> tags or linking to external JS files. A simple example could be:
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
alert(‘Welcome to our website!’);
});
</script>
This script displays a welcome message when the page loads, introducing a basic level of interactivity to your website. JavaScript is great in scenarios where real-time content updates are needed without reloading the page. For instance, fetching data from an API and displaying it dynamically can be accomplished with JavaScript’s fetch API:
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => {
document.getElementById(‘data-container’).innerHTML = data.content;
})
.catch(error => console.error(‘Error fetching data:’, error));
This script makes a GET request to an API, parses the returned JSON, and inserts the content into an element with the ID data-container. Now this is so far just basic Javascript, but what happens when you combine Javascript with Liquid?
Liquid + JavaScript = Awesome
The real power in web templating comes when you combine Liquid and JavaScript. Liquid can pre-populate data on the server side, which JavaScript can then enhance with client-side logic. For instance, you might use Liquid to output initial data from Dataverse, then use JavaScript to add functionality like filtering or pagination without needing to fetch the entire dataset again.
Example: Dynamic Filtering
Imagine you have a list of products displayed using Liquid. You can add a client-side filter using JavaScript:
<input type=”text” id=”filterInput” onkeyup=”filterProducts()” placeholder=”Search for products…”>
<script>
function filterProducts() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById(‘filterInput’);
filter = input.value.toUpperCase();
ul = document.getElementById(“productsList”);
li = ul.getElementsByTagName(‘li’);
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName(“a”)[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1)
{
li[i].style.display = “”;
} else {
li[i].style.display = “none”;
}
}
</script>
In this example, Liquid could be used to generate the initial list of products (`ul` and `li` elements), including each product’s name within an `a` tag. Then, JavaScript takes over to dynamically filter this list based on the user’s input in the search box (`filterInput`). As the user types, the `filterProducts` function hides products that don’t match the search query, providing a seamless, interactive user experience without reloading the page or making additional server requests.
Conclusion
Power Pages, enhanced with Liquid and Vanilla JavaScript, offers a flexible, powerful platform for building dynamic, data-driven websites. By mastering Liquid, you can easily render and manipulate data server-side. With JavaScript, you add that layer of interactivity and real-time dynamism like other websites have.
Whether you’re building a customer portal, an event registration site, or an internal company portal, combining Liquid and JavaScript in Power Pages can elevate your web development game. Start simple, experiment, and gradually incorporate more complex logic and interactivity as you become more comfortable with the tools!
