Create dropdown in Document

Question

I would like to create a dropdown list in a popup using Google Drive Word document. I'm using this example:

 function doGet() {
   var app = UiApp.createApplication();
   var panel = app.createVerticalPanel();
   panel.add(app.createButton("button 1"));
   panel.add(app.createButton("button 2"));
   app.add(panel);
   return app;
 }

When executing the script, nothing happens, i cannot see the popup anywhere?

What am i doing wrong?

Answer 1

You can't render UiApp elements within a Document on Drive, only in a Spreadsheet, Site, or published Web-App.

This is noted here: https://developers.google.com/apps-script/guides/ui-service#Overview

You can confirm this is the issue by trying the same script in a Spreadsheet.

Answer 2

doGet() isn't what you need to use. You need to use function onOpen() { code };

When you create a NEW Google Doc, and choose TOOLS, SCRIPT EDITOR, a list of all the sample scripts will pop up. If you choose a script for a DOC, you will get sample code. Just save the sample scripts, close the new doc, then open it up again. You'll see a menu item named SAMPLE.

That code doesn't cause a pop-up when the doc opens, but you should be able to just run whatever part of the code causes the alert, or side bar, whatever you want to show when the document opens.

Here is the official sample code:

/**
 * The onOpen function runs automatically when the Google Docs document is
 * opened. Use it to add custom menus to Google Docs that allow the user to run
 * custom scripts. For more information, please consult the following two
 * resources.
 *
 * Extending Google Docs developer guide:
 *     https://developers.google.com/apps-script/guides/docs
 *
 * Document service reference documentation:
 *     https://developers.google.com/apps-script/reference/document/
 */
function onOpen() {
  // Add a menu with some items, some separators, and a sub-menu.
  DocumentApp.getUi().createMenu('Sample')
      .addItem('Show alert', 'showAlert')
      .addItem('Show prompt', 'showPrompt')
      .addSeparator()
      .addItem('Show dialog', 'showDialog')
      .addItem('Show sidebar', 'showSidebar')
      .addSeparator()
      .addSubMenu(DocumentApp.getUi().createMenu('Document interaction')
          .addItem('Search and replace', 'searchAndReplace')
          .addItem('Insert at cursor', 'insertAtCursor')
          .addItem('Turn selection purple', 'turnSelectionPurple')
          .addItem('Create report in document', 'createReport'))
      .addToUi();
}


/**
 * Shows a message box in the Google Docs editor.
 */
function showAlert() {
  // Displays a dialog box with "Yes" and "No" buttons. Script execution will be
  // halted until the dialog is dismissed.
  var result = DocumentApp.getUi().alert(
      'Dialog title',
      'Are you sure you want to continue?',
      DocumentApp.getUi().ButtonSet.YES_NO);

  // Process the user's response.
  if (result == DocumentApp.getUi().Button.YES) {
    // The user clicked the "Yes" button.
    DocumentApp.getUi().alert('Proceeding with the operation...');
  } else {
    // The user clicked the "No" button or the dialog's close button.
    DocumentApp.getUi().alert('Canceling the operation...');
  }
}


/**
 * Shows an input box in the Google Docs editor.
 */
function showPrompt() {
  // Displays a dialog box with "OK" and "Cancel" buttons, as well as a text box
  // allowing the user to enter a response to a question.
  var result = DocumentApp.getUi().prompt('Upgrade your user experience!',
      'Please enter your name:', DocumentApp.getUi().ButtonSet.OK_CANCEL);

  // Process the user's response:
  if (result.getSelectedButton() == DocumentApp.getUi().Button.OK) {
    // The user clicked the "OK" button.
    DocumentApp.getUi().alert('The user\'s name is ' +
        result.getResponseText() + '. (And what a lovely name that is!)');
  } else if (result.getSelectedButton() == DocumentApp.getUi().Button.CANCEL) {
    // The user clicked the "Cancel" button.
    DocumentApp.getUi().alert('The user didn\'t want to provide a name.');
  } else if (result.getSelectedButton() == DocumentApp.getUi().Button.CLOSE) {
    // The user clicked the dialog's close button.
    DocumentApp.getUi().alert(
        'The user clicked the close button in the dialog\'s title bar.');
  }
}


/**
 * Shows a custom HTML user interface in a dialog above the Google Docs editor.
 */
function showDialog() {
  DocumentApp.getUi().showDialog(
      HtmlService
          .createHtmlOutput('<p>Hello from Google Apps Script!</p>')
          .setTitle('My custom dialog')
          .setWidth(400 /* pixels */)
          .setHeight(300 /* pixels */));
}


/**
 * Shows a custom HTML user interface in a sidebar in the Google Docs editor.
 */
function showSidebar() {
  DocumentApp.getUi().showSidebar(
      HtmlService
          .createHtmlOutput('<p>A change of speed, a change of style...</p>')
          .setTitle('My custom sidebar')
          .setWidth(350 /* pixels */));
}


