DEMOS Source Code (Async Web Client Capabilities on Model-Driven-Apps/Malaysia D365 & Power Platform User Group - October 2021 Meetup)

AsyncScriptTraining.js

function onLoad(executionContext) {
    var formContext = executionContext.getFormContext();
    //DEMO 1
    //formContext.getAttribute('firstname').addOnChange(displayDialogAfter5Secondes);
    //DEMO 2
    formContext.data.entity.addOnSave(validatePhoneNumber);
    //DEMO 4
    //formContext.ui.addOnLoad(applyForm);
}
//DEMO 1
//BAD EXAMPLE
function displayDialogAfter5Secondes() {
    const sleep = (time) => { return new Promise((resolve) => setTimeout(resolve, time)) };
    sleep(5000).then(() => {
        var alertStrings = { confirmButtonLabel: 'Yes', text: 'First Name is Changed' };
        var alertOptions = { height: 120, width: 260 };
        console.log("openAlertDialog");
        Xrm.Navigation.openAlertDialog(alertStrings, alertOptions);
    })
}
//Enable Async OnSave Event
/*
fetch(window.origin + "/api/data/v9.1/SaveSettingValue()", {
    method: "POST",
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ AppUniqueName: "Your app unique name", SettingName: "AsyncOnSave", Value: "true" })
})
*/

//DEMO 2
async function validatePhoneNumber(executionContext) {
    var formContext = executionContext.getFormContext();
    var phoneNumber = formContext.getControl('telephone1').getValue();
    
    //prevent the save after the timeout...
    executionContext.getEventArgs().preventDefaultOnError();
    
    if (phoneNumber != null) {
        const callCloudFlow = async (phoneNumber) => {
            const response = await fetch("https://prod-07.francecentral.logic.azure.com:443/workflows/2c2e670715bf47dcb6c792fd6c670a93/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=93yxZESA0HTO-cDWIPqg1JMDDsR45diU__Gs9lL75Ao", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ "phonenumber": phoneNumber })
            });
            return response.json();
        }
        var r = await callCloudFlow();
        if (r.result) {
            formContext.data.entity.addOnPostSave(postSaveHandler)
        } else {
            executionContext.getEventArgs().preventDefault();
            var alertStrings = { confirmButtonLabel: 'Yes', text: 'Save is Canceled After Cloud Flow Validation' };
            var alertOptions = { height: 120, width: 260 };
            Xrm.Navigation.openAlertDialog(alertStrings, alertOptions);
            var formContext = executionContext.getFormContext();
        }
    }
}
function postSaveHandler(executionContext) {
    if (executionContext.getEventArgs().getIsSaveSuccess()) {
        var alertStrings = { confirmButtonLabel: 'Yes', text: 'Record is Saved After Cloud Flow Validation' };
        var alertOptions = { height: 120, width: 260 };
        Xrm.Navigation.openAlertDialog(alertStrings, alertOptions);
        var formContext = executionContext.getFormContext();
        formContext.data.entity.removeOnPostSave(postSaveHandler);
    }
}

//DEMO (3)
function asyncEnableRule(primaryControl) {
    return new Promise(function (resolve, reject) {
        var formContext = primaryControl;
        var phoneNumber = formContext.getControl('telephone1').getValue();
        if (phoneNumber != null) {
            const callCloudFlow = async (phoneNumber) => {
                const response = await fetch("https://prod-07.francecentral.logic.azure.com:443/workflows/2c2e670715bf47dcb6c792fd6c670a93/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=93yxZESA0HTO-cDWIPqg1JMDDsR45diU__Gs9lL75Ao", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ "phonenumber": phoneNumber })
                });
                return response.json();
            }
            callCloudFlow().then((r) => {
                if (r.result) {
                    //Show the button
                    resolve()
                }
                else {
                    //Hide the button
                    return reject();
                }
            });

        }
    });
}

//Enable Async OnLoad Event
/*
fetch(window.origin + "/api/data/v9.1/SaveSettingValue()", {
    method: "POST",
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ AppUniqueName: "Your app unique name", SettingName: "AsyncOnLoad", Value: "true" })
})
*/

//DEMO (4)
function applyForm(executionContext) {
    return new Promise((resolve, reject) => {
        var formContext = executionContext.getFormContext();
        var firstName = formContext.getAttribute('firstname').getValue();
        if (firstName == "DEMO 4") {
            setTimeout(() => {
                var formItem = formContext.ui.formSelector.items.get(1);
                console.log(formItem);
                formItem.navigate();
                resolve("ok");
            }, 0000)
        } else {
            resolve("ok");
        }
    });
}