In Dynamics/ Power Platforms world, we use Liquid Templates along with JavaScript in Portal which is a great combination. A cool way to work with client side along with server side. This reminded me of my firsthand web development experience a long ago, using Classic Asp.
Anyway, this combination is strong. We learned CRUD operations using Java Script in past post. When we use Client Side and Sever Side together, there are some limitations as well. Though they work together well, you should not messed up with flow of the code by mixing. Here I am providing few useful snippets long with mistakes a first-timer would do.
1. Liquid values can be used in Java Script.
Good thing is we can set alerts and check the values during development.
{% assign isCurrent = true %}
alert("value of variable is : {{isCurrent}}");
2. Java Script values cannot be passed to Liquid
For example below is NOT WORKING, because we try to use JavaScript value inside Liquide statements.
{% assign Val1 = 100 %}
var Val2 = 200;
{% if Val1 > Val2 %}
{% assign IsVal1Greater = true %}
{% endif %}
3. If we cant use Java Script values in Liquid we need to retrieve server side values of the record we are working with. Hence, below script going to help in retrieving ID of the current record.
Actually, poral pages have Session Id as a part of URL which can be obtained to retrieve current record Id which is stored in Advanced Form Session (adx_webformsession) entity. (** Please don't forget to set permission to this entity through Table Permissions entity entry **)
In fact, this is going to be one of the most used scripts.
{% assign SessionId = request.params['sessionid'] %}
{% fetchxml currId %}
<fetch version="1.0" output-format="xml-platform" mapping="logical">
<entity name="adx_webformsession">
<attribute name="adx_primaryrecordid"></attribute>
<filter type="and">
<condition attribute="adx_webformsessionid" operator="eq" value="{{ SessionId }}" />
</filter>
</entity>
</fetch>
{% endfetchxml %}
{% if currId.results.entities.size == 0 %}
{% else %}
{% assign Id = currId.results.entities[0].adx_primaryrecordid %}
{% endif %}
4. Don't mix Liquid and JavaScript in control flow
In fact, Below is NOT WORKING
if (X > Y) { {% assign myValue = false %} }
5. Below is the generic way of reading the results of a Fetchxml query which is also going to be used frequently.
{% fetchxml office %}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false" no-lock="false">
<entity name="so_office">
<attribute name="so_officenumber"></attribute>
<filter type="and">
<condition attribute="so_officeadmin" operator="eq" value="{{ user.id }}"></condition>
</filter>
</entity>
</fetch>
{% endfetchxml %}
{% if office.results.entities.size == 0 %}
{% assign officeNumber = 0 %}
{% else %}
{% for result in office.results.entities %}
{% assign officeNumber = result.so_officenumber %}
{% endfor %}
{% endif %}
