Como criar interfaces dos Editores do Google

Com os complementos do Google Workspace, você pode oferecer interfaces personalizadas nos editores, incluindo os apps Documentos, Planilhas e Apresentações. Assim, você pode fornecer ao usuário informações relevantes, automatizar tarefas e conectar sistemas de terceiros aos editores.

Como acessar a interface do complemento

É possível abrir um complemento do Google Workspace nos editores se o ícone dele aparecer no painel de acesso rápido do Google Workspace no lado direito das interfaces de usuário dos apps Documentos, Planilhas e Apresentações.

Um complemento do Google Workspace pode apresentar as seguintes interfaces:

  • Interfaces da página inicial: se o manifesto do complemento incluir o gatilho EDITOR_NAME.homepageTrigger para o editor em que o usuário abre o complemento, o complemento vai criar e retornar um card da página inicial especificamente para esse editor. Se o manifesto do complemento não incluir o EDITOR_NAME.homepageTrigger para o editor em que o usuário o abrir, um card genérico da página inicial será mostrado.

  • Interfaces de API REST: se o complemento usar APIs REST, é possível incluir acionadores que solicitam acesso por arquivo a um documento usando o escopo drive.file. Depois de concedido, outro acionador chamado EDITOR_NAME.onFileScopeGrantedTrigger é executado e mostra uma interface específica para o arquivo.

  • Interfaces de visualização de links: se o complemento for integrado a um serviço de terceiros, você poderá criar cards que mostram uma prévia do conteúdo dos URLs do serviço.

Criar interfaces para complementos do editor

Crie interfaces de complemento do editor para os editores seguindo estas etapas:

  1. Adicione os campos addOns.common, addOns.docs, addOns.sheets e addOns.slides adequados ao manifesto do projeto de script complementar.
  2. Adicione os escopos do editor necessários ao manifesto do projeto de script.
  3. Se você estiver fornecendo uma página inicial específica do editor, implemente a função EDITOR_NAME.homepageTrigger para criar a interface. Caso contrário, use a interface common.homepageTrigger para criar uma página inicial comum para seus apps de hospedagem.
  4. Se você usa APIs REST, implemente o fluxo de autorização de escopo drive.file e a função de gatilho EDITOR_NAME.onFileScopeGrantedTrigger para mostrar uma interface específica para o arquivo aberto. Para mais informações, consulte Interfaces da API REST.
  5. Se você estiver configurando prévias de links de um serviço de terceiros, implemente o fluxo de autorização de escopo https://www.googleapis.com/auth/workspace.linkpreview e a função linkPreviewTriggers. Para mais informações, consulte Link interfaces de visualização.
  6. Implemente as funções de callback associadas necessárias para responder às interações da interface do usuário, como cliques em botões.

Páginas iniciais do editor

É necessário fornecer uma função de acionamento da página inicial no projeto de script do complemento que cria e retorna um único Card ou uma matriz de objetos Card que compõem a página inicial do complemento.

A função de gatilho da página inicial recebe um objeto de evento como um parâmetro que contém informações, como a plataforma do cliente. É possível usar os dados do objeto de evento para personalizar a construção da página inicial.

Você pode apresentar uma página inicial comum ou específica do editor em que o usuário abre o complemento.

Mostrar a página inicial comum

Para mostrar a página inicial comum do complemento nos editores, inclua os campos adequados, como addOns.docs, addOns.sheets ou addOns.slides, no manifesto do complemento.

O exemplo a seguir mostra a parte addons de um manifesto de complemento do Google Workspace. O complemento amplia os apps Documentos, Planilhas e Apresentações e mostra a página inicial comum em cada app host.

 "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs": {},
    "sheets": {},
    "slides": {}
  }
}

Mostrar uma página inicial específica para o editor

Para apresentar uma página inicial específica para um editor, adicione EDITOR_NAME.homepageTrigger ao manifesto do complemento.

O exemplo a seguir mostra a parte addons de um manifesto de complemento do Google Workspace. O complemento está ativado para os apps Documentos, Planilhas e Apresentações. Ela mostra a página inicial comum nos apps Documentos e Apresentações e uma página inicial exclusiva nas Planilhas. A função de callback onSheetsHomepage cria o card da página inicial específico do Planilhas.

 "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs": {},
    "slides": {},
    "sheets": {
     "homepageTrigger": {
       "runFunction": "onSheetsHomepage"
     },
  }
}

