Como criar interfaces dos Editores do Google

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

Acessar a interface do complemento

Você pode abrir um complemento do Google Workspace nos editores se o ícone dele aparecer no painel lateral de acesso rápido do Google Workspace à direita das interfaces de usuário dos 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, ele 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 abre o complemento, um card genérico da página inicial será exibido.

  • Interfaces da API REST: se o complemento usar APIs REST, você poderá incluir gatilhos que solicitam acesso por arquivo a um documento usando o escopo drive.file. Depois de concedida, outro gatilho chamado EDITOR_NAME.onFileScopeGrantedTrigger é executado e mostra uma interface específica para o arquivo.

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

Como criar interfaces para complementos do editor

Siga estas etapas para criar interfaces de complemento do Editor de build para os editores:

  1. Adicione os campos addOns.common, addOns.docs, addOns.sheets e addOns.slides apropriados ao manifesto do projeto de script do complemento.
  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 host.
  4. Se você usa APIs REST, implemente o fluxo de autorização de escopo drive.file e a função de acionamento EDITOR_NAME.onFileScopeGrantedTrigger para mostrar uma interface específica do 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 Interfaces de visualização de link.
  6. Implemente as funções de callback associadas necessárias para responder às interações do usuário na interface, 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 acionamento 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 uma específica para o Editor em que o usuário abre o complemento.

Mostrar a página inicial comum

Para mostrar a página inicial comum do seu complemento nos editores, inclua os campos apropriados do editor, 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 do Editor

Para apresentar uma página inicial específica de 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 no app Planilhas. A função de callback onSheetsHomepage cria o card da página inicial específico do app 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 usa APIs REST, como a API Google Sheets, você pode usar 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 do documento atual.

Quando um usuário concede o escopo drive.file, o EDITOR_NAME.onFileScopeGrantedTrigger.runFunction é acionado. Quando o gatilho é disparado, ele executa a função de gatilho 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 apropriada do Editor no manifesto. Por exemplo, se você quiser criar essa interface nas Planilhas Google, adicione o gatilho à 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 de widget para a interface. Por exemplo, se você incluir um botão na interface, ele precisará ter uma Action 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 em um serviço de terceiros, configure-as no manifesto do complemento e crie uma função que retorne um card de prévia. 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 acionamento, como EDITOR_NAME.homepageTrigger ou EDITOR_NAME.onFileScopeGrantedTrigger. A função de gatilho usa as informações no objeto de evento para determinar como construir 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 ativo do complemento, os objetos de evento incluem campos de objeto de evento do Documentos, Planilhas ou Apresentações que carregam 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 vai conter apenas 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 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"
          },
          ...
        }