Cette page a été traduite par l'API Cloud Translation.

Créer une fiche de configuration pour une étape

Ce guide explique comment créer une fiche de configuration qui permet aux utilisateurs de personnaliser une étape dans Google Workspace Flows et de fournir des entrées pour celle-ci.

En général, pour créer une fiche de configuration, vous devez créer une interface de fiche comme pour tout autre module complémentaire Google Workspace. Pour obtenir de l'aide concernant la création d'interfaces de cartes de configuration, consultez les ressources suivantes :

Card Builder, un outil interactif qui vous aide à créer et à définir des fiches.
Card dans la documentation de référence de l'API des modules complémentaires Google Workspace.
Card Service, un service Apps Script qui permet aux scripts de configurer et de créer des fiches.
Interfaces basées sur des fiches dans la documentation pour les développeurs de modules complémentaires Google Workspace.

Certains widgets de carte disposent de fonctionnalités et de caractéristiques spécifiques à Workspace Flows, détaillées dans ce guide.

Définir une fiche de configuration

Définissez une fiche de configuration dans le fichier manifeste Apps Script et dans le code.

L'exemple suivant montre comment créer une fiche de configuration qui demande aux utilisateurs de sélectionner un espace Google Chat.

Modifier le fichier manifeste

Dans le fichier manifeste, définissez workflowElements.

JSON

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Sample add-on",
      "logoUrl": "https://www.gstatic.com/images/branding/productlogos/gsuite_addons/v6/web-24dp/logo_gsuite_addons_color_1x_web_24dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "actionElement",
          "state": "ACTIVE",
          "name": "Chat space selector",
          "description": "Lets the user select a space from Google  Chat",
          "workflowAction": {
            "inputs": [
              {
                "id": "chooseSpace",
                "description": "Choose a Chat space",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "onConfigFunction": "onConfigSpacePicker",
            "onExecuteFunction": "onExecuteCalculate"
          }
        }
      ]
    }
  }
}

Modifier le code

Dans le code de l'application, renvoyez une carte.

Apps Script

/**
* Generates and displays a configuration card to choose a Chat space
  */
function onConfigSpacePicker() {
  var card = {
    "sections": [
      {
        "header": "Choose a Chat space",
        "widgets": [
          {
            "selectionInput": {
              "name": "value1",
              "label": "First value",
              "type": "MULTI_SELECT",
              "platformDataSource": {
                "hostAppDataSource": {
                  "workflowDataSource": {
                    "includeVariables": true,
                    "type": "SPACE"
                  }
                }
              }
            }
          }
        ]
      }
    ]
  };
  return {
    "action": {
      "navigations": [{
        "push_card": card
      }]
    }
  };
}

Configurer la saisie semi-automatique pour les widgets de saisie

Vous pouvez configurer la saisie semi-automatique pour les widgets SelectionInput afin d'aider les utilisateurs à faire leur choix dans une liste d'options. Par exemple, si un utilisateur commence à saisir Atl pour un menu qui affiche les villes des États-Unis, votre élément peut suggérer automatiquement Atlanta avant que l'utilisateur ait fini de saisir. Vous pouvez saisir automatiquement jusqu'à 100 éléments.

Les suggestions de saisie automatique peuvent provenir des sources de données suivantes :

Saisie semi-automatique côté serveur : les suggestions sont générées à partir d'une source de données tierce ou externe que vous définissez.
Données Google Workspace : les suggestions proviennent de sources Google Workspace, comme les utilisateurs Google Workspace ou les espaces Google Chat.

Saisie semi-automatique côté serveur

Vous pouvez configurer un widget SelectionInput pour compléter automatiquement les suggestions à partir d'une source de données externe. Par exemple, vous pouvez aider les utilisateurs à sélectionner des prospects commerciaux dans un système de gestion de la relation client (CRM).

Pour implémenter l'autocomplete côté serveur, vous devez :

Définissez la source de données : dans le widget SelectionInput, ajoutez un DataSourceConfig qui spécifie un RemoteDataSource. Cette configuration pointe vers une fonction Apps Script qui récupère les suggestions de saisie semi-automatique.
Implémentez la fonction de saisie semi-automatique : cette fonction est déclenchée lorsque l'utilisateur saisit du texte dans le champ de saisie. La fonction doit interroger votre source de données externe en fonction de la saisie de l'utilisateur et renvoyer une liste de suggestions.

L'exemple suivant montre comment configurer un widget SelectionInput pour l'autocomplete côté serveur :

Apps Script

