google-apps-scriptgoogle-sheetsweb-applicationsgoogle-docsgoogle-picker

How do I communicate a page(modal dialog) with its sibling (sidebar)?


I'm converting a script of mine to be an add on. One of the needs is to configure a template, so I have programmed a sidebar that launchs a field picker. As the sidebar does not have enough room for the picker, I have to launch it from a modal dialog that I create from the sidebar, by calling this code in the server side:

var html = HtmlService.createHtmlOutputFromFile('TemplatePicker.html')
  .setWidth(600).setHeight(425);
SpreadsheetApp.getUi().showModalDialog(html, 'Select the file with the template');

My problem is that once the user picks the file, when I have the id of the chosen file, I'm not able to pass that id to the sidebar. I tried invoking someJSFunctionOfSidebar(id) and parent.someJSFunctionOfSidebar(id), but it didn't work, so I finally ended passing the value to the server side and reloading the sidebar from there, but it's very slow and the resulting effect is ugly.

My question is:

Is there a way to pass a value at client level from a modal dialog created with SpreadsheetApp.getUi().showModalDialog to its parent? Perhaps it's not really its parent and that's the reason for it not working.


Solution

  • Perhaps it's not really its parent and that's the reason for it not working.

    Right - there isn't actually a DOM parent / child relationship in play here. Both the sidebar and the modal dialog were launched from server-side scripts, and are independent. They can both communicate with the server, though, so you can use a store-and-forward technique to get the result from your picker to the sidebar.

    Basic idea:

    Have a look at How to poll a Google Doc from an add-on for the basic idea of a poller.

    Message Sequence Chart