google-apps-script - google - script developers

Cómo obtener la entrada de la barra lateral de Google Sheets al servidor

Question

Estoy creando un cuadro de diálogo para mostrar y editar las propiedades del documento en una barra lateral de Google Spreadsheets.

Logré mostrar los valores de las propiedades en la barra lateral e incluso crear campos de entrada de texto para interactuar a través de la barra lateral. Pero finalmente no puedo volver a introducir los valores en la secuencia de comandos del lado del servidor usando un manejador de servidor.

¿Cómo se soportan los cuadros de diálogo interactivos con una barra lateral en Hojas de cálculo de Google?

Answer 1

No lo dices, pero parece que estás usando UiApp para tu barra lateral.

Un serverHandler recibirá el valor del elemento al que se adjuntó el controlador. Por ejemplo:

var button = uiInstance.createSubmitButton("Submit");
var servHandler = uiInstance.createServerHandler("myServerHandler");
button.addClickHandler(servHandler);

Cuando myServerHandler() se invoca debido a la pulsación de un botón, recibirá el valor del button en el objeto del evento.

{"parameter":
  {"clientY":"13",
   "clientX":"40",
   "eventType":"click",    <<<<<<<<<<<<<<<<<<<<<
   "ctrl":"false",
   "meta":"false",
   "source":"u503258948978",
   "button":"1",           <<<<<<<<<<<<<<<<<<<<<
   "alt":"false",
   "screenY":"207",
   "screenX":"1020",
   "shift":"false",
   "y":"13",
   "x":"40"}
}

Para pasar otros valores a serverHandler, use addCallbackElement() para adjuntarlos al controlador.

var clientInput = uiInstance.createTextBox().setName("client-input");
...
servHandler.addCallbackElement(clientInput);

Ahora también clientInput la entrada del cuadro de texto clientInput , como un atributo llamado parameter["client-input"] .

{"parameter":
  {"clientY":"13",
   "clientX":"40",
   "eventType":"click",
   "ctrl":"false",
   "client-input":"hello",    <<<<<<<<<<<<<<<
   "meta":"false",
   "source":"u503258948978",
   "button":"1",
   "alt":"false",
   "screenY":"207",
   "screenX":"1020",
   "shift":"false",
   "y":"13",
   "x":"40"}
}

Ejemplo

Este sencillo ejemplo de una secuencia de comandos contenida en una hoja de cálculo obtiene una entrada del usuario y la pasa a un manejador de servidor, que luego actualiza la barra lateral para mostrar un resultado computacional.

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu(''Custom Menu'')
      .addItem(''Show sidebar'', ''showSidebar'')
      .addToUi();
}

/**
 * Display a sidebar with a button, an input box, and a
 * label. The label is initially hidden.
 */
function showSidebar() {
  var uiInstance = UiApp.createApplication()
      .setTitle(''My custom sidebar'')
      .setWidth(300);

  // Create the widgets to be used on sidebar
  var clientInput = uiInstance.createTextBox().setName("client-input");
  var serverOutput = uiInstance.createLabel().setId("server-response").setVisible(false);
  var button = uiInstance.createSubmitButton("Submit");

  // Set up server handler, add callbackElement(s), and attach to button
  var servHandler = uiInstance.createServerHandler("myServerHandler");
  servHandler.addCallbackElement(clientInput);
  button.addClickHandler(servHandler);

  // Place our widgets on the sidebar
  uiInstance.add(button).add(clientInput).add(serverOutput);

  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(uiInstance);
}

/**
 * Server handler - get the value of "client-input",
 * convert it to upper case, then display in the
 * Label in the UI.
 */
function myServerHandler(e) {
  Logger.log(JSON.stringify(e, undefined, 2)); // Log the event object
  var app = UiApp.getActiveApplication();
  var text = e.parameter["client-input"];
  var upperText = text.toUpperCase();
  app.getElementById("server-response").setVisible(true).setText(upperText);
  return(app);
}