En la mayoría de los complementos de Editor, las ventanas de diálogo y los paneles de la barra lateral son las interfaces de usuario del complemento principal. Ambos se pueden personalizar en su totalidad mediante HTML y CSS estándar, 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 realice una elecció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 ventana que se superponen al contenido del editor principal. Los diálogos de Apps Script son modales. Mientras estén abiertos, el usuario no podrá interactuar con otros elementos de la interfaz del editor. Puedes personalizar el contenido y el tamaño de los diálogos.
Los diálogos de los complementos se compilan de la misma manera que los diálogos personalizados de Apps Script. El procedimiento general recomendado es el siguiente:
- Crea un archivo de proyecto de secuencia de comandos que defina la estructura HTML de tu diálogo, CSS y el comportamiento de JavaScript del cliente. Cuando definas el diálogo, consulta los lineamientos de estilo del complemento de Editor.
- En el código del servidor en el que deseas que se abra el diálogo, llama a
HtmlService.createHtmlOutputFromFile(filename)
para crear un objetoHtmlOutput
que represente el diálogo. Como alternativa, si usas HTML con plantilla, puedes llamar aHtmlService.createTemplateFromFile(filename)
para generar una plantilla y, luego,HtmlTemplate.evaluate()
a fin de convertirla en un objetoHtmlOutput
. - Llama a
Ui.showModalDialog(htmlOutput, dialogTitle)
para mostrar el diálogo con eseHtmlOutput
.
Los diálogos no suspenden la secuencia de comandos del lado del servidor mientras están abiertas. El JavaScript del cliente puede hacer llamadas asíncronas al servidor mediante google.script.run()
y las funciones del 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 abiertos en archivos son diálogos compilados previamente que permiten a los usuarios seleccionar archivos de su Google Drive. Puedes agregar un diálogo de archivo abierto a tu complemento sin necesidad de diseñarlo, pero requiere alguna configuración adicional. También necesitas acceso al proyecto de Cloud Platform del complemento para habilitar la API del selector de Google.
Para obtener todos los detalles, consulta Diálogos de apertura de archivos.
Barras laterales
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 complemento. A diferencia de los diálogos, puedes seguir interactuando con otros elementos de la interfaz del editor mientras la 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 personalizadas de Apps Script. El procedimiento general recomendado es el siguiente:
- Crea un archivo de proyecto de secuencia de comandos que defina la estructura HTML de la barra lateral, CSS y el comportamiento de JavaScript del lado del cliente. Cuando definas la barra lateral, consulta los lineamientos de estilo del complemento de Editor.
En el código del servidor en el que deseas que se abra la barra lateral, llama a
HtmlService.createHtmlOutputFromFile(filename)
para crear un objetoHtmlOutput
que represente la barra lateral. Como alternativa, si usas HTML con plantilla, puedes llamar aHtmlService.createTemplateFromFile(filename)
para generar una plantilla y, luego,HtmlTemplate.evaluate()
a fin de convertirla en un objetoHtmlOutput
.Llama a
Ui.showSidebar(htmlOutput)
para mostrar la barra lateral con esaHtmlOutput
.
Las barras laterales no suspenden la secuencia de comandos del lado del servidor mientras están abiertas. El JavaScript del cliente puede hacer llamadas asíncronas al servidor mediante google.script.run()
y las funciones del controlador asociadas. Para obtener más detalles, consulta Comunicación entre el cliente y el servidor.