Interfaces basadas en tarjetas

Ejemplo de tarjeta de complemento

Los complementos de Google Workspace presentan información y controles del usuario en la barra lateral de la IU de la aplicación host. 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 del complemento, y navegar a una tarjeta nueva suele ser solo cuestión de crear esa tarjeta y enviarla a una pila interna de tarjetas. Puedes definir flujos de navegación entre tarjetas para una experiencia de interacción enriquecida.

Las tarjetas pueden ser no contextuales o contextuales. Las tarjetas contextuales se 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 de Recibidos de Gmail, la carpeta principal de Drive o el Calendario.

Los complementos de Google Workspace creados en Apps Script usan el servicio de tarjetas para crear interfaces de usuario a partir de tarjetas. Los complementos creados en otros idiomas deben devolver un JSON con el formato adecuado para que la interfaz se renderice como tarjetas.

Cada tarjeta consta de un encabezado y una o más secciones. Cada sección se compone de 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 diseñan automáticamente para que funcionen bien con las aplicaciones de Google Workspace que extienden.

  • Las interfaces basadas en tarjetas funcionan en computadoras de escritorio y dispositivos móviles, pero solo debes definir la interfaz una vez.

Cómo crear interfaces basadas en tarjetas

Cuando crees complementos basados en tarjetas, es importante que comprendas ciertos conceptos y patrones de diseño. En las siguientes guías, se proporciona la información que necesitas para crear complementos eficaces basados en tarjetas:

Consulta estas páginas cuando crees tarjetas y cuando implementes el comportamiento de la IU. También puedes consultar los siguientes ejemplos adicionales cuando implementes tu complemento:

  • Inicio rápido del complemento "Gatos" de Google Workspace

    En este ejemplo de complemento, se muestra una IU simple de un complemento de Google Workspace con varias páginas y páginas principales.

  • Complemento de Google Workspace: "Traductor"

    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: "Teams List"

    En este ejemplo de complemento, se muestra un ejemplo más complejo de complemento de Google Workspace que muestra información del usuario sobre los destinatarios de 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 utiliza la API de Directory para recuperar información del usuario.