Why are if statements important? Conditions allow us to plan for different scenarios and cater for the inevitable data gaps. Here are some real examples I had to work around on the Spotify clone project:

  • What do do with tracks that have no artwork
  • Tracks with a spreadsheet attached instead of audio
  • Missing audio
  • Tracks with titles that are 100s of characters long
  • Show like buttons only for tracks that the user hasn’t already liked
  • Show sections of the page only if a query returns results and if certain fields contain data
  • Treat the last track in the playlist differently from the rest

They also come in handy for graceful degradation. One example was stopping the layout from breaking if a track had no artwork. I used if to swap in a placeholder image instead (see example below :))

Here’s how an if is written in liquid..

{% if condition == 'met' %}
Do this
{% endif %}

You can also provide a ‘default’ or false option using else:

{% if condition == 'met' %}
Do this
{% else %}
Do this other thing
{% endif %}

…and you can also use elsif to branch and test for other things like so:

{% if condition1 == 'met' %}
Do this
{% elsif condition2 > 0 %}
Do this instead
{% else %}
Do this as a last resort
{% endif %}

A few gotchas from my experience

  • Note it’s elsif, and NOT elseif… I made that mistake in the early days
  • In liquid, there is no null. Whether you know it or not, you actually mean nil
  • You may have noticed that the above examples use two equal symbols == to mean is equal to. In liquid, a single equals sign is used to set a value rather than checking or getting a value… so always use == for equal to in your if statements
  • Be sure to wrap text values in ‘single quotes’. This is how liquid knows to treat this as straight forward text as opposed to a variable or a special keyword.

It’s worth getting familiar with the various operators available. Here are some of the basics:

Symbol / keyword Meaning
== Equal to
contains contains
!= Not equal to
Greater than
>= Greater than or equal to
Less than
<= Less than or equal to
empty Use to check whether an array or string is empty
or Combine multiple conditions with an OR relationship (one or more must be met)
and Combine multiple conditions with an AND relationship (all must be met)

How to use IF with the various Dataverse field types

Is a text field, lookup field, option set, date or numeric field populated?
Note that all we need is the name of the field. We don’t need to specify nil or an empty string

{% if user.firstname %}

Is a text field over a certain length?

{% if user.firstname.size > 5 %}

Is a text field equal to a certain value?

{% if user.fullname == 'Franco Musso' %}

Does a text field contain a certain value?

{% if user.fullname contains 'Franc' %}

Is a date field in the past (earlier than today’s date?)

{% if createdon < now %}

Is a number field positive?

{% if user.musdyn_age > 0 %}

Is a variable set?

{% if thisAccount %}

Examples from the Spotify clone project

What better way to learn than by example? Here’s every bit of conditional code I used in my Spotify clone project:

If the visitor is a logged in user (show one web template if yes or another if not);

{% if user %}
    {% include 'Dashboard' %}
{% else %}
    {% include 'Home Page Grid' %}
{% endif %}

If a GUID has been passed in the URL:

{% if request.params.id %}

If your fetch XML query returned one or more results (in this example, the fetch XML query is named ‘playlist_query’):

{% if playlist_query.results.entities %}

If the track has artwork, show the image. If not, display a placeholder image instead:

          {% if result['track.musdyn_artworknoteguid'] %}
            <img src="/_entity/annotation/{{ result['track.musdyn_artworknoteguid'] }}" alt="Cover artwork for {{ result['track.musdyn_name'] }} by {{ result['track.musdyn_mainartist'].name }}">
          {% else %}
            <img src="https://songify3.powerappsportals.com/artwork-not-found.svg" alt="Generic music icon, cover artwork not found">
          {% endif %}

If a text field is populated

{% if result.musdyn_artworkguid %}

If a text field from a related record is populated

{% if result['track.musdyn_artworknoteguid'].size %}

If lookup field is populated

{% if result.musdyn_featuring %}

If this record from query A also appears in query B…

This one took me a little longer to master. Here’s the requirement:

The template is listing all tracks on a given playlist (using a fetch XML query called playlist_track)

For each record we loop through in the playlist_tracks query, if the user has already liked the track, display a tick / checkmark icon. Otherwise, show a like button.

So we perform an additional fetch XML query to retrieve all tracks the logged in portal user has previously liked. This query is called liked_songs.

In the example below, we’re checking whether the GUID of the current track in the playlist_tracks query also appears in the liked_songs query:

{% if liked_songs contains result.musdyn_trackid %}
   <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
{% else %}
   <a class="like-track-button" item-name="{{ result.musdyn_name }}" item-guid="{{ result.musdyn_trackid }}" item-entity="Track" href="#" title="Like Button"><span class="glyphicon glyphicon-heart" aria-hidden="true"></a></span>
{% endif %}
Franco Musso

You may also like

2 Comments

  1. Fantastic content, well done!

    Is there anyway to get liquid to call an external api in power pages? It’s possible in shopify I believe but wonderings if so in power pages.

    1. Thanks Kevin 🙂
      We can’t make API calls with Liquid. I’d lean on JavaScript / jQuery with AJAX for that. We also have a native Power Automate connection due later this year that could aid with this.
      Even if it was possible with liquid, the struggle would be that once the page has loaded, the door is closed for anything liquid so we’d still need to use something like Js & AJAX to respond to user events / interactions and load / reload that liquid template

Leave a reply

Your email address will not be published.

More in Power Pages