Pattern for sidebars and dialog boxes

This describes the pattern for sidebars and dialog boxes using the Goa library as described in Oauth2 for Apps Script in a few lines of code (which you should read first for background).

If you have initialized the credentials as described in Goa Setup, you are now ready to set your app for an authentication dialog. If you are using the service account flow there is no need for this. In fact, once you have run this once for you script you won't need to run it again. 
 
Note- Goa now supports automatic dialog and sidebar support - so this might be a better solution Automatic UI support for OAUTH2 Goa dialogs

The pattern


With the doGet() webapp pattern, returning the goa.getConsent() dialog if one is needed, is followed by returning the result of your application as HtmlOutput to be rendered by the published app. 

For a sidebar, the pattern is almost the same, except that another sidebar call is used to render the result as below. 

function sidebarDataStore (e) {
  
  // this is pattern for a WebApp.
  // passing the doGet parameters (or anything else)
  // will ensure they are preservered during the multiple oauth2 processes
  
  // change this to whatever store & credentials name are being used
  var goa = cGoa.GoaApp.createGoa ('DriverDatastore_example',PropertiesService.getScriptProperties()).execute(e);
  
  
  // it's possible that we need consent - this will cause a consent dialog in the sidebar
  if (goa.needsConsent()) {
  
    var html = goa.getConsent()
        .setTitle('oauth2 dialog for ' + goa.getPackage().packageName)
        .setWidth(300);
    
    SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
      
    return;
  }
  

  // this will be executed once a token is done.
  var result = testDataStore (goa.getToken(), goa.getParams() );   
  
  var html = HtmlService.createHtmlOutput (result.getContentText())
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle('app result for ' + goa.getPackage().packageName)
  .setWidth(300);
  
  // use the sidebar to show the app result
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
  .showSidebar(html);
}


Google Auth dialog notes.

When using a sidebar, the consent dialog created by Goa is rendered in the sidebar. When the Google Auth dialog initiates it does so in a separate browser tab. I haven't yet found a way of making that happen in the sidebar, with the result that you get an untidy message in a tab that can just be closed.

The script completed but did not return anything.

If anyone can find a way of closing this tab post-authentication, I'd be interested in your thoughts.


For more like this, see Oauth2 for Apps Script in a few lines of code. Why not join our forumfollow the blog or follow me on twitter to ensure you get updates when they are available. 

You want to learn Google Apps Script?

Learning Apps Script, (and transitioning from VBA) are covered comprehensively in my my book, Going Gas - from VBA to Apps script, All formats are available from O'ReillyAmazon and all good bookshops. You can also read a preview on O'Reilly

If you prefer Video style learning I also have two courses available. also published by O'Reilly.
Google Apps Script for Developers and Google Apps Script for Beginners.


Comments