Dynamic Liquid Template in Portal

(0) Share

Report

Posted on by Hayden Yang

Hi,

The feature I'm trying to achieve here is,

1) User select parent Industry

2) Based on user's selection it shows parent's child Industry

Currently, there is a web template which include following fetchxml for parent industry.

{% fetchxml lgaFetch %}
<fetch mapping="logical" distinct="true">
    <entity name="sab_industry">
...
    </entity></fetch>
{% endfetchxml %}
Is is possible create dynamic fetchxml based on user selection?
If I can use Xrm.WebApi object then I can easily implement as follows.
However from my understanding Xrm.WebApi is only available in the form not web template for Portal ( Correct me If i'm wrong )
    function showChildIndustry(value) {        
        var text = $("#parentindustryselect option:selected").text();
        $("#txtIndustry").val(text+" - "+value);
        
        var fetchXml = "<fetch> " +
            "  <entity name='sab_industry' > " +
            "    <attribute name='sab_name' /> " +
            "    <attribute name='sab_parentindustry' /> " +
            "    <attribute name='sab_code' /> " +
            "    <attribute name='sab_industryid' /> " +
            "    <filter type='and'> " +
            "      <condition attribute='sab_name' operator='eq' uiname='"+text+"' uitype='sab_industry' value='"+value+"'/> " +
            "       <condition attribute='statecode' operator='eq' value='0' /> " +
            "    </filter> " +
            "  </entity> " +
            "</fetch>";

        Xrm.WebApi.retrieveMultipleRecords("sab_industry", "?fetchXml=" + fetchXml).then(
            function success(result) {
                alert("Child Indrustry length : +"result.entities.length);
                for (var i = 0; i < result.entities.length; i++) {

                }
            },
            
            function (error) {
                console.log(error.message);                
            });
        }
    }
Thanks.

I have the same question (0)

All responses (2)

Answers (1)

Verified answer

oliver.rodrigues 4,052 on at

Like (1)

Report

Hi, you are right in regards the XRM object, we can't use it in the Portals

In you scenario, how does the user select the parent industry, and what happens after?

if you are redirected to a different page, you can just run your fetch filtered by the parent

another (ugly) option would be having a join in your fetch retrieving both parent and child, and use Liquid filters, grouping the items in your initial list list, and then re-referencing the same list to display the children - docs.microsoft.com/.../liquid-filters

another option if you are using JavaScript is instead of having liquid/fetch for the children you can consider using oData

you can enable oData from an entity list and access that via JS - docs.microsoft.com/.../liquid-filters

www.inogic.com/.../

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
Hayden Yang 15 on at

Like (1)

Report

Hi Oliver, I solved it using oData my co-worker advised me like you mentioned.

>In you scenario, how does the user select the parent industry, and what happens after?

My Web Template has a fetchxml and javascript, when it loads it trigger fetchxml to get parent industry then it show parent dropdown list as follows.

<div class="col-sm-10">

<select id="parentindustryselect" class="form-control picklist" name="parentindustryname" onchange="showChildIndustry(value);">

{% if parentIndustryResults.size > 0 %}

{% for parentIndustry in parentIndustryResults %}

<option value="%{{parentIndustry.sab_industryid}}%">{{ parentIndustry.sab_name }}</option>

{% endfor %}

{% endif %}

</select>

</div>

When user select one of the parent industry, child industry select dropdown list needs to be populated.

What I did when form is ready get all child industry using oData then based on user selection, filtered it by parent industry and binding the result to child industry select dropdown element.

    var allChildInustry = null;

    $(document).ready(function () {
        ...
       $.ajax({
           type: "get",
           url: "/_odata/industries_child_odata",
           success: function (data) {
               allChildInustry = data.value;
           },
           error: function () {
               alert('Failed to retrieve all child industry');
           }
       });
    });

...

function showChildIndustry(value) {
   var name = $("#parentindustryselect option:selected").text();

   // I can't use jQuery's grep and even filter function don't know why.
   // var filterValue = $.grep(allChildInustry, function (child) {
   //     return child.sab_parentindustry.Id === value && child.sab_parentindustry.Name === name;
   // });

   // var filterValue = allChildInustry.filter(function (child) {
   //     return child.sab_parentindustry.Id === value && child.sab_parentindustry.Name === name;
   // });

   var filterValue = [];
   for (var i = 0; i < allChildInustry.length; i++) {
       var child = allChildInustry[i];
       if (child.sab_parentindustry.Name === name) {
           filterValue.push(child);
       }
   }

   $('#childindustryselect').empty();
   for (var i = 0; i < filterValue.length; i++) {
       console.log(filterValue[i].sab_name + " ::::: " + filterValue[i].sab_industryid);
       $('#childindustryselect').append('<option value=' + filterValue[i].sab_industryid + '>' + filterValue[i].sab_name + '</option>');
   }
}

However, after selecting child industry and other criteria, it needs to show final result. It could be another fetchxml call or etc.

Anyway thanks a lot Oliver.

Was this reply helpful? Yes No