Google Workspace Add-ons: Building HTML interface possible? - html

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 ...

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

How do I reference a support file in Google Apps project

Is it possible to use a support file from within the apps script project as a source for iframe in another HTML.
I need to do this as a part of a Web App project in Google Apps Script.
Specifically I need it to work as a menu system which is the same across multiple pages, so that I don't have to repeat the same HTML code over and over again.
Better explained in a picture
Left side menu(buttons) stays the same across pages
There are several ways to accomplish what you are looking (" I don't have to repeat the same HTML code over and over again") but using iframe is not the best way when working with Google Apps Script web applications.
First you have to decide if you want to handle your web application as a multipage or as simple page.
In any case you might find helpful to use templated HTML / scriptlets to pass the code from Google Apps Script .html files to your main html code. If you find yourself scripts hard to start with, then you might use other methods of the HTML Service
Resources
https://developers.google.com/apps-script/guides/html/
https://developers.google.com/apps-script/guides/html/templates
https://developers.google.com/apps-script/reference/html
Related
Use project Javascript and CSS files in a Google Apps Script web app?
Recent related question (no answers at this time, but with comments)
HTML Service: Templated HTML as sidebar
Is it possible to create navigation bar on Google Apps Script?
how to connect a navigation bar (<nav>) with HTML files in google appscript?

Google scripts create new page elements in gmail

I apologize if this is naive, but I couldn't find a succinct answer.
Is it possible to make front end objects (buttons, etc.) appear in someone's gmail inbox using code from a Google script? Or does this require making a browser extension?
I've read the documentation and various tutorials for Google script, but it appears I can only do things like manage settings and send emails, not add entirely new page elements.
Google app scripts overview

How to generate an HTML view in App Script from a Google Sheet

I have a client that uses Google forms to take orders and wants to be able to turn the resulting Sheet into a document of Packing Slips. Being a python person I am currently taking her .tsv and making nice HTML printable docs but want to be able to make a plug-in for her so that on any Sheet of this type she can click "Make Packing Slips" and it either opens a new tab with generated HTML (I'm ok using googles templating) or maybe even convert the HTML into a PDF and save it to her drive? Either way I'd rather design the document all in HTML and CSS rather than trying to make a google doc if at all possible. Is the feasible? Any starting points? Thanks!
You need to learn about Google App Script => https://developers.google.com/apps-script/overview
Then these Links should suffice
HTML Service: Create and Serve HTML
Google Container-bound Scripts for Google App Script (Can not post link for this due to low reputation)

Is there an example of how to add Replace to Google Docs

Is there an example anywhere of how to use the Document apps-script API to add a button to the Google Docs menu, when it is clicked bring up a web page from my web app that prompts the user for 2 strings, then on OK it does a search & replace on the open document?
I don't need to add search/replace per-se. I just figure this is the simplest example of writing an Add-In to Google Docs that edits the open document.
thanks - dave
As it stands, this is not possible. I think this issue (which you might like to star so that you can receive updates in the thread) best describes it. Summary in post #7:
This feature request is to add the same script functionality to a
document as there is in a spreadsheet. ie menu items etc.
A recent video by google (see their blogs) hints that this will be soon available.
In the meantime u can ask for the document url from your published script interface.
If you make a googledrive.com client app you can even use the new goglepicker to select the doc.

apps script dashboard in HtmlService

I saw the dashboard demo, and it looks amazing. Is it possible to embed a dashboard and even charts in a user interface created using HtmlService? Most of the demos are only using UI Services?
As far as I understand for now the only library you are able to use is JQuery and JQuery UI library but I believe the team are adding in more library to support it.