Interfaces basadas en tarjetas

Ejemplo de tarjeta de complemento

Los complementos de Google Workspace presentan información y controles de usuario en la barra lateral de la IU de la aplicación host. Un complemento consiste en 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, por lo general, navegar a una tarjeta nueva es solo cuestión de crear esa tarjeta y enviarla a una pila de tarjetas interna. Puedes definir flujos de navegación entre tarjetas para brindar 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, al abrir un mensaje de Gmail o un evento del 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 integrados en Apps Script usan el servicio de tarjeta para crear interfaces de usuario a partir de tarjetas. Los complementos compilados en otros lenguajes 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 de tarjetas. 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 es necesario tener conocimientos de HTML o CSS para crear interfaces basadas en tarjetas.
  • El estilo de las tarjetas y los widgets se ajusta automáticamente para que funcione bien con las aplicaciones de Google Workspace que extienden.
  • Las interfaces basadas en tarjetas funcionan tanto en computadoras de escritorio como en dispositivos móviles, pero solo debes definir la interfaz una vez.

Crea interfaces basadas en tarjetas

Cuando compilas complementos basados en tarjetas, es importante comprender ciertos conceptos y patrones de diseño. Las siguientes guías proporcionan la información que necesitas para compilar complementos eficaces basados en tarjetas:

Consulta estas páginas cuando crees tarjetas e implementes el comportamiento de la IU. Los siguientes ejemplos adicionales también pueden resultarte útiles como referencia cuando implementes tu complemento: