Raccogliere e gestire i contatti in Google Chat

Questo tutorial mostra come creare un'app Google Chat che aiuti gli utenti di Google Chat a gestire i propri contatti personali e aziendali. Per raccogliere informazioni, l'app Chat chiede agli utenti di compilare un modulo di contatto nei messaggi e nelle finestre di dialogo delle schede.

Guarda l'app Chat in azione:

• 

  Figura 1. L'app Chat risponde al comando slash /about con un messaggio di testo e un pulsante che apre un modulo di contatto.

• 
  Figura 2. L'app Chat apre una finestra di dialogo in cui gli utenti possono inserire informazioni su un contatto.
• 
  Figura 3. L'app Chat restituisce una finestra di dialogo di conferma in modo che gli utenti possano esaminare e confermare le informazioni prima dell'invio.
• 
  Figura 4. Dopo l'invio del modulo, l'app Chat invia un messaggio di testo privato per confermare l'invio.
• 
  Figura 5. L'app Chat chiede anche agli utenti di aggiungere un contatto da una scheda in un messaggio.

Prerequisiti

• Un account Google Workspace Business o Enterprise con accesso a Google Chat.
• Crea un progetto Google Cloud.

Obiettivi

• Progetta e crea interfacce utente (UI) come oggetti card e visualizza le UI in messaggi e finestre di dialogo.
• Ricevi ed elabora le informazioni inviate dagli utenti utilizzando i widget di input dei moduli.
• Rispondi ai comandi con messaggi che contengono testo, schede e widget per accessori.

Architettura

L'app Chat è integrata in Google Apps Script (come componente aggiuntivo di Google Workspace che estende Google Chat) e risponde alle interazioni degli utenti (onMessage, onAppCommand e clic sui pulsanti che richiamano openInitialDialog, openConfirmationDialog e submitForm) per elaborare e rispondere agli utenti di Chat.

Di seguito viene illustrato come un utente potrebbe interagire in genere con l'app Chat:

1. Un utente apre un messaggio diretto con l'app Chat o aggiunge l'app Chat a uno spazio esistente.

2. L'app Chat chiede all'utente di aggiungere un contatto creando e visualizzando un modulo di contatto come oggetto card. Per presentare il modulo di contatto, l'app Chat risponde agli utenti nei seguenti modi:

   • Risponde alle @menzioni e ai messaggi diretti (onMessage) con un messaggio scheda che contiene il modulo di contatto.
   • Risponde al comando slash /addContact (onAppCommand) aprendo una finestra di dialogo con il modulo di contatto.
   • Risponde al comando slash /about (onAppCommand) con un messaggio di testo che include un pulsante Aggiungi un contatto su cui gli utenti possono fare clic per richiamare openInitialDialog e aprire una finestra di dialogo con il modulo di contatto.

3. Quando viene visualizzato il modulo di contatto, l'utente inserisce i dati di contatto nei seguenti campi e widget:

   • Nome e cognome: un textInput widget che accetta stringhe.
   • Data di nascita: un dateTimePicker widget che accetta solo date.
   • Tipo di contatto: un selectionInput widget di pulsanti di opzione che consente agli utenti di selezionare e inviare un singolo valore stringa (Personal o Work).
   • Pulsante Rivedi e invia: un array buttonList con il widget button su cui l'utente fa clic per inviare i valori che ha inserito.

4. L'app Google Chat richiama openConfirmationDialog per elaborare i valori inseriti dall'utente e li visualizza in una scheda di conferma.

5. L'utente esamina la scheda di conferma e fa clic sul pulsante Invia per richiamare submitForm e finalizzare i dati di contatto.

6. L'app Google Chat invia un messaggio privato che conferma l'invio.

Prepara l'ambiente

Questa sezione mostra come configurare un progetto cloud Google per l'app Chat.

Apri il progetto Cloud nella console API di Google

Se non è già aperto, apri il progetto Cloud che intendi utilizzare per questo esempio:

1. Nella console API di Google, vai alla pagina Seleziona un progetto.

   Seleziona un progetto Cloud

