.: Using sessionStorage to Pass Values Between HTML Web Resource and D365 Form

In Dynamics 365, you often embed HTML web resources within forms to capture or display additional data. Sometimes, you need to pass values between these web resources and the main form. For example, Amy’s scenario involved preserving the active tab on a booking record after the signature capture form refreshes the parent form.

Below is an article that introduces using sessionStorage to pass values bidirectionally between an HTML web resource and a D365 main form, along with example code.

Overview

sessionStorage is a browser-based storage mechanism that allows you to persist data for the duration of the page session. It is not exclusive to Dynamics 365—any browser environment can use it for temporary storage. In D365, sessionStorage can be used to transfer values between HTML web resources and the main form because both share the same domain context.

Scenario

In this scenario, the signature capture HTML web resource needs to refresh the parent form (booking record) while keeping the focus on the Signature Capture tab. The solution involves:

Before Refresh: Storing the active tab’s logical name (in this example, "SignatureCapture") in sessionStorage.
After Refresh: Retrieving the stored value on the main form's onLoad event and setting focus to that tab.

Implementation

HTML Web Resource Code

The following code is used in the HTML web resource. It stores the active tab value in sessionStorage and refreshes the parent form.

/**
 * Refreshes the parent form while preserving the active tab.
 * Stores the current active tab's logical name ("SignatureCapture") in sessionStorage.
 */
function refreshParentForm()
{
    sessionStorage.setItem("activeTab", "SignatureCapture");
    parent.location.reload();
}

Main Form Code (OnLoad Event)

On the main form (booking record), the onLoad event handler retrieves the active tab from sessionStorage and sets focus accordingly.

/**
 * OnLoad event handler for the booking record form.
 * Retrieves the stored active tab from sessionStorage and sets focus to it.
 */
function setActiveTabOnLoad(executionContext)
{
    var formContext = executionContext.getFormContext();
    var activeTab = sessionStorage.getItem("activeTab");
    if (activeTab && formContext.ui && formContext.ui.tabs)
    {
        var tab = formContext.ui.tabs.get(activeTab);
        if (tab)
        {
            tab.setFocus();
        }
    }
    sessionStorage.removeItem("activeTab");
}

Key Points

Bidirectional Communication:
The same sessionStorage mechanism can be used by both the HTML web resource and the D365 main form. This enables you to pass values in either direction as long as both are running within the same browser session and domain.
Persistence:
sessionStorage persists until the browser session ends (i.e., until the tab or window is closed). Refreshing the page—whether by a normal or hard refresh—does not clear the sessionStorage values. Dynamics 365 refresh APIs such as parent.location.reload() or the XRM API for refreshing the form do not clear sessionStorage.
Browser Feature:
Remember, sessionStorage is a browser feature and not exclusive to Dynamics 365. It can also be used in other environments like Power Pages (formerly portals).

Conclusion

Using sessionStorage in Dynamics 365 enables seamless value passing between an HTML web resource and a main form. By storing values such as the active tab’s logical name before a refresh and retrieving it after the refresh, you can maintain state across page reloads. This approach leverages the browser’s built-in capabilities, ensuring a smooth user experience across different components of your D365 solution.

.