Execute FetchXML from a Power Pages multistep form

This post presents an example of retrieving data (via FetchXML on a multistep form) from Dataverse. This retrieval being triggered by a user updating the Provider Id in Figure 1 of the multistep form

For an example of executing FetchXML on the server side, have a look at Execute FetchXML from a power pages web template. If all the required data can be retrieved on form load and hidden in the DOM, then this is a better approach.

Setup

Create site settings (Figure 2) to give permission for the Web API to interact with the cpl_licence table. (The logged in user will also need the cpl_licence read privilege.) Note, if performing a Web API GET without a filter in the FetchXML, set disableodatafilter to false. This will improve performance

Test to confirm (Figure 3) that the logged in user now has access to execute the Web API for the cpl_licence table

Create the FetchXML statement (see the highlighted code snippet below) which resides in the ‘General Details’ Form Step. The ‘Dataverse REST Builder’ in the XrmToolBox can be used to achieve this. (The enumerated types have been created in a web file which isn’t referenced in this post.)

$(document).ready(function () {
   $(“#cpl_providerid”).change(function() {
       setApplicationType();
   });
});

async function setApplicationType() {
    const providerId = $(“#cpl_providerid”).val().trim();
    try {
        if (providerId) {

            let fetchXmlQuery = encodeURIComponent(`<fetch><entity name=”cpl_licence”><filter>
                <condition attribute=”cpl_providerid” operator=”eq” value=”${providerId}” />
                <condition attribute=”statuscode” operator=”eq” value=”${LicenceStatus.ACTIVE}” />
                <condition attribute=”cpl_licenceexpirydate” operator=”next-x-months” value=”3″ />
            </filter></entity></fetch>`);

            let spinnerTimeout = setTimeout(() => {
                $(“#spinnerlicenceapplication”).show();
            }, 300);
            
            let response = await fetch(“/_api/cpl_licences?fetchXml=” + fetchXmlQuery, {
                method: “GET”,
                headers: {
                    “Content-Type”: “application/json”
                }
            });            
            
            if (response.ok) {
                let data = await response.json();
                if (!data.value.length) {
                    console.info(“The provider doesn’t have an active licence”);
                    $(“#cpl_applicationtype”).val(ApplicationType.INITIAL_LICENCE);
                } else {
                    console.info(“The provider has an active licence”);
                    $(“#cpl_applicationtype”).val(ApplicationType.FURTHER_LICENCE);
                }
            } else {
                console.error(`Fetch failed: ${response.status} – ${response.statusText}`);
            }
        }
    } catch (e) {
       console.error(“The following error occurred in setApplicationType = ” + e);
    } finally {
        clearTimeout(spinnerTimeout);
        $(“#spinnerlicenceapplication”).hide();
    }
}

$(document).ready(function () {
   $("#cpl_providerid").change(function() {
       setApplicationType();
   });
});

async function setApplicationType() {
    const providerId = $("#cpl_providerid").val().trim();
    try {
        if (providerId) {

            let fetchXmlQuery = encodeURIComponent(`<fetch><entity name="cpl_licence"><filter>
                <condition attribute="cpl_providerid" operator="eq" value="${providerId}" />
                <condition attribute="statuscode" operator="eq" value="${LicenceStatus.ACTIVE}" />
                <condition attribute="cpl_licenceexpirydate" operator="next-x-months" value="3" />
            </filter></entity></fetch>`);

            let spinnerTimeout = setTimeout(() => {
                $("#spinnerlicenceapplication").show();
            }, 300);
            
            let response = await fetch("/_api/cpl_licences?fetchXml=" + fetchXmlQuery, {
                method: "GET",
                headers: {
                    "Content-Type": "application/json"
                }
            });            
            
            if (response.ok) {
                let data = await response.json();
                if (!data.value.length) {
                    console.info("The provider doesn't have an active licence");
                    $("#cpl_applicationtype").val(ApplicationType.INITIAL_LICENCE);
                } else {
                    console.info("The provider has an active licence");
                    $("#cpl_applicationtype").val(ApplicationType.FURTHER_LICENCE);
                }
            } else {
                console.error(`Fetch failed: ${response.status} - ${response.statusText}`);
            }
        }
    } catch (e) {
       console.error("The following error occurred in setApplicationType = " + e);
    } finally {
        clearTimeout(spinnerTimeout);
        $("#spinnerlicenceapplication").hide();
    }
}