2. Seleziona il progetto Google Cloud che vuoi utilizzare. In alternativa, fai clic su Crea progetto e segui le istruzioni sullo schermo. Se crei un progetto Google Cloud, potresti dover attivare la fatturazione per il progetto.

Configurare l'autenticazione e l'autorizzazione

Le app Google Chat richiedono la configurazione di una schermata per il consenso OAuth in modo che gli utenti possano autorizzare la tua app nelle applicazioni Google Workspace, tra cui Google Chat.

In questo tutorial, esegui il deployment di un'app Chat solo per test e uso interno, quindi puoi utilizzare informazioni segnaposto per la schermata per il consenso. Prima di pubblicare l'app Chat, sostituisci tutte le informazioni segnaposto con informazioni reali.

1. Nella console API di Google, vai a Menu > Piattaforma Google Auth > Branding.

   Vai a Branding

2. Se hai già configurato la piattaforma Google Auth, puoi configurare le seguenti impostazioni della schermata per il consenso OAuth in Branding, Pubblico e Accesso ai dati. Se viene visualizzato il messaggio Google Auth platform not configured yet (Google Auth Platform non ancora configurata), fai clic su Inizia:

   1. Nella sezione Informazioni sull'app, in Nome dell'app, digita Contact Manager.
   2. In Email di assistenza utenti, seleziona il tuo indirizzo email o un gruppo Google appropriato.
   3. Fai clic su Avanti.
   4. Nella sezione Pubblico, seleziona Interno. Se non riesci a selezionare Interno, seleziona Esterno.
   5. Fai clic su Avanti.
   6. Nella sezione Informazioni di contatto, inserisci un indirizzo email a cui ricevere notifiche relative a eventuali modifiche al tuo progetto.
   7. Fai clic su Avanti.
   8. In Fine, esamina le Norme relative ai dati utente dei servizi API di Google e, se le accetti, seleziona Accetto le Norme relative ai dati utente dei servizi API di Google.
   9. Fai clic su Continua.
   10. Fai clic su Crea.
   11. Se hai selezionato Esterno come tipo di utente, aggiungi utenti di test:
       1. Fai clic su Pubblico.
       2. Nella sezione Utenti di test, fai clic su Aggiungi utenti.
       3. Inserisci il tuo indirizzo email e gli altri utenti di test autorizzati, quindi fai clic su Salva.

Crea e distribuisci l'app di chat

Nella sezione seguente, crea e aggiorna un progetto Apps Script con il codice dell'applicazione (Code.gs e appsscript.json) per la tua app Chat.

Se vuoi, puoi visualizzare l'intero progetto su GitHub.

Visualizza su GitHub

Ecco una panoramica di ogni file:

Code.gs

Gestisce tutta la logica dell'app, incluse le interazioni dell'utente (onMessage, onAppCommand, openInitialDialog, openConfirmationDialog e submitForm) e i widget di input del modulo visualizzati nelle schede di messaggi e dialoghi.

Visualizza il codice Code.gs

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

Visualizza su 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

Il manifest di Apps Script che definisce e configura il progetto Apps Script per l'app Chat.

Visualizza il codice appsscript.json

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

Visualizza su 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": {}
  }
}

Crea il progetto Apps Script

Per creare un progetto Apps Script dai file Code.gs e appsscript.json:

1. Vai a Google Apps Script e fai clic su Nuovo progetto.

2. Assegna un nome al tuo progetto Apps Script:

   1. Fai clic su Progetto senza titolo.

   2. In Titolo del progetto, digita Contact Manager - Google Chat app.

   3. Fai clic su Rinomina.

3. Sostituisci i contenuti di Code.gs con il codice campione Code.gs riportato sopra.

4. Fai clic su Impostazioni progetto e seleziona Mostra il file manifest "appsscript.json" nell'editor.

5. Torna all'Editor e sostituisci i contenuti di appsscript.json con il codice manifest appsscript.json riportato sopra, poi salva il progetto.

