What is Liquid?
Liquid is a template language that lets you build html pages dynamically. The way it works is, you can put placeholders inside your regular HTML. These placeholders will be replaced by proper content before the page is rendered. This strategy eliminates the need for static pages as templates can be used instead.
There are two types of placeholders, one that simply spits out data and other which runs at server-side. Double handle bars {{ }} represents placeholders that will spit out data, and server-side placeholders are enclosed by {% %} called as Tags. Liquid can be compared to a language as it provides basic concepts and constraints that a typical programming language, such as For loop, if-then-else, assignments, etc.
Liquid inside CRM?
Liquid was originally written in Ruby by Shopify which was later converted to an open source platform. Its translation to .Net is called Dot Liquid which is also an open source project. Dot Liquid Template Engine is made available inside Dynamics 365 Portals, which means Liquid templates can be used to build dynamic content on any HTML resource such as Web Templates, Web Pages, Code Snippets, even JavaScript.
Hands on Lab with Liquid CRM
Let’s start with a traditional “Hello World” sample. We are going to print the name of a user in Home Page header. If user is not logged in then it should say Hello Guest. If not for Liquid CRM, then we would do this by JavaScript making ajax call to CRM endpoint and then formatting the result to get name of the logged in user. With Liquid CRM, this can be done in literally 2-5 lines of code.
Let’s step through the code line by line. First line of code refers to ‘user’, what is it exactly? Is a variable declared somewhere? Is it in-built? Yes, it is one of the many liquid objects that are available to be used directly. User object gives back a ‘Contact’ entity of logged in user or null if no user is signed in. As I stated above, anything inside {% %} is sent to the server and processed there. If-then-else works just like it sounds, if a condition is true then do A and if not then do B. I call {{ }} as text-spitter, it gets replaced by dynamic content.
If I am logged in CRM portal then the output will be:
Hello Minal Wad
If not logged in then:
Hello Guest
Exercise: Repeat 3 times in your head – We will not see any of the text written inside {% %} as this is what is sent to the server and is not rendered back as HTML by itself. Great!
Next, since we want this to display in the header, I am going to put it on Home Web Page.
Navigate to Web Pages, Home
Click the Content view to pure HTML. HTML is a big block of text in a minimized version, no spaces. You can use HTML formatter tool to get it aligned when making changes. Put your custom code and save the changes using ‘Save’ image on right bottom of the screen. (Yes, so very not intuitive!)
You may have to restart the portal for changes to take into effect especially if you are changing web templates. Also consider giving Entity permissions to the entity accessed through Liquid.
This is a basic run through of using Liquid inside CRM. In real life projects, we have to do more complex stuff than printing name of the user, but this should get you started.
