How to use HtmlService in Gmail add-on using App Script

Viewed 1433

I am creating a Gmail Add-on. The following reference page says - https://developers.google.com/gmail/add-ons/reference/

"Gmail add-ons are built using Apps Script and the many services it provides. You can use any of the Apps Script services when building your add-on"

Basically, I want to have the small screen to pop up on clicking a button in my Gmail add-on.

As of now I have added a button in my section as follows and tied it to an action handler 'htmltest':-

var htmlTest = CardService.newAction().setFunctionName('htmlTest');
var button = CardService.newTextButton().setText("htmlTest").setOnClickAction(htmlTest);
section.addWidget(button);

This is how htmlTest looks like:-

function htmlTest(e){
return HtmlService.createHtmlOutputFromFile('doubleCheck');
}

And this is the doubleCheck.html file I want it to pop up:-

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

But when I click the button it gives a run-time error:- Missing required fields in markup:

Any clues how to use HtmlService while creating Gmail

2 Answers

TL;DR:

To build interfaces for Gmail add-ons, you must use the Card service instead [of the HTML Service].

Quoted from your reference, under HTML service.

For popups, +1 to @akshay who recommended OVERLAY: CardService.newOpenLink().setOpenAs(CardService.OpenAs.OVERLAY), which will "Open as an overlay such as a pop-up". See CardService OpenAs.

Related