Templated HTML in the Google Addon Sidebar

Google Editor Addons are legacy Addons (as opposed to the newer Google Workspace Addons) that work in a specific Google Application: Sheets, Docs, or Slides. They are a great introduction into creating Addons. They use regular HTML so there is a lower barrier to entry. I worked for my first bunch of years developing these types of Addons before moving onto the Card Service based GWAOs. I have different coding chops now than I did before so I wanted to integrate some Templated HTML in the sidebar and figured I should blog about it!

The Google Workspace Developer Docs are a great resource and have some nice projects to get started. Here is the info on Templated HTML: https://developers.google.com/apps-script/guides/html/templates

I stumbled around a bit at first (and still might be ;) and here is how I finally wrapped my head around it.

There are 2 components to coding with Google Apps Script, the server side and the 'front-end' or 'client-side'. The client side in this case is either a sidebar or a modal dialog. I usually use a Sidebar but the modal dialog has its use cases.

The server side is the Apps Script code that runs to power it all. I use the built-in Apps Script IDE for all my Addon development but there are others that like to run in other environments.

For this basic example we have 2 files, our Code.gs (server) and our Sidebar (client side):

Lets dig into each. The Sidebar is the html that we will serve. It is more basic with just some html code and a scriptlet that we will use in our Templated HTML Notice that we put in the scriptlet, it will later be replaced with our data on the server side: <?= templateStatement ?>

The Code file starts out with a boiler-plate function that shows the Addon menu giving me a choice to open the sidebar. The showSidebar function is where the magic happens. The first thing we do is use the HTMLService to create a template. Then we set the data that we want to pass to different values in the template (that we created with our scriplet in the HTML). In this case we create string that we want to pass into the template. Now that is evaluated we want to do 1 extra step to create a Title on that sidebar.

Here is the final result when we render that templated HTML on the client side (the Sidebar)

Here is a Github Repository with the Code so you can have a play yourself: https://github.com/AutomagicalApps/Google-Editor-Addon-Templated-HTML

Please let me know if you have any questions! In the next blog I will add some more complexity so we can update the Sidebar after running some functions.