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.

上一章目录下一章