HOW TO LOAD HTML WEB RESOURCE IN OFFLINE MOBILE

LOAD HTML WEB RESOURCE IN OFFLINE MOBILE

PCF control has recently grown fast last few years, and it is a great option for developing custom add-on, control to extend the function to Microsoft Dynamic Power Platform. However, HTML web resource is still great for some cases. Last few weeks, our current project has an issue that web resource has been working fine in online mobile but it cannot work in offline mode as below image.

We have spent time on investigating and found that the issue happens because it uses relativeURL, it means that it will includes the server url (like https://org.crm6.dynamics.com/webresource/webresourcename). Therefore, it will not available in offline mode, even we configure it for mobile and offline mode as well. How can we tackle this issue, we can apply below simple solution.

1. Add the web resource in the form

2. Instead of navigating directly to the web resource, we can navigate to the form

export const OpenDynamicForm = function () {

    //msdyn_workorderincident&id=b947e8cd-6206-ee11-8f6d-000d3a6ac9e1
    globalFormContext.ui.clearFormNotification("008");
    var woi = globalFormContext.getAttribute("entiyname").getValue() != null ? globalFormContext.getAttribute("entiyname").getValue() : null;
    if (woi == null) {
        globalFormContext.ui.setFormNotification("This booking does not have work order incident.", "WARNING", "008");
        return;
    }
    var pageInput = {

        pageType: "entityrecord",
        entityName: "entiyname",
        formType: 2,
        entityId: woi[0].id),
        formId: "formId"

    };

    var navigationOptions = {
        target: 2,
        position: 1,
        width: { value: 950, unit: "px" }
    };

    Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
        function success(returnValue) {

            console.log(returnValue);
            //successCallback
        },
        function error() {
            // Handle errors
        }
    );
}

You can add the 1 onload function to the form to hide all navigation, command, and header with below code. we are using typescript for this sample.

//Type Script
export const Onload = async function (executionContext: Xrm.ExecutionContext<null, null>) {

    debugger;
    var formContext = <Form.entityname.Main.webresourcename>executionContext.getFormContext(); 
    globalFormContext = <Form.entityname.Main.webresourcename>executionContext.getFormContext(); 
    formContext.ui.headerSection.setCommandBarVisible(false);
    formContext.ui.headerSection.setTabNavigatorVisible(false);
    formContext.ui.headerSection.setBodyVisible(false);

    
}
//JS

    Namespaceofjsfile.Onload = function (executionContext) {
        return __awaiter(this, void 0, void 0, function* () {       
            var formContext = executionContext.getFormContext();
            globalFormContext = executionContext.getFormContext();
            formContext.ui.headerSection.setCommandBarVisible(false);
            formContext.ui.headerSection.setTabNavigatorVisible(false);
            formContext.ui.headerSection.setBodyVisible(false);
           
        });
    };

It will work well in mobile offline mode. Hope that it will be useful