// In your onConfig function:
var multiSelect1 =
  CardService.newSelectionInput()
    .setFieldName("value1")
    .setTitle("Server Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .addDataSourceConfig(
      CardService.newDataSourceConfig()
        .setRemoteDataSource(
          CardService.newAction().setFunctionName('getAutocompleteResults')
        )
    )
    .addDataSourceConfig(
      CardService.newDataSourceConfig()
        .setPlatformDataSource(
          CardService.newPlatformDataSource()
            .setHostAppDataSource(
              CardService.newHostAppDataSource()
                .setWorkflowDataSource(
                  CardService.newWorkflowDataSource()
                    .setIncludeVariables(true)
                ))
        )
    );

// ... add widget to card ...

Gérer la requête de saisie semi-automatique

La fonction spécifiée dans setFunctionName (par exemple, getAutocompleteResults) reçoit un objet d'événement lorsque l'utilisateur saisit du texte dans le champ. Cette fonction doit :

Vérifiez que event.workflow.elementUiAutocomplete.invokedFunction correspond au nom de fonction attendu.
Obtenez l'entrée de l'utilisateur à partir de event.workflow.elementUiAutocomplete.query.
Interrogez la source de données externe à l'aide de la requête.
Renvoie jusqu'à 100 suggestions au format requis.

L'exemple suivant montre comment implémenter la fonction handleAutocompleteRequest() pour renvoyer des suggestions en fonction de la requête de l'utilisateur :

Apps Script

function handleAutocompleteRequest(event) {
  var invokedFunction = event.workflow.elementUiAutocomplete.invokedFunction;
  var query = event.workflow.elementUiAutocomplete.query;

  if (invokedFunction != "getAutocompleteResults" || query == undefined || query == "") {
    return {};
  }

  // Query your data source to get results based on the query
  var autocompleteResponse = [
    {
      "text": query + " option 1",
      "value": query + "_option1",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    },
    {
      "text": query + " option 2",
      "value": query + "_option2",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "bottom_text": "subtitle of option 2"
    },
    {
      "text": query + " option 3",
      "value": query + "_option3",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    }
  ];

  var response = {
    "action": {
      "modify_operations": [
        {
          "update_widget": {
            "selection_input_widget_suggestions": {
              "suggestions": autocompleteResponse
            }
          }
        }
      ]
    }
  };
  return response;
}

// In your onConfig function, handle the autocomplete event
function onConfigAutocompleteTest(event) {
  // Handle autocomplete request
  if (event.workflow && event.workflow.elementUiAutocomplete) {
    return handleAutocompleteRequest(event);
  }

  // ... rest of your card building logic ...
}

Saisie semi-automatique des données Google Workspace

Vous pouvez également remplir les suggestions de saisie semi-automatique à partir des données de l'environnement Google Workspace de l'utilisateur :

Utilisateurs Google Workspace : remplissez les utilisateurs au sein de la même organisation Google Workspace.
Espaces Google Chat : remplissez les espaces Google Chat dont l'utilisateur est membre.

Pour configurer cela, définissez PlatformDataSource dans le widget SelectionInput, en spécifiant WorkflowDataSourceType sur USER ou SPACE.

Apps Script

// User Autocomplete
var multiSelect2 =
  CardService.newSelectionInput()
    .setFieldName("value2")
    .setTitle("User Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.USER)
            ))
    );

// Chat Space Autocomplete
var multiSelect3 =
  CardService.newSelectionInput()
    .setFieldName("value3")
    .setTitle("Chat Space Autocomplete")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setMultiSelectMaxSelectedItems(3)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.SPACE)
            ))
    );

Exemple : Combiner des types de saisie semi-automatique

L'exemple suivant montre une fonction onConfig qui crée une fiche avec trois widgets SelectionInput, illustrant l'autocomplete côté serveur, utilisateur et espace :

Apps Script

