CODEWITHSUNDEEP
office-js
Cloud Xu
Cloud Xu

Reputation: 3337

What's the best way to share data across the taskpane and Dialog?

I'm working on an Excel Addin. We have lots of data fetched in the TaskPane and Dialog. So this makes Dialog opening slow, because it is a separate browser session and cannot leverage data already loaded in the TaskPane. I wonder what's the best way to share the session data between TaskPane and Dialog. I could use doc settings store. But those are runtime data, I don't really want to persist them in the document. I tried to use LocalStorage. It worked on Excel Online and mac, but not on Windows. I think they way dialog open in Windows Excel is a completely new browser session. So I'm out of ideas now.

Also, if you have generate suggestions on how to speed up Dialog loading, please let me know.

Upvotes: 3

Views: 1143

Answers (2)

WTFranklin
WTFranklin

Reputation: 2568

sessionStorage has been a good solution for me, so far.

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

This allowed me to store a really big string and access it from the dialog window. Session storage data gets purged when the session expires, which is normally when the browser/tab is closed and local storage wouldn't have to be handled. The dialog window seems to open pretty quickly for me since the data is only fetched as needed, although I'm not sure if the speed is still an issue for you (seeing as this question was asked and answered a couple of years ago and a lot might have changed since then).

Also, I had some success with Andre's answer. It worked pretty well, and reliably, but only as long as I was sending a short enough string. Since I was trying to pass a rather large string to the dialog box I had issues if the string was too big (not sure of the exact size in bytes of the string) and the dialog box would actually say it was off-line when launched and wouldn't render anything.

To me, it seems like it would be fine to lean on browser functionality in this case. Having said that, I'm not sure that this is necessarily the "best" way and and am curious to know if there is a better approach.

Upvotes: 0

Andre Mocke
Andre Mocke

Reputation: 86

Not sure if this would suit you needs but maybe passing it as a JSON data:

  1. Calling the dialog from taskpane

    var jsonData = encodeURIComponent(JSON.stringify(dataToPassToDialog));

Office.context.ui.displayDialogAsync('https://path/to/dialog.html?' + jsonData, 
    // change these to your preference
    { height: 70, width: 20, cache: false },

    function (asyncResult) {

        // note _dlg is globally defined
        _dlg = asyncResult.value; 

        _dlg.addEventHandler(Office.EventType.DialogMessageReceived, 
        processDialogCallback);
    }
);

  2. Then on the dialog form use this function to get the JSON data from the taskpane

    function getJSONFromUrl() {
   var jsonGet = decodeURIComponent(window.location.search.substring(1));
   var jsonGet = jsonGet.substring(0, jsonGet.lastIndexOf("]") + 1);
   return JSON.parse(jsonGet);
}

  3. Finally send data back to the taskpane

    Office.context.ui.messageParent(dataFromDialog);

Upvotes: 1

Related Questions