Diálogos y barras laterales del complemento de Editor

En la mayoría de los complementos de Editor, haz lo siguiente: Las ventanas de diálogo y los paneles de la barra lateral son las interfaces de usuario principales del complemento. Ambos se pueden personalizar completamente con HTML y CSS estándares, y puedes usar De Apps Script modelo de comunicación cliente-servidor para ejecutar funciones de Apps Script cuando el usuario interactúe con la barra lateral o el diálogo. Tu complemento puede definir varias barras laterales y diálogos, pero este puede mostrar de a una por vez.

Cuando quieres impedir que el usuario interactúe con el editor hasta que hacer alguna elección en la interfaz del complemento, usar un diálogo De lo contrario, usa barra lateral.

Diálogos

Los diálogos son paneles de ventana que se superponen al contenido del editor principal. Apps Script los diálogos son modales; mientras están abiertos, el usuario no puede interactuar con otros elementos de la interfaz del editor. Puedes personalizar el contenido y el tamaño de diálogos.

Se compilan diálogos de complementos de la misma manera en que se crea una secuencia de comandos de Apps Script diálogos personalizados; el procedimiento recomendado es el siguiente:

  1. Crea un archivo de proyecto de secuencia de comandos que defina la estructura HTML del cuadro de diálogo. CSS y el comportamiento de JavaScript del cliente. Cuando definas el diálogo, consulta sobre los lineamientos de estilo para los complementos del editor
  2. En el código del servidor donde quieres que se abra el diálogo, llama HtmlService.createHtmlOutputFromFile(filename) para crear un HtmlOutput objeto que representa el diálogo. De manera alternativa, si utilizas HTML con plantilla que puedes llamar HtmlService.createTemplateFromFile(filename) para generar una plantilla y, luego, HtmlTemplate.evaluate() para convertirlo en un HtmlOutput.
  3. Llama a Ui.showModalDialog(htmlOutput, dialogTitle) para mostrar el diálogo con esa HtmlOutput

Los diálogos no suspenden la secuencia de comandos del servidor mientras están abiertos. El El código JavaScript del cliente puede realizar llamadas asíncronas al servidor usando google.script.run() y las funciones de controlador asociadas. Para obtener más detalles, consulta Comunicación de cliente a servidor.

Diálogos de archivo abierto

Los diálogos de archivo abierto son diálogos predefinidos que les permiten a los usuarios seleccionar archivos de su cuenta de Google Drive. Puedes agregar un diálogo de archivo abierto a tu complemento sin sin necesidad de diseñarlo, pero requiere una configuración adicional. También requieren acceso a la cuenta Proyecto de Cloud Platform para habilitar la API de Google Picker.

Para obtener todos los detalles, consulta Diálogos de archivo abierto.

Las barras laterales son paneles que aparecen a la derecha de la interfaz del editor. son el tipo más común de interfaz de complemento. A diferencia de los diálogos, puedes continuar interactuar con los demás elementos de la interfaz del editor mientras se incluye una barra lateral abiertos. Las barras laterales tienen un ancho fijo, pero puedes personalizar su contenido.

Las barras laterales de complementos se crean de la misma manera que en Apps Script barras laterales personalizadas el procedimiento recomendado es el siguiente:

  1. Crea un archivo de proyecto de secuencia de comandos que defina la estructura HTML de tu barra lateral. CSS y el comportamiento de JavaScript del cliente. Cuando definas la barra lateral, consulta sobre los lineamientos de estilo para los complementos del editor

  2. En el código del servidor, donde quieres que se abra la barra lateral, llama HtmlService.createHtmlOutputFromFile(filename) para crear un HtmlOutput objeto que representa la barra lateral. De manera alternativa, si utilizas HTML con plantilla que puedes llamar HtmlService.createTemplateFromFile(filename) para generar una plantilla y, luego, HtmlTemplate.evaluate() para convertirlo en un HtmlOutput.

  3. Llama a Ui.showSidebar(htmlOutput) para mostrar la barra lateral con esa HtmlOutput

Las barras laterales no suspenden la secuencia de comandos del servidor mientras están abiertas. El El código JavaScript del cliente puede realizar llamadas asíncronas al servidor usando google.script.run() y las funciones de controlador asociadas. Para obtener más detalles, consulta Comunicación de cliente a servidor.