In futuro, se vuoi utilizzare determinate API di Google o pubblicare la tua app, devi associare il tuo progetto Cloud al tuo progetto Apps Script. Per questa guida non è necessario. Per saperne di più, consulta la guida ai progetti Google Cloud.

Crea un deployment Apps Script

Ora che tutto il codice è pronto, esegui il deployment del progetto Apps Script. Utilizzi l'ID deployment quando configuri l'app di chat in Google Cloud.

1. In Apps Script, apri il progetto dell'app Chat.

   Vai ad Apps Script

2. Fai clic su Esegui il deployment > Nuovo deployment.

3. Se Componente aggiuntivo non è già selezionato, accanto a Seleziona tipo, fai clic sui tipi di deployment e seleziona Componente aggiuntivo.

4. In Descrizione, inserisci una descrizione per questa versione, ad esempio Test of Contact Manager.

5. Fai clic su Esegui il deployment. Apps Script segnala il deployment riuscito e fornisce un ID deployment.

6. Fai clic su Copia per copiare l'ID deployment e poi su Fine.

Configurare l'app Chat nella console API di Google

Questa sezione mostra come configurare l'API Google Chat nella console API di Google con informazioni sulla tua app Chat, incluso l'ID del deployment che hai appena creato dal tuo progetto Apps Script.

1. Nella console API di Google, fai clic su Menu > API e servizi > API e servizi abilitati > API Google Chat > Configurazione.

   Vai alla configurazione dell'API Chat

2. In Nome app, digita Contact Manager.

3. In URL avatar, digita https://developers.google.com/chat/images/contact-icon.png.

4. In Descrizione, digita Manage your personal and business contacts.

5. Fai clic sul pulsante di attivazione/disattivazione Abilita funzionalità interattive in modo che sia impostato su On.

6. Nella sezione Funzionalità, seleziona Partecipa a spazi e conversazioni di gruppo.

7. Nella sezione Impostazioni di connessione, seleziona Apps Script.

8. In ID deployment, incolla l'ID deployment di Apps Script che hai copiato nella sezione precedente quando hai creato il deployment di Apps Script.

9. In Trigger, configura le funzioni che rispondono alle interazioni dell'utente:

   • Per il trigger Messaggio, inserisci onMessage.
   • Per il trigger Comando app, inserisci onAppCommand.

10. In Comandi, configura i comandi slash /about e /addContact:

    1. Fai clic su Aggiungi un comando per configurare il primo comando slash.
    2. In ID comando, digita 1.
    3. In Descrizione, digita Learn how to use this Chat app to manage your contacts.
    4. In Tipo di comando, seleziona Slash command.
    5. In Nome comando slash, digita /about.
    6. Fai clic su Fine.
    7. Fai clic su Aggiungi un comando per configurare un altro comando slash.
    8. In ID comando, digita 2.
    9. In Descrizione, digita Submit information about a contact.
    10. In Tipo di comando, seleziona Slash command.
    11. In Nome comando slash, digita /addContact.
    12. Seleziona Si apre una finestra di dialogo.
    13. Fai clic su Fine.

11. Nella sezione Visibilità, seleziona la casella di controllo Rendi disponibile l'app di chat a utenti e gruppi specifici in YOUR DOMAIN e inserisci il tuo indirizzo email.

12. In Log, seleziona Errori di log in Logging.

13. Fai clic su Salva. Viene visualizzato un messaggio di conferma del salvataggio della configurazione.

L'app Chat è pronta per l'installazione e il test in Chat.

Testare l'app Chat

Per testare l'app di Chat, apri uno spazio di messaggi diretti con l'app di Chat e invia un messaggio:

1. Apri Google Chat utilizzando l'account Google Workspace che hai fornito quando ti sei aggiunto come tester attendibile.

   Vai a Google Chat

2. Fai clic su Nuova chat.
3. Nel campo Aggiungi una o più persone, digita il nome della tua app di Chat.

4. Seleziona l'app di chat dai risultati. Si apre un messaggio diretto.

   Nota:se non vedi la tua app di Chat nell'elenco dei risultati, assicurati di aver incluso il tuo account Google Workspace nelle impostazioni di visibilità della pagina di configurazione dell'API di Chat nella console API di Google.

