Get Start with writing Liquid templates in Dynamics PowerApps Portal


Why Liquid is important?

After Adx portal was moved to Dynamics Portal, Most of the customization which was essentially done in Asp.net were forced to be done through Liquid Templates as the Microsoft Stopped providing the .net Solution in the PowerApps Portal which we have now.

What is Liquid?

Liquid is a tag based server-side rendering code.
The Liquid code runs on the server and gets executed before any other Client-side code like HTML, Js and by the time the page loads on the browser the liquid code already gets executed.
So to render anything on your page using Liquid, you need to load your page .


It can be categorized into three components:
1. Objects i.e. {{ }} It works same as print statement.
for e.g. {{ page.title }} It will print the title of the Page
2. Tags i.e. {% %} All the logic and code are written inside it,

{% if user %}
  Hello {{ user.name }}!
{% endif %}

It will print Hello Adam! if user has logged into the portal.


3. Filters i.e. | These are used inside objects and you understand them as a separator between the string which is getting printed and the string operator on that printed statement .
for e.g.

{{ "/my/fancy/url" | append: ".html" }}
{{ "adam!" | capitalize | prepend: "Hello " }}

It will print /my/fancy/url.html and Hello Adam!

What all different variable type we have in Liquid?

Initialization in Liquid is done by assign or Capture Keyword inside tags.

{% assign my_string = "Hello World!" %}

You can initialize the liquid tags with :
1 String as {% assign my_string = “Hello World!” %}
2. Number as {% assign my_int = 25 %} or {% assign my_float = 39.756 %}
3. Boolean as {% assign foo = true %} or {% assign bar = false %}

4. Nil you can assign it, whenever there is nil value returned, Liquid will not print anything
5. Objects as {% assign account = entities.account[user.parentcustomerid.id] %}

Different Operators types we have in Liquid?

Liquids have all the separators we generally have in any other programming languages.
== — equals
!= — does not equal
> — greater than
< — less than
>= — greater than or equal to
<= — less than or equal to
or — logical or
and — logical and

Liquid Control Flow Statements

These control flow can helps in manipulating the data we want in portal
We have all the logic control flow of a programming language.

If Statement
Input