function onConfigAutocompleteTest(event) {
  // Handle autocomplete request
  if (event.workflow && event.workflow.elementUiAutocomplete) {
    return handleAutocompleteRequest(event);
  }

  // Server-side autocomplete widget
  var multiSelect1 =
    CardService.newSelectionInput()
      .setFieldName("value1")
      .setTitle("Server Autocomplete")
      .setType(CardService.SelectionInputType.MULTI_SELECT)
      .setMultiSelectMaxSelectedItems(3)
      .addDataSourceConfig(
        CardService.newDataSourceConfig()
          .setRemoteDataSource(
            CardService.newAction().setFunctionName('getAutocompleteResults')
          )
      )
      .addDataSourceConfig(
        CardService.newDataSourceConfig()
          .setPlatformDataSource(
            CardService.newPlatformDataSource()
              .setHostAppDataSource(
                CardService.newHostAppDataSource()
                  .setWorkflowDataSource(
                    CardService.newWorkflowDataSource()
                      .setIncludeVariables(true)
                  ))
          )
      );

  // User autocomplete widget
  var multiSelect2 =
    CardService.newSelectionInput()
      .setFieldName("value2")
      .setTitle("User Autocomplete")
      .setType(CardService.SelectionInputType.MULTI_SELECT)
      .setMultiSelectMaxSelectedItems(3)
      .setPlatformDataSource(
        CardService.newPlatformDataSource()
          .setHostAppDataSource(
            CardService.newHostAppDataSource()
              .setWorkflowDataSource(
                CardService.newWorkflowDataSource()
                  .setIncludeVariables(true)
                  .setType(CardService.WorkflowDataSourceType.USER)
              ))
      );

  // Space autocomplete widget
  var multiSelect3 =
    CardService.newSelectionInput()
      .setFieldName("value3")
      .setTitle("Chat Space Autocomplete")
      .setType(CardService.SelectionInputType.MULTI_SELECT)
      .setMultiSelectMaxSelectedItems(3)
      .setPlatformDataSource(
        CardService.newPlatformDataSource()
          .setHostAppDataSource(
            CardService.newHostAppDataSource()
              .setWorkflowDataSource(
                CardService.newWorkflowDataSource()
                  .setIncludeVariables(true)
                  .setType(CardService.WorkflowDataSourceType.SPACE)
              ))
      );

  var sectionBuilder =
    CardService.newCardSection()
      .addWidget(multiSelect1)
      .addWidget(multiSelect2)
      .addWidget(multiSelect3);

  var card =
    CardService.newCardBuilder()
      .addSection(sectionBuilder)
      .build();
  return card;
}

function handleAutocompleteRequest(event) {
  var invokedFunction = event.workflow.elementUiAutocomplete.invokedFunction;
  var query = event.workflow.elementUiAutocomplete.query;

  if (invokedFunction != "getAutocompleteResults" || query == undefined || query == "") {
    return {};
  }

  // Query your data source to get results
  var autocompleteResponse = [
    {
      "text": query + " option 1",
      "value": query + "_option1",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    },
    {
      "text": query + " option 2",
      "value": query + "_option2",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "bottom_text": "subtitle of option 2"
    },
    {
      "text": query + " option 3",
      "value": query + "_option3",
      "start_icon_uri": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
    }
  ];

  var response = {
    "action": {
      "modify_operations": [
        {
          "update_widget": {
            "selection_input_widget_suggestions": {
              "suggestions": autocompleteResponse
            }
          }
        }
      ]
    }
  };
  return response;
}

Fonctionnalités spécifiques à Workspace Flows

Certains widgets de carte possèdent des fonctionnalités spécifiques à Workspace Flows, détaillées ici.

TextInput et SelectionInput

Les widgets TextInput et SelectionInput disposent des fonctionnalités spécifiques à Workspace Flows suivantes :

includeVariables : propriété booléenne qui permet aux utilisateurs de sélectionner des variables à partir des étapes précédentes.
type : valeur énumérée qui complète automatiquement les suggestions. Les valeurs acceptées sont les suivantes :
- USER : fournit des suggestions de saisie semi-automatique pour les personnes figurant dans les contacts de l'utilisateur.
- SPACE : fournit des suggestions de saisie semi-automatique pour les espaces Google Chat dont l'utilisateur est membre.

Lorsque includeVariables et type sont définis, le champ d'entrée combine leurs expériences. Les utilisateurs peuvent sélectionner une variable du type correspondant dans un menu déroulant et voir des suggestions de saisie automatique.

Figure 1 : Un utilisateur examine les suggestions de saisie semi-automatique lorsqu'il choisit un espace.
Figure 2 : Un utilisateur sélectionne la variable de sortie d'une étape précédente dans le menu déroulant ➕ Variables.

Remarques et limites concernant les cartes

La navigation par fiche, comme popCard(), pushCard() et updateCard(), n'est pas prise en charge dans les modules complémentaires qui étendent les flux.
Lorsque SelectionInput est utilisé dans un sélecteur de variables, les widgets ne sont compatibles qu'avec "type": "MULTI_SELECT". Ailleurs dans les cartes de configuration, SelectionInput accepte toutes les valeurs de SelectionType.

Créer une fiche de configuration pour une étape Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Définir une fiche de configuration

Modifier le fichier manifeste

JSON

Modifier le code

Apps Script

Configurer la saisie semi-automatique pour les widgets de saisie

Saisie semi-automatique côté serveur

Apps Script

Gérer la requête de saisie semi-automatique

Apps Script

Saisie semi-automatique des données Google Workspace

Apps Script

Exemple : Combiner des types de saisie semi-automatique

Apps Script

Fonctionnalités spécifiques à Workspace Flows

TextInput et SelectionInput

Remarques et limites concernant les cartes

Articles associés

Créer une fiche de configuration pour une étape