1. Nel nuovo messaggio diretto con l'app di Chat, digita /addContact e premi Invio.

2. Nella finestra di dialogo che si apre, inserisci i dati di contatto:

   1. Nel campo di testo Nome e cognome, inserisci un nome.
   2. Nel selettore della data Data di nascita, seleziona una data.
   3. In Tipo di contatto, seleziona il pulsante di opzione Lavoro o Personale.

3. Fai clic su Rivedi e invia.

4. Nella finestra di dialogo di conferma, rivedi le informazioni che hai inviato e fai clic su Invia. L'app Chat risponde con un messaggio di testo che dice ✅ CONTACT NAME has been added to your contacts..

5. In alternativa, puoi anche testare e inviare il modulo di contatto nei seguenti modi:

   • Utilizza il comando slash /about. L'app di chat risponde con un messaggio di testo e un pulsante del widget accessorio con il testo Add a contact. Puoi fare clic sul pulsante per aprire una finestra di dialogo con il modulo di contatto.
   • Invia all'app Chat un messaggio diretto senza un comando slash, ad esempio Hello. L'app Chat risponde con un testo e una scheda contenente il modulo di contatto.

Esegui la pulizia

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo tutorial, ti consigliamo di eliminare il progetto Cloud.

Attenzione: l'eliminazione di un progetto ha i seguenti effetti:

• L'intero contenuto del progetto viene eliminato. Se hai utilizzato un progetto esistente per questo tutorial, quando lo eliminerai, eliminerai anche tutto il lavoro che hai svolto nel progetto.
• Gli ID progetto personalizzati non sono più disponibili. Quando hai creato questo progetto, potresti aver creato un ID progetto personalizzato che vuoi utilizzare in futuro. Per conservare gli URL che utilizzano l'ID progetto, ad esempio un URL su appspot.com, elimina le risorse selezionate all'interno del progetto anziché eliminare l'intero progetto.

Se intendi esplorare più tutorial e guide rapide, puoi riutilizzare i progetti ed evitare così di superare i limiti di quota.

1. Nella console API di Google, vai alla pagina Gestisci risorse. Fai clic su Menu > IAM e amministrazione > Gestisci risorse.

   Vai a Resource Manager

2. Nell'elenco dei progetti, seleziona quello che vuoi eliminare e poi fai clic su Elimina .
3. Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto.

Argomenti correlati

• Rispondere ai comandi
• Raccogliere ed elaborare le informazioni degli utenti di Google Chat
• Aprire finestre di dialogo interattive
• Esplora altri esempi di app di Chat per Google Chat

App di chat che non sono componenti aggiuntivi: gestire i contatti da Google Chat

Le seguenti istruzioni e gli esempi di codice si applicano a un'app Chat che non è un componente aggiuntivo di Google Workspace (Visualizza su GitHub).

File Apps Script

main.gs

Gestisce tutta la logica dell'app, inclusi gli eventi di interazione relativi a quando gli utenti inviano messaggi all'app Chat, fanno clic sui pulsanti di un messaggio dell'app Chat o aprono e chiudono le finestre di dialogo.

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

Visualizza su 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

Contiene i widget che ricevono i dati del modulo dagli utenti. Questi widget di input del modulo vengono visualizzati nelle schede che compaiono nei messaggi e nelle finestre di dialogo.

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

Visualizza su 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

Il manifest Apps Script che definisce e configura il progetto Apps Script per l'app di chat che non è un componente aggiuntivo.

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

Visualizza su GitHub

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

Crea e configura il progetto Apps Script

1. Apri il progetto Gestisci i contatti in Google Chat Apps Script per un'app Chat che non è un componente aggiuntivo e crea una copia.
2. Quando configuri l'API Chat nella console API di Google: Deseleziona Crea questa app di Chat come componente aggiuntivo di Google Workspace. Si apre una finestra di dialogo in cui ti viene chiesto di confermare. Nella finestra di dialogo, fai clic su Disattiva.