Эта страница переведена с помощью Cloud Translation API.

Создайте карту конфигурации для шага

В этом руководстве объясняется, как создать карточку конфигурации, которая позволит пользователям настраивать и вводить входные данные для шага в Google Workspace Flows.

Как правило, для создания карточки конфигурации необходимо создать интерфейс карточки, как и для любого другого дополнения Google Workspace. Инструкции по созданию интерфейсов карточек конфигурации см. в следующих разделах:

Card Builder — интерактивный инструмент, который поможет вам создавать и определять карты.
Карточка в справочной документации API дополнений Google Workspace.
Card Service — служба Apps Script, позволяющая скриптам настраивать и создавать карты.
Интерфейсы на основе карт в документации для разработчиков дополнений Google Workspace.

Некоторые виджеты карточек обладают специальными функциями и возможностями, характерными для Workspace Flows, которые подробно описаны в этом руководстве.

Определить карту конфигурации

Определите карту конфигурации как в манифесте Apps Script, так и в коде.

В следующем примере показано, как создать карточку конфигурации, которая предлагает пользователям выбрать пространство Google Chat.

Редактировать файл манифеста

В файле манифеста определите 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"
          }
        }
      ]
    }
  }
}

Изменить код

В заявке код возврата карты.

Скрипт приложений

/**
* 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
      }]
    }
  };
}

Настройте автозаполнение для виджетов ввода

Вы можете настроить автодополнение для виджетов SelectionInput , чтобы помочь пользователям выбирать из списка вариантов. Например, если пользователь начинает вводить Atl для меню, в котором представлены города США, ваш элемент может автоматически предложить Atlanta до того, как пользователь закончит вводить. Вы можете автодополнить до 100 пунктов.

Предложения автозаполнения могут поступать из следующих источников данных:

Автозаполнение на стороне сервера: предложения заполняются из стороннего или внешнего источника данных, который вы определяете.
Данные Google Workspace: предложения заполняются из источников Google Workspace, таких как пользователи Google Workspace или пространства Google Chat.

Автозаполнение на стороне сервера

Вы можете настроить виджет SelectionInput для автозаполнения подсказок из внешнего источника данных. Например, вы можете помочь пользователям выбирать из списка потенциальных клиентов из системы управления взаимоотношениями с клиентами (CRM).

Чтобы реализовать автодополнение на стороне сервера, вам необходимо:

Определите источник данных: в виджете SelectionInput добавьте DataSourceConfig , указывающий RemoteDataSource . Эта конфигурация указывает на функцию Apps Script, которая получает подсказки автозаполнения.
Реализуйте функцию автодополнения: эта функция активируется, когда пользователь вводит данные в поле ввода. Функция должна запрашивать данные из внешнего источника на основе введенных пользователем данных и возвращать список вариантов.

В следующем примере показано, как настроить виджет SelectionInput для автозаполнения на стороне сервера:

Скрипт приложений

// 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 ...

Обработать запрос автозаполнения

Функция, указанная в setFunctionName (например, getAutocompleteResults ), получает объект события, когда пользователь вводит данные в поле. Эта функция должна:

Проверьте event.workflow.elementUiAutocomplete.invokedFunction , чтобы убедиться, что он соответствует ожидаемому имени функции.
Получите вводимые пользователем данные из event.workflow.elementUiAutocomplete.query .
Выполните запрос к внешнему источнику данных с помощью запроса.
Возвращает до 100 предложений в требуемом формате.

В следующем примере показано, как реализовать функцию handleAutocompleteRequest() для возврата предложений на основе запроса пользователя:

Скрипт приложений

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 ...
}

Автозаполнение данных Google Workspace

Вы также можете заполнять подсказки автозаполнения на основе данных из среды Google Workspace пользователя:

Пользователи Google Workspace: заполните пользователей в пределах одной организации Google Workspace.
Пространства Google Chat: заполнение пространств Google Chat, в которых состоит пользователь.

Чтобы настроить это, задайте PlatformDataSource в виджете SelectionInput , указав WorkflowDataSourceType как USER или SPACE .

Скрипт приложений

// 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)
            ))
    );

Пример: объединение типов автозаполнения

В следующем примере показана функция onConfig , которая создает карточку с тремя виджетами SelectionInput , демонстрируя автозаполнение на стороне сервера, пользователя и пространства:

Скрипт приложений

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;
}

Особенности Workspace Flows

Некоторые виджеты карточек обладают специальными функциями и возможностями, характерными для Workspace Flows, которые подробно описаны здесь.

Ввод текста и выборка

Виджеты TextInput и SelectionInput обладают следующими специфичными для Workspace Flows функциями:

includeVariables : логическое свойство, которое позволяет пользователям выбирать переменные из предыдущих шагов.
type : перечисляемое значение, которое автоматически дополняет предложения. Поддерживаемые значения:
- USER : Предоставляет предложения по автозаполнению для людей из списка контактов пользователя.
- SPACE : предлагает варианты автозаполнения для пространств Google Chat, в которых участвует пользователь.

Если заданы оба includeVariables и type , поле ввода объединяет их данные. Пользователи могут выбрать переменную соответствующего type из раскрывающегося списка и увидеть варианты автозаполнения для неё.

Рисунок 1: Пользователь просматривает предложения автозаполнения при выборе пространства.
Рисунок 2: Пользователь выбирает выходную переменную предыдущего шага из раскрывающегося списка ➕Переменные.

Особенности и ограничения карты

Карточная навигация, такая как popCard() , pushCard() и updateCard() , не поддерживается в надстройках, расширяющих Flows.
При использовании SelectionInput в селекторе переменных виджеты поддерживают только "type": "MULTI_SELECT" . В других местах карт конфигурации SelectionInput поддерживает все значения SelectionType .

Создайте карту конфигурации для шага Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Определить карту конфигурации

Редактировать файл манифеста

JSON

Изменить код

Скрипт приложений

Настройте автозаполнение для виджетов ввода

Автозаполнение на стороне сервера

Скрипт приложений

Обработать запрос автозаполнения

Скрипт приложений

Автозаполнение данных Google Workspace

Скрипт приложений

Пример: объединение типов автозаполнения

Скрипт приложений

Особенности Workspace Flows

Ввод текста и выборка

Особенности и ограничения карты

Похожие темы

Создайте карту конфигурации для шага