Get started with Liquid in Power Pages

Posted By Pieter Veenstra on 14 Jul 2022 in Modern Workplace

In this post I’m going to introduce some code into my Power Pages ultimate user guide, by introducing Liquid.

Find your liquid in Power Pages

In one of my recent posts I talked about editing pages in Power Pages.

Using the most left icon of the above four, you can open the page editor. As you open the editor you will notice some html code and some code that sits within {% and %} or {{ and }}. The stuff sitting between these curly brackets is called liquid.

Personally I have found this site on github.io really helpful to get started with Liquid.

Liquid Code

It is important to understand the following concepts:

• Objects
• Tags
• Filters

Objects

When you want to display some data from an object you can do so by including the data inside {{ and }}

So for example if I have a variable mycompany I could display this using the following

{{ mycompany }}

Or for example if you wanted to display the user’s name:

{{ user.fullname }}

That is all pretty easy isn’t it?

Tags

I variety of controls is available to control your code. And example of an if is shown below:

{% if mycompany %}
    <div>Your Company: {{ mycompany }} </div
{% endif %}

similarly you can also use elsif and else.

Or you could use case/when tags as well as the unless tags.

Comments

You can also add comments to your code:

{% comment %}
Anything that will do nothing
{% endcomment %}

Code improvements

All these {% and %} on each line can make it clearer to see which lines are code and which lines are html being rendered.

The code can be optimized to use a single set of curly brackets:

{% liquid
if mycompany 
   assign text = "test value"
endif %}

Liquid filters

By no means is this post complete, I would like to refer to the earlier help pages on github.io and the Microsoft documentation on this.

Liquid filters give you similar functionality to functions in Power Apps. Consider the following line of code:

{% assign mylink = mylinks.results.entities | first  %}

The assign tag sets a variable mylink to the first item of the mylinks.results.entities array. So the first function will filter your array.

An Example

How about creating a page in Power Pages that lets you display Power BI reports depending on the user that is logged in? So depending on which company a user works at, they get a different report shown?

Have a look at my post that explains all the steps needed to build pages that present different Power BI reports depending on who is logged in.

Continue Reading Pieter Veenstra’s Article on their blog

Get started with Liquid in Power Pages

In this post I’m going to introduce some code into my Power Pages ultimate user guide, by introducing Liquid. In one of my recent posts I talked about editing pages in Power Pages. Using the most left icon of the above four, you can open the page editor.

Blog Syndicated with Pieter Veenstra’s Permission

More About This Author

Pieter Veenstra

Array

Array

• Modern Workplace26 March 2024Receive the available storage within your SharePoint Online tenant
• Modern Workplace20 March 2024Options for Documenting Your Power Apps: Comments, Code, and Controls
• Modern Workplace18 March 20242 ways to duplicate SharePoint Lists to support your Power Apps
• Modern Workplace14 March 2024Update a Hyperlink Column in SharePoint with Power Automate