- Learning Google Apps Script
- Ramalingam Ganapathy
- 199字
- 2021-07-16 12:40:04
Creating an Add-ons menu
In the previous task, you included the HTML code inline as a string argument to the createHtmlOutput
method. Alternatively, you can put this HTML snippet in a separate HTML file.
To create a new HTML file, in the script editor, go to File | New | Html file, as shown in the following screenshot:

Then in the Create File box, enter your preferred name for the new HTML file. For this task, enter Index
and click on the OK button. The .html
extension will be added automatically.

A new Index.html
file will be created with a few lines of default HTML code, as shown in the following screenshot:

Insert your button
tags between the body
tags as shown here:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button onclick="alert('Hello World!');">Click Me</button>
</body>
</html>
Insert the code shown here in the Code.gs
file:
function onOpen(){ DocumentApp.getUi() .createAddonMenu() .addItem("Show Sidebar", "showSidebar") .addToUi(); } function showSidebar() { DocumentApp.getUi() .showSidebar( HtmlService.createHtmlOutputFromFile('Index') .setTitle('Greetings') ); }
To test the code, run the onOpen
function or reload the document. In the Add-ons menu, a new item, called Chapter 2 (the project name), will be added, as shown here:

Show Sidebar is the label for the showSidebar
function; click on it to show your sidebar.
- Instant Node Package Manager
- INSTANT Sencha Touch
- 名師講壇:Java微服務(wù)架構(gòu)實戰(zhàn)(SpringBoot+SpringCloud+Docker+RabbitMQ)
- Java應(yīng)用開發(fā)技術(shù)實例教程
- TypeScript項目開發(fā)實戰(zhàn)
- iOS開發(fā)實戰(zhàn):從入門到上架App Store(第2版) (移動開發(fā)叢書)
- Spring 5 Design Patterns
- Python程序設(shè)計開發(fā)寶典
- 金融商業(yè)數(shù)據(jù)分析:基于Python和SAS
- 關(guān)系數(shù)據(jù)庫與SQL Server 2012(第3版)
- 從零開始學(xué)Unity游戲開發(fā):場景+角色+腳本+交互+體驗+效果+發(fā)布
- Mastering Assembly Programming
- C#程序開發(fā)教程
- 信息安全技術(shù)(第2版)
- React Router Quick Start Guide