March 06, 2018

Using Liquid Templates and FetchXML to Retrieve Data in a Dynamics 365 Online Portal


It is quite easy to expose any Dynamics CRM entity form on the Portal via simple configuration within CRM. The Portal also provides several kinds of client-side validations which can be enabled by updating the form configuration in CRM.

However, one of the major limitations with the current version of the Portal is the inability to call the CRM API to push data into CRM from the Portal using JavaScript.

Portal supports retrieval of data from CRM which can be handled via “Liquid”. Liquid is an open-source language developed by Shopify. CRM Portals Versions 8 and up support Liquid (as do previous versions), which allows us to retrieve and format data on the Portal.

Here I am going to explain in detail how to retrieve ‘Sales Order ‘ details in any of the Web Pages/Entity Forms in Portal.

Step 1: Create the FetchXML query

We can use Advanced Find Query and easily generate the FetchXML from CRM as shown below:

<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
    <entity name="salesorder">
        <attribute name="shipto_name" alias="name" />
        <attribute name="shipto_line1" />
        <attribute name="shipto_line2" />
        <attribute name="shipto_city" />
        <attribute name="new_winery" />
        <order attribute="shipto_name" descending="false" />
        <filter type="and">
            <condition attribute="salesorderid" operator="eq" value="{<GUID>}” />

Step 2: Create the Web Template

Under the Portals tab in Dynamics 365, select Web Templates.

Enter in our Liquid code into the Web Template with our Fetch XML and save.

Name: This is the name of the Web Template.
Website: This pull-down has the list of websites that are active in the portal. Select the website that will be using this FetchXML query.
MIME Type: Enter “JSON” here (no quotes).Its optional.

Line 2: This is a Liquid statement that names the FetchXML query. Please note that I named this FetchXML query ‘ordersReadyToShip’. This line is stating that FetchXML starts here.

Line 3-14: Copy the generated FetchXML here without any modification.

Lines 11: Please note that to use a variable in Liquid we use {{ and }} and we are going to pass the orderid as a query string parameter.

Note : If we want to filter the records based on the logged in user, then we can get the variable using {{}}.Please find below one sample condition for the same.

<filter type="and">
<condition attribute="contactid" operator="eq" uitype="contact" value="{{}}" />

Line 15: Close the FetchXML code that we started in line 3.

• Note after that we have an open square bracket ( [ ). We are going to start getting our data from the FetchXML and put it in the JSON format. This open square bracket is the start of that. It will allow us to return an array of objects. In this example, we are only returning one order but the way the code is written above will work for one object and multiple.

• After the square bracket, we are starting a “for” loop with liquid to get everything returned from the FetchXML query. Notice that we are cycling through the FetchXML query name that we created on line 3(orders) and returning each object as an entity named “result”.

o (% for result in ordersReadyToShip.results.entities %} – orders came from line 3

Line 16-23 is assigning the data that was returned into a JSON object that we create. The format is name:value so on line 18 the name is “street1” and the value is the shipto_line1 returned from our FetchXML and contained in the result entity. Note the quotes and again the liquid double brackets.

Lines 20-21 has something worth pointing out. Because the Winery is a lookup in Dynamics 365, the value returned from the FetchXML needs to define whether we want to have the id or the name returned. In my example, I showed how to retrieve both.

Line 22: Here we are adding a little Liquid logic to add a comma to our JSON format if there is more than one entity (in this case orders) returned. Again, this is to facilitate a query that will return more than one entity if needed.

Line 35: Ending the Liquid for loop. Also finally closing our square bracket (]).

Step 3: Create a Page Template

Under the Portals tab in Dynamics 365, select the Page Templates option.

Name: I use the same name as the web template. We can make it whatever you want.

Website: This pulldown has the list of websites that are active in the portal. Select the website that will be using this FetchXML query.

Type: In this pulldown list, select the Web Template option. (Doing this will make the Web Template field show that we are filling in next.)

Web Template: Select the web template that we created in step 2.

Use Website Header and Footer: Uncheck this if it is selected. It will add the header and footer to the data returned but we only want the JSON data returned.

Description: Add description.

Step 4: Create the Web Page

Under the Portals tab in Dynamics 365 select the Web Pages option.

Name: I use the same name as the web template and page template. It can be whatever we want.

Website: This pull-down has the list of websites that are active in the portal. Select the website that will be using this FetchXML query.

Parent Page: Normally I just use “Home” . This sets the parent page and affects the URL address used to call the fetch XML page.

Partial URL: I always make this the same as the name to avoid confusion.

Note : The value in the ‘partial URL’ field is the URL we would be referring to within our Ajax call, passing the orderid as a QueryString.

Page Template: Select the page template that we created in step 3.

Publishing State: Select “Published” from this pull down to activate this page on the portal.

Hidden From Sitemap: This is further down the page. It is advisable to hide the Fetch query pages from the sitemap.

Step 5: Test our Query

Important – To test our query we need to log into the portal. Login and then go to the URL you created and enter the parameters.

The results can be seen below. It worked, the JSON is returned.

IMPORTANT: If we only see two empty square brackets “ [ ] “ nothing got returned from our query.

  • Double check that the entity we are trying to return is enabled on the portal through security.
  • Check that the person logged in has access to that account. Also, double check our query.

Step 6 : Add Custom JS in Entity Form

Now, we need to go ahead and add script to the Entity Form to make an Ajax call to the Web Page. To do so,

  • Navigate to Portals -> Entity Forms in CRM.
  • Open the relevant Entity Form in CRM and scroll down to the ‘Custom JavaScript’ section.
  • Add the below JS and save it. Refresh the respective Web Page.

function getRequestDetailsfromSalesOrder() {

    var orderid = getQueryStringByName('orderid');//Get the orderid value from Query string
    var url = '/GetOrderDetailsById/?orderid=' + orderid;
        type: "GET",
        url: url,
        dataType: 'json',
        async: false,
        success: function (result) {
            var order = result;
            order.forEach(function (element) {
    }).done(function (json) {

    }).always(function () {


//Function to get the value of a Query String Parameter
 function getQueryStringByName(name, url) {
     if (!url) url = window.location.href;
     name = name.replace(/[\[\]]/g, "\\$&");
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
         results = regex.exec(url);
     if (!results) return null;
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, " "));
  • The values of Name, Address 1 and Address 2 will be populated as shown below.

The combination of Liquid and JavaScript opens a whole new world of possibilities to customize and extend Dynamics CRM Portal functionality.

Leave a Reply

Your email address will not be published. Required fields are marked *