How to show/hide loading spinner in addon sidebar while Google Picker dialog is opened/closed?

Question

I followed this tutorial: https://developers.google.com/apps-script/guides/dialogs#file-open_dialogs and I can open a Google Picker after clicking a button inside my addon s

Answer 1

Issue:

Sidebar and modal dialog are not able to communicate despite having same origin.

Solution:

It is possible to get a reference to the sidebar html from modal dialog through window.top. From there, it is possible to

• directly communicate with each other
• use window.postMessage() to communicate with each other
• use cookies/localstorage to communicate with each other

Without a reference to each other, it is still possible to communicate with each other through

• the server and script properties service. However, Here, one of them needs to poll the server at set intervals to get any updates from the other.

Sample script(using direct access):

addOn.html

  
    
    
    
    
  
  
    
Loading modal dialog...
    

    
  

modalAddOn.html

  
    
    
  
  
    Modal Dialog
    
  

code.gs

function testModal() {
  SpreadsheetApp.getUi().showModelessDialog(
    HtmlService.createHtmlOutputFromFile('modalAddOn')
      .setHeight(500)
      .setWidth(300),
    ' '
  );
}

function onOpen(e) {
  SpreadsheetApp.getUi()
    .createMenu('Sidebar')
    .addItem('Show Add-On', 'showSidebar')
    .addToUi();
}

function showSidebar() {
  SpreadsheetApp.getUi().showSidebar(
    HtmlService.createTemplateFromFile('addOn.html').evaluate()
  );
}

To Read:

• Window#frames
• Window#postMessage
• Same origin policy
• Document#cookie
• Window#storage
• Promises
• PropertiesService

Related questions:

• Where is my iframe in the published web application/sidebar?

• Window#postMessage

• Window#storage

• Origin