Google Workspace Add-ons: Building HTML interface possible?

Viewed 591

lately I am trying to figure out how to create an Google Workspace Add On that is able to show an iFrame. I started checking out the documentations of Google Apps Script and Google Add Ons.

So far I know, that I need to use the Card Service of Google to build Add ons. Here is the link: https://developers.google.com/apps-script/reference/card-service

Actually, I just tried to figure out if any class or function of the Card Service can handle HTML Output or HTML file but ...

And so far I could figure out that you can build a bound script (only for Editor Add ons that is not in my interest) that is able to build HTML interfaces but I need this for standalone scripts that I can publish later as Add ons.

Also don't understand: Building a standalone script, why can I create HTML files when I am not able to use or display them?

After looong searching I would be glad if someone could enlight me ...

2 Answers

You have to use CardService for Workspace Add-ons.

Only Editor add-ons (and Web Apps) allow for building custom interfaces with HTML/CSS and client-side javascript. Moreover, if User-Privacy and Anti-Trust laws/legislation keep gaining traction(GDPR, CCPA, etc.), there's a good chance we'll lose even that, but I digress.

If you're looking for official documentation on the matter, see Restrictions

You can try making a web app on the same GCP project then add your web app link to a Card button that opens it up as an overlay

var webAppOverlay = CardService.newOpenLink()
    .setOpenAs(CardService.OpenAs.OVERLAY)
    .setUrl("Your web app link")

var textButton = CardService.newTextButton()
    .setText("Web App")  
    .setOpenLink(webAppOverlay);

var card = CardService.newCardBuilder()
    .addSection(CardService.newCardSection()
        .addWidget(textButton)
    .build();
Related