Los complementos de Google Workspace presentan información y controles del usuario en la barra lateral de la IU de la aplicación anfitrión. Un complemento consta de una barra de herramientas de identificación principal junto con una o más tarjetas.
Cada tarjeta representa una "página" particular de la IU de tu complemento y navegar a una tarjeta nueva suele ser solo cuestión de crearla y enviarla a una pila de tarjetas interna. Puedes definir flujos de navegación entre tarjetas para obtener una experiencia de interacción enriquecida.
Las tarjetas pueden ser no contextuales o contextuales. Las tarjetas contextuales se le presentan al usuario cuando la aplicación host se encuentra en un contexto específico. Por ejemplo, cuando abres un mensaje de Gmail o un evento de Calendario. Las tarjetas no contextuales (como las páginas principales) se presentan al usuario fuera de un contexto específico del host. Por ejemplo, cuando el usuario ve su carpeta Recibidos de Gmail, la carpeta principal de Drive o el Calendario.
Los complementos de Google Workspace compilados en Apps Script usan el servicio de tarjetas para crear interfaces de usuario a partir de tarjetas. Los complementos compilados en otros idiomas deben mostrar JSON con el formato correcto para que la interfaz se renderice como tarjetas.
Cada tarjeta consta de un encabezado y una o más secciones. Cada sección está compuesta por un conjunto de widgets. Los widgets muestran información al usuario o proporcionan controles de interacción, como botones.
Las interfaces basadas en tarjetas tienen los siguientes beneficios:
- No se necesitan conocimientos de HTML ni CSS para crear interfaces basadas en tarjetas.
- Las tarjetas y los widgets se aplican automáticamente para que funcionen bien con las aplicaciones de Google Workspace que extienden.
Las interfaces basadas en tarjetas funcionan en computadoras y dispositivos móviles, pero solo debes definir la interfaz una vez.
Cómo crear interfaces basadas en tarjetas
Cuando compilas complementos basados en tarjetas, es importante comprender ciertos conceptos y patrones de diseño. En las siguientes guías, se proporciona la información que necesitas para crear complementos basados en tarjetas eficaces:
- Tarjetas
- Páginas principales
- Widgets
- Actions
- Objetos de eventos
- Cómo crear tarjetas
- Cómo crear tarjetas interactivas
- Cómo navegar entre tarjetas
- Cómo usar acciones universales
- Agrega la función de autocompletar a las entradas de texto
- Cómo acceder a las configuraciones regionales y zonas horarias del usuario
- Cómo conectarse a servicios que no son de Google
- Guía de estilo
- Prácticas recomendadas
Consulta estas páginas cuando crees tarjetas y, luego, implementes el comportamiento de la IU. También puedes consultar los siguientes ejemplos adicionales para referencia cuando implementes tu complemento:
Guía de inicio rápido del complemento "Cats" de Google Workspace
En este ejemplo de complemento, se muestra una IU simple de complementos de Google Workspace con varias páginas y páginas principales.
Complemento de Google Workspace: "Traducir"
En este ejemplo de complemento, se muestra un complemento de Google Workspace que permite a los usuarios traducir texto desde Documentos, Hojas de cálculo y Presentaciones.
Complemento de Google Workspace: “Lista de equipos”
En este ejemplo de complemento, se muestra un complemento de Google Workspace más complejo que muestra información del usuario sobre los destinatarios de los mensajes de Gmail, los editores de archivos de Drive o los asistentes a eventos de Calendario. Solo puedes usar este complemento dentro de un dominio, ya que usa la API de Directory para recuperar información del usuario.