Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Um complemento baseado em cards aparece como um painel na barra lateral ou, em dispositivos móveis, como outra janela de atividade acessada pelo menu. O complemento tem uma barra de ferramentas na parte de cima que
identifica o complemento e mostra um card, que é basicamente uma "página" da
interface do complemento. O Apps Script representa cards no código do projeto usando objetos
Card.
Anatomia do card
Um card é um grupo de elementos da interface do usuário que você cria. Um card consiste nas seguintes seções:
Um cabeçalho de card. Isso identifica os cards. Ele tem um texto de título e pode ter um subtítulo e um ícone.
Uma ou mais seções de card. São subdivisões da área da interface do card.
Uma seção pode ter um cabeçalho de texto opcional.
As seções do card são separadas por uma linha horizontal.
Se uma seção de cards for muito grande, ela será renderizada automaticamente como uma seção recolhível que os usuários podem abrir ou fechar conforme necessário.
Um card pode ter no máximo 100 seções, mas é recomendável ter apenas algumas para melhorar o desempenho.
Cada seção de card contém um ou mais widgets da interface. Os widgets oferecem ao usuário informações ou controles interativos. Os cards e as seções de cards são widgets estruturais, então não é possível adicioná-los a uma seção de cards. Uma seção de card pode ter no máximo 100 widgets e precisa ser o mais simples possível para ter o melhor desempenho.
Crie cards com base em atividades ou conjuntos de dados específicos do usuário. Por exemplo, um complemento do Google Workspace que mostra dados das Planilhas Google pode ter um card separado para cada planilha de onde ele extrai informações.
Como usar vários cards
Os complementos geralmente consistem em mais de um cartão. Você pode configurar esses
cards como uma lista simples para
navegação básica com vários cards
ou configurar métodos de navegação
mais complexos para controlar como o usuário se move entre os cards.
Se o complemento usar a navegação básica, quando ele for aberto pela primeira vez, o aplicativo do Google Workspace que ele estende vai criar uma lista dos cabeçalhos dos cards e apresentá-los ao usuário. Clicar no cabeçalho do card abre o card. Uma seta para voltar também é fornecida para retornar à lista de cabeçalhos de cards. Não é preciso programar a funcionalidade do cabeçalho e da seta para trás. Isso é feito automaticamente quando você define os cards no complemento.
[null,null,["Última atualização 2025-08-04 UTC."],[[["\u003cp\u003eGoogle Workspace add-ons utilize cards, essentially UI pages, displayed in a sidebar or activity window, to present information and interactive elements.\u003c/p\u003e\n"],["\u003cp\u003eEach card is structured with a header, sections containing widgets (like buttons or text fields), and is designed around specific user tasks or data sets.\u003c/p\u003e\n"],["\u003cp\u003eAdd-ons often employ multiple cards for navigation; basic navigation provides an automatic card header list and back arrow functionality.\u003c/p\u003e\n"],["\u003cp\u003eFor optimal performance and user experience, it's recommended to keep the number of cards, sections, and widgets to a minimum, prioritizing simplicity in card design.\u003c/p\u003e\n"],["\u003cp\u003eCards have technical limitations, restricting them to a maximum of 100 card sections and 100 widgets per section to maintain performance.\u003c/p\u003e\n"]]],["Add-on cards, displayed in a sidebar or activity window, are UI pages built with `Card` objects. Cards have a header, optional subtitle/icon, and sections. Sections, separated by horizontal rules, contain UI widgets, and large sections collapse. Add-ons use multiple cards for navigation, presented as a list of headers. Basic navigation provides automatic back arrow functionality. Each card section can hold a maximum of 100 widgets, and a card can hold no more than 100 card sections.\n"],null,["# Cards\n\nA card-based add-on appears as a pane in the sidebar (or, on mobile, as another\nactivity window reached through the menu). The add-on has a top toolbar that\nidentifies the add-on and displays a *card* ---essentially a \"page\" of the\nadd-on's UI. Apps Script represents cards in project code using\n[`Card`](/apps-script/reference/card-service/card) objects.\n\nCard anatomy\n------------\n\nA card is a group of UI elements you design. A card consists of the\nfollowing sections:\n\n- **A card header**. This identifies the cards. It has title text, and may optionally have a subtitle and an icon.\n- **One or more card sections** . These are sub-divisions of the card's UI area.\n A section may optionally have a text section header.\n Card sections are separated from each other on the card by a horizontal rule.\n If a card section is particularly large, it is automatically rendered as a\n collapsible section that users can expand or collapse as needed.\n A card can have [no more than 100 card sections](/workspace/add-ons/guides/workspace-restrictions#have_more_than_100_widgets),\n and should have only a few for better performance.\n\n- **Each card section contains one or more UI\n [widgets](/workspace/add-ons/concepts/widgets)** . Widgets provide the user with\n information or interactive controls. Cards and card sections are\n *structural* widgets, so you cannot add those to a card section. A card\n section can have [no more than 100 widgets](/workspace/add-ons/guides/workspace-restrictions#have_more_than_100_widgets),\n and should be as simple as possible for best performance.\n\nYou should design cards around particular user activities or data sets. For\nexample, a Google Workspace add-on that displays data\ntaken from Google Sheets might have a separate card for each sheet it pulls\ndata from.\n\nUsing multiple cards\n--------------------\n\nAdd-ons usually consist of more than one card. You can either configure these\ncards as a simple list for\n[basic navigation with multiple cards](/workspace/add-ons/how-tos/navigation#returning_multiple_cards),\nor configure more complex\n[navigation methods](/workspace/add-ons/how-tos/navigation#navigation_methods)\nto control how the user moves between the cards.\n\nIf the add-on uses basic navigation, when the\nadd-on is first opened the\nGoogle Workspace application it extends constructs a\nlist of the card headers and presents those to the user. Clicking on the card\nheader opens that card. A back arrow is also provided to get back to the card\nheader list. You do not have to code the header and back arrow\nfunctionality---this is done automatically when you define the cards in your\nadd-on.\n\nWhen designing add-ons, it's best to\n[limit the number of cards](/workspace/add-ons/guides/workspace-best-practices#_use_just_a_few_cards)\nyou display at once, since cards must share a limited amount of screen space.\nIt's also best to [avoid unnecessary complexity in cards](/workspace/add-ons/guides/workspace-best-practices#_keep_cards_simple).\n| **Note:** For performance reasons, you can't add more than 100 widgets or 100 card sections to a card."]]
