Google Apps Script – custom menu – part 004.

This tutorial is about how to add a custom into your google document using the google app script.
First you need to have one open document and then click into menu : Tools – Script editor …
You will see a new document into your browser with a link like this: https://script.google.com …
This will allow you to create New – Project , Script file , Html file and google documents.
Use the Code.gs like base of script and add this source of code:

function onOpen() {
 // get to use the DocumentApp or FormApp. 
 var ui = SpreadsheetApp.getUi();

  ui.createMenu('Custom Menu')
      .addItem('First item', 'menuItem1')
      .addSeparator()
      .addSubMenu(ui.createMenu('Sub-menu')
          .addItem('Second item', 'menuItem2'))
      .addItem('Show message', 'showMessageBox')
      .addItem('Show dialog', 'showDialog')
      .addToUi();
}

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setWidth(400)
      .setHeight(300);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'My custom dialog');
}

function menuItem1() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
     .alert('You clicked the first menu item!');
}

function menuItem2() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
     .alert('You clicked the second menu item!');
}

function showMessageBox() {
  Browser.msgBox('You clicked it!');
}

function onOpen() {

// get to use the DocumentApp or FormApp.

var ui = SpreadsheetApp.getUi();

ui.createMenu('Custom Menu')

.addItem('First item', 'menuItem1')

.addSeparator()

.addSubMenu(ui.createMenu('Sub-menu')

.addItem('Second item', 'menuItem2'))

.addItem('Show message', 'showMessageBox')

.addItem('Show dialog', 'showDialog')

.addToUi();

}

function showDialog() {

var html = HtmlService.createHtmlOutputFromFile('Page')

.setWidth(400)

.setHeight(300);

SpreadsheetApp.getUi() // Or DocumentApp or FormApp.

.showModalDialog(html, 'My custom dialog');

}

function menuItem1() {

SpreadsheetApp.getUi() // Or DocumentApp or FormApp.

.alert('You clicked the first menu item!');

}

function menuItem2() {

SpreadsheetApp.getUi() // Or DocumentApp or FormApp.

.alert('You clicked the second menu item!');

}

function showMessageBox() {

Browser.msgBox('You clicked it!');

}

Now add this new Html page named Page.html with this source code:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  <hr>
  <input type="button" value="Close" onclick="google.script.host.close()" />
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello, World!

<hr>

</body>

</html>

The result is this:

The base of drawing menu is the onOpen function to create and draw the menu by get the document and create and add menu and submenu with separators. This come with the text of muenu and the functions for each click on menu.

In this example, I used one html page file. That html page is show us by using the showDialog function.
The documentation of Google Apps Script tell us:
The UI service in Google Apps Script provides the ability to build a user interface for displaying or capturing information using user interface elements called widgets.
Overview

Your scripts can create a wide range of user interface elements, including, but not limited to, the following:

Push buttons
Radio buttons
Toggle buttons
Check boxes
Text fields
Labels
Titles
List boxes
Dialog boxes
Panels of many types
And far more elements than it’s possible to list here.
You can also test one edit box example by adding this function and change the onOpen function to show it.

function readText() {
  var ui = SpreadsheetApp.getUi(); // Same variations.

  var result = ui.prompt(
      'Let\'s get to know each other!',
      'Please enter your name:',
      ui.ButtonSet.OK_CANCEL);

  // Process the user's response.
  var button = result.getSelectedButton();
  var text = result.getResponseText();
  if (button == ui.Button.OK) {
    // User clicked "OK".
    ui.alert('Your name is ' + text + '.');
  } else if (button == ui.Button.CANCEL) {
    // User clicked "Cancel".
    ui.alert('I didn\'t get your name.');
  } else if (button == ui.Button.CLOSE) {
    // User clicked X in the title bar.
    ui.alert('You closed the dialog.');
  }
}

function readText() {

var ui = SpreadsheetApp.getUi(); // Same variations.

var result = ui.prompt(

'Let\'s get to know each other!',

'Please enter your name:',

ui.ButtonSet.OK_CANCEL);

// Process the user's response.

var button = result.getSelectedButton();

var text = result.getResponseText();

if (button == ui.Button.OK) {

// User clicked "OK".

ui.alert('Your name is ' + text + '.');

} else if (button == ui.Button.CANCEL) {

// User clicked "Cancel".

ui.alert('I didn\'t get your name.');

} else if (button == ui.Button.CLOSE) {

// User clicked X in the title bar.

ui.alert('You closed the dialog.');

}