/**
 * Performs a simple search and replace on the document's contents. A subset of
 * JavaScript regular expressions is supported; see the Apps Script reference
 * documentation for more information.
 */
function searchAndReplace() {
  var bodyElement = DocumentApp.getActiveDocument().getBody();
  bodyElement.replaceText('name_placeholder', 'Joe Script-Guru');
  bodyElement.replaceText('address_placeholder', '100 Script Rd');
  bodyElement.replaceText('city_placeholder', 'Scriptville');
  bodyElement.replaceText('state_placeholder', 'Scripting Bliss');
  bodyElement.replaceText('zip_placeholder', '94043');
}


/**
 * Inserts the sentence "Hey there!" at the current cursor location in boldface.
 */
function insertAtCursor() {
  var cursor = DocumentApp.getActiveDocument().getCursor();

  if (cursor) {
    // Attempt to insert text at the cursor position. If insertion returns null,
    // then the cursor's containing element doesn't allow text insertions.
    var element = cursor.insertText('Hey there!');
    if (element) {
      element.setBold(true);
    } else {
      DocumentApp.getUi().alert('Cannot insert text at this cursor location.');
    }
  } else {
    DocumentApp.getUi().alert('Cannot find a cursor in the document.');
  }
}


/**
 * Sets the background color of any selected text to purple. Not very useful,
 * perhaps, but it demonstrates how to read and modify the current document
 * selection.
 */
function turnSelectionPurple() {
  // Try to get the current selection in the document. If this fails (e.g.,
  // because nothing is selected), show an alert and exit the function.
  var selection = DocumentApp.getActiveDocument().getSelection();
  if (!selection) {
    DocumentApp.getUi().alert('Cannot find a selection in the document.');
    return;
  }

  var selectedElements = selection.getSelectedElements();
  for (var i = 0; i < selectedElements.length; ++i) {
    var selectedElement = selectedElements[i];

    // Only modify elements that can be edited as text; skip images and other
    // non-text elements.
    var text = selectedElement.getElement().editAsText();

    // Change the background color of the selected part of the element, or the
    // full element if it's completely selected.
    if (selectedElement.isPartial()) {
      text.setBackgroundColor(selectedElement.getStartOffset(),
          selectedElement.getEndOffsetInclusive(), '#69359c');
    } else {
      text.setBackgroundColor('#69359c');
    }
  }
}


/**
 * Constructs a simple report with three body sections and a footer in the
 * current Google Docs document.
 */
function createReport() {
  var title = 'Script Center Report';
  var summaryContents = 'This reports addresses...';
  var overviewContents = 'We undertook this project because...';
  var dataContents = 'We collected three samples of data...';

  var doc = DocumentApp.getActiveDocument();
  var body = doc.getBody();

  // Build up the report's title and abstract.
  var reportTitle = body.appendParagraph(title);
  reportTitle.setFontFamily(DocumentApp.FontFamily.ARIAL);
  reportTitle.setFontSize(24);
  reportTitle.setForegroundColor('#4a86e8');
  reportTitle.setAlignment(DocumentApp.HorizontalAlignment.CENTER);

  var execSummary = body.appendParagraph('Executive Summary');
  execSummary.setFontSize(14);
  execSummary.setSpacingBefore(14);
  execSummary.setBold(true);

  var execBody = body.appendParagraph(summaryContents);
  execBody.setFontFamily(DocumentApp.FontFamily.TIMES_NEW_ROMAN);
  execBody.setFontSize(12);
  execBody.setSpacingBefore(6);

  // Build up the report's contents.
  var overview = body.appendParagraph('Project Overview');
  overview.setFontSize(14);
  overview.setSpacingBefore(14);
  overview.setBold(true);

  var overviewBody = body.appendParagraph(overviewContents);
  overviewBody.setFontFamily(DocumentApp.FontFamily.TIMES_NEW_ROMAN);
  overviewBody.setFontSize(12);
  overviewBody.setSpacingBefore(6);

  var data = body.appendParagraph('Project Data');
  data.setFontSize(14);
  data.setSpacingBefore(14);
  data.setBold(true);

  var dataBody = body.appendParagraph(dataContents);
  dataBody.setFontFamily(DocumentApp.FontFamily.TIMES_NEW_ROMAN);
  dataBody.setFontSize(12);
  dataBody.setSpacingBefore(6);

  // Build up the report's footer.
  var footer = doc.addFooter();

  var divider = footer.appendHorizontalRule();

  var footerText = footer.appendParagraph('Confidential and proprietary');
  footerText.setFontSize(9);
  footerText.setForegroundColor('#4a86e8');
  footerText.setAlignment(DocumentApp.HorizontalAlignment.RIGHT);

  return doc;
}