Interfaces da API REST

Se o complemento usar APIs REST, como a API Google Sheets, use a função onFileScopeGrantedTrigger para mostrar uma nova interface específica para o arquivo aberto no app host do Editor.

É necessário incluir o fluxo de autorização de escopo drive.file para usar a função onFileScopeGrantedTrigger. Para saber como solicitar o escopo drive.file, consulte Solicitar acesso a arquivos para o documento atual.

Quando um usuário concede o escopo drive.file, o EDITOR_NAME.onFileScopeGrantedTrigger.runFunction é acionado. Quando o acionador é acionado, ele executa a função de acionador contextual especificada pelo campo EDITOR_NAME.onFileScopeGrantedTrigger.runFunction no manifesto do complemento.

Para criar uma interface da API REST para um dos editores, siga as etapas abaixo. Substitua EDITOR_NAME pelo app host do Editor que você quer usar, por exemplo, sheets.onFileScopeGrantedTrigger.

  1. Inclua o EDITOR_NAME.onFileScopeGrantedTrigger na seção do editor adequada do manifesto. Por exemplo, se você quiser criar essa interface nas Planilhas Google, adicione o acionador à seção "sheets".
  2. Implemente a função nomeada na seção EDITOR_NAME.onFileScopeGrantedTrigger. Essa função aceita um objeto de evento como argumento e precisa retornar um único objeto Card ou uma matriz de objetos Card.
  3. Como em qualquer card, é preciso implementar as funções de callback usadas para fornecer interatividade do widget à interface. Por exemplo, se você incluir um botão na interface, ele terá uma ação anexada e uma função de callback implementada que será executada quando o botão for clicado.

O exemplo a seguir mostra a parte addons de um manifesto de complemento do Google Workspace. O complemento usa APIs REST, então o onFileScopeGrantedTrigger é incluído para as Planilhas Google. Quando um usuário concede o escopo drive.file, a função de callback onFileScopeGrantedSheets cria uma interface específica do arquivo.

"addOns": {
   "common": {
     "name": "Productivity add-on",
     "logoUrl": "https://www.gstatic.com/images/icons/material/system_gm/1x/work_outline_black_18dp.png",
     "layoutProperties": {
       "primaryColor": "#669df6",
       "secondaryColor": "#ee675c"
     }
   },
   "sheets": {
     "homepageTrigger": {
       "runFunction": "onEditorsHomepage"
     },
     "onFileScopeGrantedTrigger": {
       "runFunction": "onFileScopeGrantedSheets"
     }
   }

Para ativar as prévias de links para um serviço de terceiros, configure as prévias de links no manifesto do complemento e crie uma função que retorne um card de visualização. Para serviços que exigem autorização do usuário, sua função também precisa invocar o fluxo de autorização.

Para saber como ativar as prévias de links, consulte Visualizar links com ícones inteligentes.

Objetos de evento

Um objeto de evento é criado e transmitido para funções de gatilho, como EDITOR_NAME.homepageTrigger ou EDITOR_NAME.onFileScopeGrantedTrigger. A função de acionamento usa as informações no objeto de evento para determinar como criar cards de complemento ou controlar o comportamento do complemento.

A estrutura completa dos objetos de evento é descrita em Objetos de evento.

Quando um editor é o app host do complemento, os objetos de evento incluem campos de objeto de evento de Documentos, Planilhas ou Apresentações que contêm informações do cliente.

Se o complemento não tiver autorização de escopo drive.file para o usuário ou documento atual, o objeto de evento só conterá o campo docs.addonHasFileScopePermission, sheets.addonHasFileScopePermission ou slides.addonHasFileScopePermission. Se o complemento tiver autorização, o objeto de evento vai conter todos os campos do objeto de evento do editor.

O exemplo a seguir mostra um objeto de evento do Editor que é transmitido para uma função sheets.onFileScopeGrantedTrigger. Aqui, o complemento tem a autorização de escopo drive.file para o documento atual:

`        {
          "commonEventObject": { ... },
          "sheets": {
            "addonHasFileScopePermission": true,
            "id":"A_24Q3CDA23112312ED52",
            "title":"How to get started with Sheets"
          },
          ...
        }