Conditional table field values in Power Pages using HTML and Liquid

In this post, following on from yesterdays, we’ll take a look at how to populate table fields in a column with conditional values based on other values in columns in our table, using data we’ve retrieved using FetchXML and in my case from Microsoft Dataverse.

If you’re not comfortable with producing a custom table of Dataverse data using FetchXML query, some HTML and some liquid, then take a look at this blog post prior to following this one.

Recap on getting fields into our table

So recapping from the post above, we know that in our HTML table using the <td> tag inside the <tbody> we can use liquid like {{result.fieldname}} to populate the fields with our field name which is returned from the line of liquid we use just after our <tbody> opening tag.

So we know how to reference fields and get their dynamic values for the current record.

Writing an If statament

Now let’s look at writing an if statement in liquid. Very simply use the following syntax

{% if STATEMENT %}
action
{% endif %}

Operators

Check out this guidance on operators and if statement examples in liquid to get a better idea of how you can use this here – https://shopify.github.io/liquid/basics/operators/

Example of producing a conditional field value

So in my example, I’m using two fields I retrieved using the <attribute> tag in my FetchXML and which I will retrieve through the results of looping through my records using liquid. I now need to write some more liquid using the if statement syntax above and the syntax to retrieve fields along with an operator.

My example looks like this…

<td>
              {% if result.field1 > result.field2 %}
              <a href="../Page1?id={{ result.recordid}}">Book Now</a>
              {% endif %}
              {% if result.field2 >= result.field1 %}
              <a href="../Page2?id={{result.recordid}}">Join Waitlist</a>
              {% endif %}
            </td>

Here I’m saying that when field 1’s value is greater than field 2’s value, create a new column with a link that has a link that goes to page 1, passing in that records ID as a query string with the hyperlink text “Book Now”.

Then I’m making the opposite if statement using “Join Waitlist” and a different page to link to as the result.

Overview

Hopefully in this post you were able to understand how to add a column to a HTML table of data in Power Pages with conditionally populated field values. If you didn’t understand something in this post, and need more help, let me know in the comments below.