Interfaces basadas en tarjetas

Los complementos de Google Workspace se basan en tarjetas. Los complementos del editor se basan en HTML.

Ejemplo de la interfaz de una tarjeta de complemento de Google Workspace.

Los complementos presentan información y controles de usuario en la barra lateral de la IU de la aplicación host. Un complemento de Google Workspace consta de una barra de herramientas de identificación principal junto con una o más tarjetas.

Cada tarjeta representa una "página" en particular de la IU de tu complemento. 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 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, como cuando se abre un mensaje de Gmail o un evento de Calendario de Google. Las tarjetas no contextuales (como páginas principales) se presentan al usuario fuera de un contexto específico del host, por ejemplo, cuando el usuario está viendo su bandeja de entrada de Gmail, la carpeta principal de Google Drive o Calendario.

Los complementos de Google Workspace creados en Google Apps Script usan el servicio de tarjetas para crear interfaces de usuario a partir de tarjetas. Los complementos creados en otros lenguajes deben devolver 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 de tarjetas. 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.

Gmail es la única aplicación host que se puede extender con complementos de Google Workspace en dispositivos móviles.

Crea interfaces basadas en tarjetas

Cuando crees 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:

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: