Get started with Liquid in Power Pages Microsoft Office 365 Liquid in Power Pages

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.

Get started with Liquid in Power Pages Microsoft Office 365 image 16

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.

Get started with Liquid in Power Pages Microsoft Office 365 image 17

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.

Avatar for Pieter Veenstra

By Pieter Veenstra

Business Applications and Office Apps & Services Microsoft MVP working as a Microsoft Productivity Principal Consultant at HybrIT Services. You can contact me using contact@veenstra.me.uk.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: