Coletar e gerenciar contatos no Google Chat

Neste tutorial, mostramos como criar um app do Google Chat que ajuda os usuários do Google Chat a gerenciar contatos pessoais e comerciais. Para coletar informações, o app Chat pede que os usuários preencham um formulário de contato em mensagens de cards e caixas de diálogo.

Confira o app Chat em ação:

• 

  Figura 1. O app Chat responde ao comando de barra /about com uma mensagem de texto e um botão que abre um formulário de contato.

• 
  Figura 2. O app Chat abre uma caixa de diálogo em que os usuários podem inserir informações sobre um contato.
• 
  Figura 3. O app Chat retorna uma caixa de diálogo de confirmação para que os usuários possam revisar e confirmar as informações antes de enviar.
• 
  Figura 4. Depois que o usuário envia o formulário, o app Chat envia uma mensagem de texto particular para confirmar o envio.
• 
  Figura 5. O app Chat também pede que os usuários adicionem um contato de um card em uma mensagem.

Pré-requisitos

• Uma conta do Google Workspace Business ou Enterprise com acesso ao Google Chat.
• Crie um projeto do Google Cloud.

Objetivos

• Projete e crie interfaces do usuário (IUs) como objetos card e mostre as IUs em mensagens e caixas de diálogo.
• Receber e processar informações enviadas pelos usuários usando widgets de entrada de formulário.
• Responda a comandos com mensagens que contêm texto, cards e widgets de acessórios.

Arquitetura

O app Chat é integrado ao Google Apps Script (como um complemento do Google Workspace que estende o Google Chat) e responde a interações do usuário (onMessage, onAppCommand e cliques em botões que invocam openInitialDialog, openConfirmationDialog e submitForm) para processar e responder aos usuários do Chat.

Confira a seguir como um usuário normalmente interage com o app Chat:

1. Um usuário abre uma mensagem direta com o app Chat ou adiciona o app Chat a um espaço.

2. O app Chat pede que o usuário adicione um contato criando e mostrando um formulário de contato como um objeto card. Para apresentar o formulário de contato, o app Chat responde aos usuários das seguintes maneiras:

   • Responde a @menções e mensagens diretas (onMessage) com uma mensagem de card que contém o formulário de contato.
   • Responde ao comando de barra /addContact (onAppCommand) abrindo uma caixa de diálogo com o formulário de contato.
   • Responde ao comando de barra /about (onAppCommand) com uma mensagem de texto que tem um botão Adicionar um contato. Os usuários podem clicar nele para invocar openInitialDialog e abrir uma caixa de diálogo com o formulário de contato.

3. Ao receber o formulário de contato, o usuário insere informações de contato nos seguintes campos e widgets:

   • Nome e sobrenome: um widget textInput que aceita strings.
   • Data de nascimento: um widget dateTimePicker que aceita apenas datas.
   • Tipo de contato: um widget selectionInput de botões de opção que permite aos usuários selecionar e enviar um único valor de string (Personal ou Work).
   • Botão Analisar e enviar: uma matriz buttonList com um widget button em que o usuário clica para enviar os valores inseridos.

4. O app Google Chat invoca openConfirmationDialog para processar os valores inseridos pelo usuário e os mostra em um card de confirmação.

5. O usuário analisa o card de confirmação e clica no botão Enviar para invocar submitForm e finalizar as informações de contato.

6. O app Google Chat envia uma mensagem de texto particular confirmando o envio.

Prepare o ambiente

Esta seção mostra como configurar um projeto na nuvem do Google Cloud para o app Chat.

Abra seu projeto na nuvem no Console de APIs do Google.

Se ele ainda não estiver aberto, abra o projeto na nuvem que você pretende usar para esta amostra:

1. No console de APIs do Google, acesse a página Selecionar um projeto.

   Selecione um projeto na nuvem

2. Selecione o projeto do Google Cloud que você quer usar. Ou clique em Criar projeto e siga as instruções na tela. Se você criar um projeto do Google Cloud, talvez seja necessário ativar o faturamento dele.

Configurar a autenticação e a autorização

Os apps do Google Chat exigem que você configure uma tela de permissão OAuth para que os usuários possam autorizar seu app nos aplicativos do Google Workspace, incluindo o Google Chat.

Neste tutorial, você vai implantar um app do Chat apenas para testes e uso interno. Por isso, não há problema em usar informações de marcador de posição na tela de permissão. Antes de publicar o app do Chat, substitua todas as informações de marcador de posição por informações reais.

1. No console de APIs do Google, acesse Menu > Plataforma de autenticação do Google > Branding.

   Acessar Branding

2. Se você já configurou a plataforma de autenticação do Google, é possível configurar as seguintes configurações da tela de permissão OAuth em Branding, Público-alvo e Acesso a dados. Se você vir uma mensagem informando que A plataforma Auth do Google ainda não está configurada, clique em Começar:

   1. Em Informações do app, em Nome do app, digite Contact Manager.
   2. Em E-mail para suporte do usuário, selecione seu endereço de e-mail ou um grupo do Google adequado.
   3. Clique em Próxima.
   4. Em Público-alvo, selecione Interno. Se não for possível selecionar Interno, escolha Externo.
   5. Clique em Próxima.
   6. Em Informações de contato, insira um endereço de e-mail onde você possa receber notificações sobre mudanças no projeto.
   7. Clique em Próxima.
   8. Em Concluir, revise a Política de dados do usuário dos serviços de API do Google e, se concordar, selecione Concordo com a Política de dados do usuário dos serviços de API do Google.
   9. Clique em Continuar.
   10. Clique em Criar.
   11. Se você selecionou Externo como o tipo de usuário, adicione usuários de teste:
       1. Clique em Público-alvo.
       2. Em Usuários de teste, clique em Adicionar usuários.
       3. Insira seu endereço de e-mail e os outros usuários de teste autorizados. Depois, clique em Salvar.

Criar e implantar o app do Chat

Na seção a seguir, você vai criar e atualizar um projeto do Apps Script com o código do aplicativo (Code.gs e appsscript.json) para seu app do Chat.

Se quiser, confira o projeto inteiro no GitHub.

Ver no GitHub

Confira uma visão geral de cada arquivo:

Code.gs

Processa toda a lógica do app, incluindo interações do usuário (onMessage, onAppCommand, openInitialDialog, openConfirmationDialog e submitForm) e os widgets de entrada de formulário mostrados em cards em mensagens e caixas de diálogo.

Ver o código Code.gs

apps-script/chat/contact-form-app/Code.gs

Ver no GitHub

/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Responds to a message in Google Chat.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} response that handles dialogs.
 */
function onMessage(event) {
  // Reply with a message that contains a button to open the initial dialog
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "To add a contact, use the `ADD CONTACT` button below.",
    accessoryWidgets: [
      { buttonList: { buttons: [{
        text: "ADD CONTACT",
        onClick: { action: {
          function: "openInitialDialog",
          interaction: "OPEN_DIALOG"
        }}
      }]}}
    ]
  }}}}};
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} open the dialog.
 */
function openInitialDialog(event) {
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [
    { textInput: {
      name: "contactName",
      label: "First and last name",
      type: "SINGLE_LINE"
    }},
    { dateTimePicker: {
      name: "contactBirthdate",
      label: "Birthdate",
      type: "DATE_ONLY"
    }},
    { selectionInput: {
      name: "contactType",
      label: "Contact type",
      type: "RADIO_BUTTON",
      items: [
        { text: "Work", value: "Work", selected: false },
        { text: "Personal", value: "Personal", selected: false }
      ]
    }},
    { buttonList: { buttons: [{
      text: "NEXT",
      onClick: { action: { function : "openConfirmationDialog" }}
    }]}}
  ]}]}}]}};
}

/**
 * Opens the second step of the dialog that lets users confirm details.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} update the dialog.
 */
function openConfirmationDialog(event) {
  // Retrieve the form input values
  const name = event.commonEventObject.formInputs["contactName"].stringInputs.value[0];
  const birthdate = event.commonEventObject.formInputs["contactBirthdate"].dateInput.msSinceEpoch;
  const type = event.commonEventObject.formInputs["contactType"].stringInputs.value[0];
  // Display the input values for confirmation
  return { action: { navigations: [{ pushCard: { sections: [{ widgets: [
    { textParagraph: { text: "Confirm contact information and submit:" }},
    { textParagraph: { text: "<b>Name:</b> " + name }},
    { textParagraph: { text: "<b>Birthday:</b> " + new Date(birthdate) }},
    { textParagraph: { text: "<b>Type:</b> " + type }},
    { buttonList: { buttons: [{
      text: "SUBMIT",
      onClick: { action: {
        function: "submitDialog",
        // Pass input values as parameters for last dialog step (submission)
        parameters: [
          { key: "contactName", value: name },
          { key: "contactBirthdate", value: birthdate },
          { key: "contactType", value: type }
        ]
      }}
    }]}}
  ]}]}}]}};
}

/**
 * Handles submission and closes the dialog.
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} close the dialog with a status in text notification or message.
 */
function submitDialog(event) {
  // Validate the parameters.
  if (!event.commonEventObject.parameters["contactName"]) {
    return { action: {
      navigations: [{ endNavigation: { action: "CLOSE_DIALOG"}}],
      notification: { text: "Failure, the contact name was missing!" }
    }};
  }

  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: "✅ " + event.commonEventObject.parameters["contactName"] + " has been added to your contacts."
  }}}}};
}

appsscript.json

O manifesto do Apps Script que define e configura o projeto do Apps Script para o app do Chat.

Ver o código appsscript.json

apps-script/chat/contact-form-app/appsscript.json

Ver no GitHub

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Contact Form app",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/contact-icon.png"
    },
    "chat": {}
  }
}

Criar o projeto do Apps Script

Para criar um projeto do Apps Script com base nos arquivos Code.gs e appsscript.json:

1. Acesse Google Apps Script e clique em Novo projeto.

2. Nomeie seu projeto do Apps Script:

   1. Clique em Projeto sem título.

   2. Em Título do projeto, digite Contact Manager - Google Chat app.

   3. Clique em Renomear.

3. Substitua o conteúdo de Code.gs pelo exemplo de código Code.gs acima.

4. Clique em Configurações do projeto e selecione Mostrar arquivo de manifesto "appsscript.json" no editor.

5. Volte ao Editor e substitua o conteúdo de appsscript.json pelo código do manifesto appsscript.json acima. Depois, salve o projeto.

No futuro, se você quiser usar determinadas APIs do Google ou publicar seu app, será necessário associar seu projeto na nuvem ao projeto do Apps Script. Para este guia, não é necessário fazer isso. Para saber mais, consulte o guia de projetos do Google Cloud.

Criar uma implantação do Apps Script

Agora que todo o código está no lugar, implante o projeto do Apps Script. Você usa o ID de implantação ao configurar o app Chat no Google Cloud.

1. No Apps Script, abra o projeto do app Chat.

   Acessar o Apps Script

2. Clique em Implantar > Nova implantação.

3. Se Complemento ainda não estiver selecionado, ao lado de Selecionar tipo, clique em tipos de implantação e selecione Complemento.

4. Em Descrição, insira uma descrição para esta versão, como Test of Contact Manager.

5. Clique em Implantar. O Apps Script informa que a implantação foi concluída e fornece um ID de implantação.

6. Clique em Copiar para copiar o ID da implantação e clique em Concluído.

Configurar o app Chat no console de APIs do Google

Esta seção mostra como configurar a API Google Chat no console de APIs do Google com informações sobre seu app Chat, incluindo o ID da implantação que você acabou de criar no projeto do Apps Script.

1. No console de APIs do Google, clique em Menu > APIs e serviços > APIs e serviços ativados > API Google Chat > Configuração.

   Acessar a configuração da API Chat

2. Em Nome do app, digite Contact Manager.

3. Em URL do avatar, digite https://developers.google.com/chat/images/contact-icon.png.

4. Em Descrição, digite Manage your personal and business contacts.

5. Clique no botão Ativar recursos interativos para a posição ativada.

6. Em Funcionalidade, selecione Participar de espaços e conversas em grupo.

7. Em Configurações de conexão, selecione Apps Script.

8. Em ID de implantação, cole o ID de implantação do Apps Script que você copiou na seção anterior ao criar a implantação do Apps Script.

9. Em Gatilhos, configure as funções que respondem às interações do usuário:

   • No gatilho Mensagem, insira onMessage.
   • Para o gatilho Comando do app, insira onAppCommand.

10. Em Comandos, configure os comandos de barra /about e /addContact:

    1. Clique em Adicionar um comando para configurar o primeiro comando de barra.
    2. Em ID do comando, digite 1.
    3. Em Descrição, digite Learn how to use this Chat app to manage your contacts.
    4. Em Tipo de comando, selecione Slash command.
    5. Em Nome do comando de barra, digite /about.
    6. Clique em Concluído.
    7. Clique em Adicionar um comando para configurar outro comando de barra.
    8. Em ID do comando, digite 2.
    9. Em Descrição, digite Submit information about a contact.
    10. Em Tipo de comando, selecione Slash command.
    11. Em Nome do comando de barra, digite /addContact.
    12. Selecione Abre uma caixa de diálogo.
    13. Clique em Concluído.

11. Em Visibilidade, marque a caixa de seleção Disponibilize o app de chat para pessoas e grupos específicos em YOUR DOMAIN e digite seu endereço de e-mail.

12. Em Registros, selecione Registrar erros no Logging.

13. Clique em Salvar. Uma mensagem de configuração salva aparece.

O app Chat está pronto para ser instalado e testado no Chat.

Teste o app do Chat

Para testar o app do Chat, abra um espaço de mensagem direta com o app do Chat e envie uma mensagem:

1. Abra o Google Chat usando a conta do Google Workspace que você informou ao se adicionar como trusted tester.

   Acessar o Google Chat

2. Clique em Novo chat.
3. No campo Adicionar uma ou mais pessoas, digite o nome do seu app de chat.

4. Selecione seu app de chat nos resultados. Uma mensagem direta é aberta.

   Observação:se o app Chat não aparecer na lista de resultados, verifique se você incluiu sua conta do Google Workspace nas configurações de Visibilidade da página Configuração da API Chat no Console de APIs do Google.

1. Na nova mensagem direta com o app Chat, digite /addContact e pressione Enter.

2. Na caixa de diálogo exibida, insira as informações de contato:

   1. No campo de texto Nome e sobrenome, digite um nome.
   2. No seletor de data Data de nascimento, selecione uma data.
   3. Em Tipo de contato, selecione o botão de opção Trabalho ou Pessoal.

3. Clique em Revisar e enviar.

4. Na caixa de diálogo de confirmação, revise as informações enviadas e clique em Enviar. O app Chat responde com uma mensagem de texto que diz ✅ CONTACT NAME has been added to your contacts..

5. Também é possível testar e enviar o formulário de contato das seguintes maneiras:

   • Use o comando de barra /about. O app de chat responde com uma mensagem de texto e um botão de widget de acessório que diz Add a contact. Clique no botão para abrir uma caixa de diálogo com o formulário de contato.
   • Envie uma mensagem direta para o app Chat sem um comando de barra, como Hello. O app Chat responde com um texto e um card que contém o formulário de contato.

Limpar

Para evitar cobranças na sua conta do Google Cloud pelos recursos usados neste tutorial, recomendamos que você exclua o projeto na nuvem.

Atenção:excluir um projeto tem os seguintes efeitos:

• Tudo no projeto é excluído. Se você tiver usado um projeto atual para seguir este tutorial, a exclusão dele incluirá quaisquer outras ações feitas no projeto.
• Os IDs do projeto personalizados são perdidos. Ao criar o projeto, você pode ter criado um ID do projeto personalizado para ser usado no futuro. Para preservar os URLs que usam o ID do projeto, como um URL em appspot.com, exclua os recursos selecionados dentro do projeto em vez de todo o projeto.

Se você planeja explorar vários tutoriais e guias de início rápido, a reutilização de projetos pode evitar que você exceda os limites da cota do projeto.

1. No console de APIs do Google, acesse a página Gerenciar recursos. Clique em Menu > IAM e admin > Gerenciar recursos.

   Acessar o Resource Manager

2. Na lista de projetos, selecione o que você quer excluir e clique em Excluir .
3. Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.

Temas relacionados

• Responder a comandos
• Coletar e processar informações de usuários do Google Chat
• Abrir caixas de diálogo interativas
• Conheça outras amostras de apps do Google Chat

Apps de chat que não são complementos: gerenciar contatos do Google Chat

As instruções e os exemplos de código a seguir se aplicam a um app de chat que não é um complemento do Google Workspace (Conferir no GitHub).

Arquivos do Apps Script

main.gs

Processa toda a lógica do app, incluindo eventos de interação sobre quando os usuários enviam mensagens para o app Chat, clicam em botões de uma mensagem do app Chat ou abrem e fecham caixas de diálogo.

apps-script/contact-form-app/main.gs

Ver no GitHub

/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Responds to a MESSAGE interaction event in Google Chat.
 *
 * @param {Object} event the MESSAGE interaction event from Chat API.
 * @return {Object} message response that opens a dialog or sends private
 *                          message with text and card.
 */
function onMessage(event) {
  if (event.message.slashCommand) {
    switch (event.message.slashCommand.commandId) {
      case 1:
        // If the slash command is "/about", responds with a text message and button
        // that opens a dialog.
        return {
          text: "Manage your personal and business contacts 📇. To add a " +
                  "contact, use the slash command `/addContact`.",
          accessoryWidgets: [{
            buttonList: { buttons: [{
              text: "Add Contact",
              onClick: { action: {
                function: "openInitialDialog",
                interaction: "OPEN_DIALOG"
              }}
            }]}
          }]
        }
      case 2:
        // If the slash command is "/addContact", opens a dialog.
        return openInitialDialog();
    }
  }

  // If user sends the Chat app a message without a slash command, the app responds
  // privately with a text and card to add a contact.
  return {
    privateMessageViewer: event.user,
    text: "To add a contact, try `/addContact` or complete the form below:",
    cardsV2: [{
      cardId: "addContactForm",
      card: {
        header: { title: "Add a contact" },
        sections:[{ widgets: CONTACT_FORM_WIDGETS.concat([{
          buttonList: { buttons: [{
            text: "Review and submit",
            onClick: { action: { function : "openConfirmation" }}
          }]}
        }])}]
      }
    }]
  };
}

/**
 * Responds to CARD_CLICKED interaction events in Google Chat.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @return {Object} message responses specific to the dialog handling.
 */
function onCardClick(event) {
  // Initial dialog form page
  if (event.common.invokedFunction === "openInitialDialog") {
    return openInitialDialog();
  // Confirmation dialog form page
  } else if (event.common.invokedFunction === "openConfirmation") {
    return openConfirmation(event);
  // Submission dialog form page
  } else if (event.common.invokedFunction === "submitForm") {
    return submitForm(event);
  }
}

/**
 * Opens the initial step of the dialog that lets users add contact details.
 *
 * @return {Object} a message with an action response to open a dialog.
 */
function openInitialDialog() {
  return { actionResponse: {
    type: "DIALOG",
    dialogAction: { dialog: { body: { sections: [{
      header: "Add new contact",
      widgets: CONTACT_FORM_WIDGETS.concat([{
        buttonList: { buttons: [{
          text: "Review and submit",
          onClick: { action: { function: "openConfirmation" }}
        }]}
      }])
    }]}}}
  }};
}

/**
 * Returns the second step as a dialog or card message that lets users confirm details.
 *
 * @param {Object} event the interactive event with form inputs.
 * @return {Object} returns a dialog or private card message.
 */
function openConfirmation(event) {
  const name = fetchFormValue(event, "contactName") ?? "";
  const birthdate = fetchFormValue(event, "contactBirthdate") ?? "";
  const type = fetchFormValue(event, "contactType") ?? "";
  const cardConfirmation = {
    header: "Your contact",
    widgets: [{
      textParagraph: { text: "Confirm contact information and submit:" }}, {
      textParagraph: { text: "<b>Name:</b> " + name }}, {
      textParagraph: {
        text: "<b>Birthday:</b> " + convertMillisToDateString(birthdate)
      }}, {
      textParagraph: { text: "<b>Type:</b> " + type }}, {
      buttonList: { buttons: [{
        text: "Submit",
        onClick: { action: {
          function: "submitForm",
          parameters: [{
            key: "contactName", value: name }, {
            key: "contactBirthdate", value: birthdate }, {
            key: "contactType", value: type
          }]
        }}
      }]}
    }]
  };

  // Returns a dialog with contact information that the user input.
  if (event.isDialogEvent) {
    return { action_response: {
      type: "DIALOG",
      dialogAction: { dialog: { body: { sections: [ cardConfirmation ]}}}
    }};
  }

  // Updates existing card message with contact information that the user input.
  return {
    actionResponse: { type: "UPDATE_MESSAGE" },
    privateMessageViewer: event.user,
    cardsV2: [{
      card: { sections: [cardConfirmation]}
    }]
  }
}

/**
  * Validates and submits information from a dialog or card message
  * and notifies status.
  *
  * @param {Object} event the interactive event with parameters.
  * @return {Object} a message response that opens a dialog or posts a private
  *                  message.
  */
function submitForm(event) {
  const contactName = event.common.parameters["contactName"];
  // Checks to make sure the user entered a contact name.
  // If no name value detected, returns an error message.
  const errorMessage = "Don't forget to name your new contact!";
  if (!contactName && event.dialogEventType === "SUBMIT_DIALOG") {
    return { actionResponse: {
      type: "DIALOG",
      dialogAction: { actionStatus: {
        statusCode: "INVALID_ARGUMENT",
        userFacingMessage: errorMessage
      }}
    }};
  }
  if (!contactName) {
    return {
      privateMessageViewer: event.user,
      text: errorMessage
    };
  }

  // The Chat app indicates that it received form data from the dialog or card.
  // Sends private text message that confirms submission.
  const confirmationMessage = "✅ " + contactName + " has been added to your contacts.";
  if (event.dialogEventType === "SUBMIT_DIALOG") {
    return {
      actionResponse: {
        type: "DIALOG",
        dialogAction: { actionStatus: {
          statusCode: "OK",
          userFacingMessage: "Success " + contactName
        }}
      }
    };
  }
  return {
    actionResponse: { type: "NEW_MESSAGE" },
    privateMessageViewer: event.user,
    text: confirmationMessage
  };
}

/**
 * Extracts form input value for a given widget.
 *
 * @param {Object} event the CARD_CLICKED interaction event from Google Chat.
 * @param {String} widgetName a unique ID for the widget, specified in the widget's name field.
 * @returns the value inputted by the user, null if no value can be found.
 */
function fetchFormValue(event, widgetName) {
  const formItem = event.common.formInputs[widgetName][""];
  // For widgets that receive StringInputs data, the value input by the user.
  if (formItem.hasOwnProperty("stringInputs")) {
    const stringInput = event.common.formInputs[widgetName][""].stringInputs.value[0];
    if (stringInput != null) {
      return stringInput;
    }
  // For widgets that receive dateInput data, the value input by the user.
  } else if (formItem.hasOwnProperty("dateInput")) {
    const dateInput = event.common.formInputs[widgetName][""].dateInput.msSinceEpoch;
     if (dateInput != null) {
       return dateInput;
     }
  }

  return null;
}

/**
 * Converts date in milliseconds since epoch to user-friendly string.
 *
 * @param {Object} millis the milliseconds since epoch time.
 * @return {string} Display-friend date (English US).
 */
function convertMillisToDateString(millis) {
  const date = new Date(millis);
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return date.toLocaleDateString('en-US', options);
}

contactForm.gs

Contém os widgets que recebem dados de formulários dos usuários. Esses widgets de entrada de formulário são mostrados em cards que aparecem em mensagens e caixas de diálogo.

apps-script/contact-form-app/contactForm.gs

Ver no GitHub

/**
 * Copyright 2024 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * The section of the contact card that contains the form input widgets. Used in a dialog and card message.
 * To add and preview widgets, use the Card Builder: https://addons.gsuite.google.com/uikit/builder
 */
const CONTACT_FORM_WIDGETS = [
  {
    "textInput": {
      "name": "contactName",
      "label": "First and last name",
      "type": "SINGLE_LINE"
    }
  },
  {
    "dateTimePicker": {
      "name": "contactBirthdate",
      "label": "Birthdate",
      "type": "DATE_ONLY"
    }
  },
  {
    "selectionInput": {
      "name": "contactType",
      "label": "Contact type",
      "type": "RADIO_BUTTON",
      "items": [
        {
          "text": "Work",
          "value": "Work",
          "selected": false
        },
        {
          "text": "Personal",
          "value": "Personal",
          "selected": false
        }
      ]
    }
  }
];

appsscript.json

O manifesto do Apps Script que define e configura o projeto do Apps Script para o app do Chat que não é um complemento.

apps-script/contact-form-app/appsscript.json

Ver no GitHub

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "chat": {}
}

Criar e configurar o projeto do Apps Script

1. Abra o projeto do Apps Script Gerenciar contatos no Google Chat para um app do Chat que não seja um complemento e faça uma cópia.
2. Ao configurar a API Chat no Console de APIs do Google: Desmarque a opção Criar este app do Chat como um complemento do Google Workspace. Uma caixa de diálogo vai pedir para você confirmar. Na caixa de diálogo, clique em Desativar.