Exploring the Power of Variables in Liquid and Power Pages

Covering the basics - Variables

As a templating language, Liquid offers a rich collection of possibilities for web developers and designers, bringing Dynamics business data to the web. Variables in Liquid enable us to display dynamic content and enable us to implement a certain level of custom logic as well. We'll have a look at some examples on how to work with variables.

Variable Assignment

In Liquid, variables can be assigned values using the {% assign %} tag. For example, let's assign the value "Hello, Nerd!" to the variable greeting:

    
 {% assign greeting = 'Hello, Nerd!' %}
    

Variable Output

Once a variable is assigned a value, it can be outputted using the {{ }} syntax. To display the value of greeting, we can use:

    
 {{ greeting }}
    

Assigning Site Settings

Liquid is powerfull enough to allow you to assign values from site settings to variables. For example, if you need the site setting for inactivity for a logged in user before he is automatically logged out, you can assign it to a variable like this.

    
 {% assign timeLimit = settings['Authentication/ApplicationCookie/ExpireTimeSpan'] %}
 {{ timeLimit  | escape }} 
    

Assigning User Properties

You can reach the logged in user properties in your site. For example, if you want to capture the user property for the user's name, you can assign it to a variable like this.

    
 {% assign userName = user.fullname %}    
  

Assigning Content Snippets

Liquid also allows you to assign a content snippet from the selected language to a variable. For example, you have a content snippet called "Account/SignIn/RememberMeLabel" with a translated string, you can assign it to a variable.

    
 {% assign RememberMeLabel = snippets["Account/SignIn/RememberMeLabel"] %}

Assigning URL Query Strings

If you have query strings in the URL, you can assign them to variables. This is very usefull when building complex templates relating on the users inputs, like ids, page numbers etc.

For example, if you have a query string parameter called "id" in the following 

URL: https://somePowerPagesUrl/somePage/?id=someValueWrittenHere

You can then assign its value to a variable like this.

 
 {% assign requestId = request.params.id %}

Iterating Over Arrays

Liquid allows for looping through arrays using the {% for %} tag. By assigning an array to a variable, you can iterate through its elements and access each item within the loop.

    
  {% assign fruits = ['Apple', 'Banana', 'Orange'] %}
  {% for fruit in fruits %}
    {{ fruit }}
  {% endfor %}
    

This code will output each element of the fruits array, displaying "Apple," "Banana," and "Orange" sequentially.

Conditional Statements

Liquid supports conditional logic using {% if %}, {% elsif %}, and {% else %} tags. Variables can be used to set conditions and control the flow of the template. 

    
  {% if temperature > 30 %}
     It's a hot day!
  {% elsif temperature < 10 %}
    Bundle up, it's chilly!
  {% else %}
    Enjoy the weather!
  {% endif %}
  

In this case, the output will depend on the value of the temperature variable. Based on the value, the template will display the appropriate message.

Filters

Liquid filters allow for the modification of variable output. Filters are appended to variables using the | symbol. This comes in very handy when you're converting a variable from one type to another, and making a string URL-friendly.

  
{{ sentence | capitalize }}  
  

In this case, the capitalize filter will convert the first character of the sentence variable to uppercase.

So in total

Using Liquid variables in Power Pages provide immense flexibility and control over the content and behavior of your templates. This is one of the basic blocks of making Power Pages a full fledged web portal, and not just the sales slides and demos used