In Part 1 of this series I discussed the basics of Liquid Templates and walked you through how to create a simple Web Template using Liquid Template Language.
Dynamics 365 Portals – Liquid Templates – Part 1 – Hello World!
In this article, I’ll discuss following topics.
- Retrieve a single record
- Retrieve a list of records using include tag with ‘entity_list’
- Retrieve a list of records using entitylist tag
Retrieve a single record
Let’s see how we can retrieve a specific record in Dynamics 365 using Liquid.
Code Snippet
|
1 2 3 4 5 6 7 |
Product Details <p>Product ID (GUID): {{request.params.id}}</p> {% assign product = entities['product'][request.params.id] %} <p>{{product.name}}</p> <p>{{product.productnumber}}</p> <p>{{product.description}}</p> |
In this example, liquid statements are embedded in HTML code. The request object includes certain attributes such as param, path, url, and path_and_query, query.
Params is a dictionary of named parameter values of the current request. For example, if you have a querystring with key called id, the value contains in param.id.
assign product = entities[‘product’][request.params.id]
In this statement, we are saying, go to the product entity and get the record with this ID and assign that record to the object called product.
Now that we have retrieved the product, we can access the attributes of this product record. For example, {{ product.name }} will display the product name.
In my example, the URL is https://mysitename.microsoftcrmportals.com/wp-module2/?id=3022753c-2a69-e711-8177-e0071b7fd0f1 and the output looks like this.
Retrieve a list of records using include tag with ‘entity_list’
In this example, we’ll see how we can display a list of records by accessing the entity list associated with the page.
Code Snippet
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="page-heading"> {% include 'breadcrumbs' %} </div> {% include 'page_header' %} {% include 'page_copy' %} {% if page.adx_entitylist %} {% include 'entity_list' key: page.adx_entitylist.id %} {% endif %} </div> |
There are a couple of interesting things in this example.
Includes the contents of one template in another, by name. In Dynamics 365 portals, the source of this other template will generally be a web template. This allows for the reuse of common template fragments in multiple places.
When a template is included in another, the included template will have access to any variables defined in the parent template.
Refers to the current portal request page. This object combines the attributes of the sitemap and the current request entities (usually a webpage).
The page object provides access to things like the breadcrumbs for the current page, the title or URL of the current page, and any other attributes or related entities of the underlying Dynamics 365 record.
Using the page object you can access the attributes of the Web Page record. page.adx_entitylist is the Entity List record associated with the Web Page.
In include ‘entity_list’ key: page.adx_entitylist.id statement, we are passing the ID of the entity list.
This is the same statement included in OOTB Web Templates such as “Customer Service – My Portal”.
Let’s see what this looks like.
Retrieve a list of records using entitylist tag
Time to get our hands dirty. The OOTB entity_list is nice and easy to use, but it’s just a standard list. What if you want to build something a bit different? For example, you may be building an eCommerce site pulling products records from Dynamics 365. You may want to display them with more colour and different layouts.
Code Snippet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="container"> <div class="page-heading"> {% include 'breadcrumbs' %} </div> {% include 'page_header' %} {% include 'page_copy' %} {% entitylist key: page.adx_entitylist.id %} {% entityview logical_name: 'product' name:'Portal View', page_size:20 %} {% for item in entityview.records %} <item> <div name="content" style="padding: 15px 30px 0 0;"> <h2> {{ item.name }} </h2> <h3> {{ item.productnumber }} </h3> <div name="image" style="width: 300px; float: left; padding: 0 0 0 15px;"> <img src={{ item.producturl }} > </div> <div name="main-content" style="margin-left: 300px; max-width: 800px;"> <p> {{ item.description }} </p> <br /> </div> <div class="clear"></div> </div> </item> {% endfor %} {% endentityview %} {% endentitylist %} </div> |
This example is getting slightly complicated. Here, we are using the entitylist tag to access the entitylist associated with the page. Then we are saying, retrieve the entityview with the name ‘Portal View’ and load 20 records at a time. Then we iterate through the retrieved records and display them according to our custom layout design. You can insert attributes of the item object between HTML elements and within elements. I have inserted the producturl attribute within the img element to set the src attribute. I inserted the description attribute, between the paragraph element.
Note: To provide pagination, additional code is required. I have intentionally kept this example simple as possible. To see an example of where pagination is implemented, please see below.
Below is the parent Web Page record.
Below is the Web Page – Content Page. Note that “Entity List” field is populated.
Below is an example Product record.
Let’s have a look at the output.
In Dynamics 365 Portals – Liquid Templates – Part 3 – Retrieve Data using FetchXML, I’ll demonstrate more advanced examples of using Liquid to retrieve records using FetchXML.
Thank you for visiting Dyn365Apps.com.
Follow me on Twitter to get the latest news, tips and tricks and more …
Until next time…
About the Author
Nadeeja Bomiriya is a Microsoft MVP, Chapter Lead – CRM Saturday – Australia, President – Melbourne Dynamics 365 User Group, Technical Architect, and Dynamics 365 Practice Lead who lives in Melbourne, Australia.