{% if Page.title == "Profile" %}
  {{"We are on profile page!"}}
{% elseif Page.title == "About Us" %}
   {{"We are on About Us Page!"}}
{% else %}
     {{"We are on home Page"} 
{% endif %}

Output

We are on profile page!

unless Statement It is opposite of if statement and executes if and only if a certain condition is not met.
Input

{% unless Page.title == "Profile" %}
  {{"We are not on profile page!"}}
{% endunless %}

Output

These shoes are not awesome.

case/when Statement The switch statement is to do comparison of a variable with different values. case initializes the switch statement, and when compares its values.
Input

{% assign handle = "cake" %}
{% case handle %}
  {% when "cake" %}
     This is a cake
  {% when "cookie" %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}


Output

This is a cake

Above was the basic description of the Liquid code and how to get start.

You can check the Shopify link to get detailed information.

Now Let’s check the Liquid Code for Dynamics Portal

As we mentioned earlier that the Liquid renders on server and get executed before another client-side code (HTML or script). So you will have to be very clear as when and where to write the liquid .
We generally write Liquid in between other client side code(HTML or script),
So in Dynamics we write liquid tags wherever we need to provide dynamics data to our HTML or JavaScript(JQuery).

Here in the below code you can see that we are first loading dynamics content inside the page heading div and then the dynamic page header content in the container div

<div class="container">
    <div class="page-heading">
        {% include 'breadcrumbs' %}
    </div>
    {% include 'page_header' %}
</div>

Same way we can also add liquid tag in between out script code.

<script type="text/javascript">
     location.href= "/{{content.adx_partialurl}}/?id=" + "{{account.id}}";
</script>

And when the page will execute its JavaScript code, the actual code will be like this if you open your developer tool using F12 Button

<script type="text/javascript">
    location.href= "/account-change-request/?id=" + "317fa07b-c112-a3b5-880d-1164710fd6a0";
</script>

Liquid Tags Related to Dynamics Portal.

There are few In-Built Object keywords for Dynamics Portal in Liquid. So before you start developing a web template or any liquid code for portal you need to understand them.
These tags are:

  1. user: This user object refers to the current logged-in portal user which will be your contact record in CRM , So it basically allows you to have access of all the attributes of the contact record.
    user object is only available if some user(contact in crm) has logged into the portal, the below statement is most commonly used in the liquid template to find if user has logged in or not.
    {% if user %}
    //write steps for the logged in user
    {% else %}
    // write steps if no user has signed in
    //you can redirect to sign-in Page
    {% endif %}
    ———————————————————————————————————
  2. page: This page object directly gives you the object of the web-page entity using which you created that portal page and you can get value of all the attribute of that Web-Page entity record.
    If your code is running on home page of the portal then you can query all the attributes of the web-page entity record with name home.
    {{page.title}} will give output Home as the title attribute of the web page entity has value ‘Home’
    ———————————————————————————————————
  3. entities: By using this entity Object Keyword you can directly retrieve the entity record as an object using the Guid of the record.
    You need to use the entity logical-name and then pass the GUID of the record. for e.g.
    {% assign account = entites.account[‘GUID of the record’] %}
    Once you have the account record entity object, then you can fetch any of its attribute from crm. for e.g.
    {% if account %}
    {{ account.name }}
    {% endif %}

    This will display the account name if the account exists.
    ———————————————————————————————————
  4. request: The request object stores the information about the URL of the current portal page.
    Suppose the URL of your current page is : https://www.sanket.com/profile/?foo=1
    The request object has few set of attributes which helps us in retrieving the HTTP request URL. The attributes are:
    url: {{request.url}} will give output as https://www.sanket.com/profile/?foo=1 we can use it as:
    <a href={{ request.url | add_query: ‘foo’, 1 }}>Link</a>
    path: {{request.path}} will give /profile/
    query: {{request.query}} will give foo=1
    path_and_query: This will give /profile/?foo=1
    params: This has been explained in detail below.
    ———————————————————————————————————
  5. params: You can use this params keyword to fetch the parameters passed in the Query-string. I.e. the query part of the current request URL.
    Suppose the URL of your current page is : https://www.sank8sinha.wordpress.com/profile/?foo=1&bar=something
    Then you can retrieve the parameters value using :
    {% assign foo= request.params[‘foo‘] %}
    This will assign the foo value to 1, and you can use that in your liquid code.
    ———————————————————————————————————
  6. snippets: This object allow you to load your content snippet value by providing the name of the content snippet with the snippet object. If a snippet with the given name is not found, null will be returned.
    Syntax for calling snippet: {{ snippets[“Content snippet name”] }}
    ———————————————————————————————————

Other than these objects we have others like sitemap, sitemarkers, weblinks, website and more. For detail information you can check on msdn website.

You can comment back to get more info on other Liquid Objects.
I have shown how to create a portal page using Web-page in my previous blog Click here.
Create one web template to get an idea on how to use these Liquid objects.

Thank you all. 🙂

13 thoughts on “Get Start with writing Liquid templates in Dynamics PowerApps Portal

  1. Hi Sanket

    Can we configure a web page or web template to display different entity lists based on web roles?

    Web-Page1 is currently configured with entity-list-1. I want to continue displaying entity-list-1 as is (right now) for web-role-1 and then add customization to display entity-list-2 for web-role-2

    Thanks,
    Sauda

    Liked by 1 person

    • ok, i accomplished this.

      Now, both of my entity lists have multiple views in them and I need to apply additional filter on each view in the entity list based on a user attribute. can this be done?

      Like

      • No that can’t be done. for that, you will have to iterate through your entity-list view and create a custom data-table based on your condition in if loop.

        Like

      • will that have negative impact on the performance of page load? meaning, will the page load slowly while iterate through each record in the view to decide if it should must be shown/hidden based on user attribute?

        Like

  2. Hi Sanket.
    I’ve 3 entities. Contact, Questions, and Answers. There is a 1:N Relationship between them(Contact to Question(1:N), Question to answer(1:N), Contact to Answer(1:N)) in CDS and I want to create a custom web page where I want to show all the questions and related answers related to the logged-in users contact in the form of Google Question Form. Can we achieve this kind of design in portal?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s