Execute FetchXML from a Power Pages web template

Dustin Miner

This post presents an example of retrieving data from Dataverse using FetchXML (and Liquid) within a web template. Then displaying this data on a Power Pages web page (via custom JavaScript on a multistep form). Unlike client-side FetchXML, which executes in the browser, this approach runs server-side when the page loads. One benefit of this approach is that the user doesn’t need to wait for the Web API to return with the required data, the data is already available within the DOM

For an example of executing FetchXML on the client-side, have a look at Execute FetchXML from a power pages multistep form

In detail

The process described in the following steps is regarding the population of the Licence Fee’ field displayed in Figure 1.

Figure 1 – The web page ‘New Licence Application’ (containing a multistep form)

Web template

When the web page (Figure 1) loads, the web template (Figure 2)

  • Performs server-side rendering and retrieves the licence fee value from Dataverse
  • Populates the multistep form field ‘LicenceFeeHidden’ (line 17 in Figure 2)
Figure 2 – The web template

Custom JavaScript

  • In the custom JavaScript of a multistep form, the field ‘LicenceFeeHidden’ is retrieved (line 15 Figure 4)
  • The value of ‘LicenceFeeField’ is then set (lines 12 & 21)
Figure 3 – The multistep (General Details) form’s JavaScript
Figure 4 – The web template is referenced in the web page

Appendix

The following Liquid code snippet is an example of FetchXML returning multiple records and storing them in a hidden JSON array (companiesInLicenceApplications) in the DOM

{% fetchxml getCompanyInLicenceApplication %}
    <fetch>
        <entity name="cpl_licenceapplication">
            <attribute name="cpl_name" />
            <attribute name="cpl_companyid" />
            <link-entity name="cpl_company" from="cpl_companyid" to="cpl_companyid" alias="company" link-type="outer">
                <attribute name="cpl_catrnumber" />
            </link-entity>
        </entity>
    </fetch>
{% endfetchxml %}

{% if getCompanyInLicenceApplication.results.entities != empty %}
    {% capture jsonData %}
    [
    {% for licenceApplication in getCompanyInLicenceApplication.results.entities %}
    {
        "LicenceApplicationName": "{{ licenceApplication.cpl_name }}",
        "CompanyName": "{{ licenceApplication.cpl_companyid.Name | default: 'No Company' }}",
        "CompanyId": "{{ licenceApplication.cpl_companyid.Id | default: 'N/A' }}",
        "CompanyLogicalName": "{{ licenceApplication.cpl_companyid.LogicalName | default: 'N/A' }}",
        "CATRNumber": "{{ licenceApplication['company.cpl_catrnumber'] | default: 'N/A' }}"    
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
    ]
    {% endcapture %}
{% else %}
    {% assign jsonData = "[]" %}
    {% capture warningMessage %}
        No company found in FetchXML query. JSON data set to empty array.
    {% endcapture %}
{% endif %}

<script id="companiesInLicenceApplications" type="application/json">
    {{ jsonData }}
</script>
<script>
    console.warn("{{ warningMessage }}");
</script>

The following jQuery code snippet is an example of extracting values from a hidden JSON array in the DOM

function setCATRNumber() {
  try {
    const targetLicenceApplicationName = $("#cpl_licenceapplicationid_name").val();
    var jsonData = parent.$("#companiesInLicenceApplications").text();
    var parsedData = JSON.parse(jsonData);

    if (!Array.isArray(parsedData) || parsedData.length === 0) {
      console.info("The companiesInLicenceApplications doesn't have a name defined");
      return;
    }

    var matchingCompany = parsedData.find(item => item.LicenceApplicationName === targetLicenceApplicationName);
    if (matchingCompany) {
      $("#cpl_companyname").val(matchingCompany.CompanyName);
      $("#cpl_catrnumber").val(matchingCompany.CATRNumber);
    }
  } catch (e) {
    console.error("The following error occured in setCATRNumber = " + e);
  }
}

Further reading

Create a power pages web page

References

https://learn.microsoft.com/en-us/power-pages/configure/web-templates

Post Views: 186

Related Posts