Execute FetchXML from a Power Pages web template

Dustin Miner

This post presents an example of retrieving data (via FetchXML in a web template) from Dataverse and displaying the data on a Power Pages web page (via custom JavaScript on a multistep form). This retrieval being triggered when the web page loads, with the FetchXML being executed on the server

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

Web template

When the multistep form (Figure 1) loads, the web template (Figure 2)

  • Performs server-side rendering and retrieves the licence fee value from Dataverse
  • (It then) populates the multistep form field ‘LicenceFeeHidden’ (line 17 in Figure 2)

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 20 & 29)
Figure 1 – The multistep form
Figure 2 – The web template
Figure 3 – The web template is referenced in the web page
Figure 4 – The multistep (General Details) form’s JavaScript

Appendix

The following Liquid code snippet is an example of FetchXML returning multiple records and storing them in a hidden JSON array 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'] | '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="companysInLicenceApplications" 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.$("#companysInLicenceApplications").text();
    var parsedData = JSON.parse(jsonData);

    if (!Array.isArray(parsedData) || parsedData.length === 0) {
      console.info("The companysInLicenceApplications 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: 116

Related Posts