Diálogos y paneles laterales del complemento del editor

En la mayoría de los complementos del Editor, las ventanas de diálogo y los paneles de la barra lateral son las principales interfaces de usuario del complemento. Ambos son completamente personalizables con HTML y CSS estándares, y puedes usar el modelo de comunicación cliente-servidor de Apps Script para ejecutar funciones de Apps Script cuando el usuario interactúa con la barra lateral o el diálogo. Tu complemento puede definir varias barras laterales y diálogos, pero solo puede mostrar uno a la vez.

Cuando quieras evitar que el usuario interactúe con el editor hasta que elija una opción en la interfaz del complemento, usa un diálogo. De lo contrario, usa una barra lateral.

Diálogos

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

Los diálogos de complementos se compilan de la misma manera que los diálogos personalizados de Apps Script. El procedimiento general recomendado es el siguiente:

  1. Crea un archivo de proyecto de secuencia de comandos que defina la estructura HTML, el CSS y el comportamiento de JavaScript del cliente de tu diálogo. Cuando definas el diálogo, consulta los lineamientos de diseño de los complementos del Editor.
  2. En el código del servidor en el que deseas que se abra el diálogo, llama a HtmlService.createHtmlOutputFromFile(filename) para crear un objeto HtmlOutput que represente el diálogo. Como alternativa, si usas HTML basado en plantillas, puedes llamar a HtmlService.createTemplateFromFile(filename) para generar una plantilla y, luego, a HtmlTemplate.evaluate() para convertirla en un objeto HtmlOutput.
  3. Llama a Ui.showModalDialog(htmlOutput, dialogTitle) para mostrar el diálogo con ese HtmlOutput.

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

Diálogos de apertura de archivos

Los diálogos de apertura de archivos son diálogos prediseñados que permiten a los usuarios seleccionar archivos de su unidad de Google Drive. Puedes agregar un diálogo de apertura de archivos a tu complemento sin necesidad de diseñarlo, pero requiere cierta configuración adicional. También necesitas acceso al proyecto de Cloud Platform del complemento para habilitar la API de Google Picker.

Para obtener más información, consulta Diálogos de apertura de archivos.

Las barras laterales son paneles que aparecen a la derecha de la interfaz del editor y son el tipo más común de interfaz de complementos. A diferencia de los diálogos, puedes seguir interactuando con los demás elementos de la interfaz del editor mientras una barra lateral está abierta. Las barras laterales tienen un ancho fijo, pero puedes personalizar su contenido.

Las barras laterales de complementos se compilan de la misma manera que las barras laterales personalizadas de Apps Script. El procedimiento general recomendado es el siguiente:

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

  2. En el código del servidor en el que deseas que se abra la barra lateral, llama a HtmlService.createHtmlOutputFromFile(filename) para crear un objeto HtmlOutput que represente la barra lateral. Como alternativa, si usas HTML basado en plantillas, puedes llamar a HtmlService.createTemplateFromFile(filename) para generar una plantilla y, luego, a HtmlTemplate.evaluate() para convertirla en un objeto HtmlOutput.

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

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