Bir adım için yapılandırma kartı oluşturma

Bu kılavuzda, kullanıcıların Google Workspace Studio'daki bir adımı özelleştirmesine ve bu adıma giriş sağlamasına olanak tanıyan bir yapılandırma kartının nasıl oluşturulacağı açıklanmaktadır.

Genel olarak, yapılandırma kartı oluşturmak için diğer Google Workspace eklentilerinde olduğu gibi bir kart arayüzü oluşturursunuz. Yapılandırma kartı arayüzleri oluşturma konusunda yardım almak için aşağıdaki kaynaklara bakın:

  • Kart oluşturmanıza ve tanımlamanıza yardımcı olan etkileşimli bir araç olan Kart Oluşturucu.
  • Google Workspace Eklentileri API referans belgelerindeki Kart.
  • Card Service, komut dosyalarının kartları yapılandırmasına ve oluşturmasına olanak tanıyan bir Apps Komut Dosyası hizmetidir.
  • Google Workspace eklentileri geliştirici belgelerindeki kart tabanlı arayüzler.

Bazı kart widget'ları, bu kılavuzda ayrıntılı olarak açıklanan Workspace Studio'ya özel işlevler ve özellikler içerir.

Yapılandırma kartı tanımlama

Hem Apps Komut Dosyası manifestinde hem de kodda bir yapılandırma kartı tanımlayın.

Aşağıdaki örnekte, kullanıcılardan Google Chat alanı seçmelerini isteyen bir yapılandırma kartının nasıl oluşturulacağı gösterilmektedir.

Manifest dosyasını düzenleme

Manifest dosyasında workflowElements öğesini tanımlayın.

JSON

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Chat space selector",
      "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": "onExecuteSpacePicker"
          }
        }
      ]
    }
  }
}

Kodu düzenle

Uygulama kodunda bir kart döndürün.

Apps Komut Dosyası

/**
 * Generates and displays a configuration card to choose a Chat space
 */
function onConfigSpacePicker() {

  const selectionInput = CardService.newSelectionInput()
    .setTitle("First Value")
    .setFieldName("chooseSpace")
    .setType(CardService.SelectionInputType.MULTI_SELECT)
    .setPlatformDataSource(
      CardService.newPlatformDataSource()
        .setHostAppDataSource(
          CardService.newHostAppDataSource()
            .setWorkflowDataSource(
              CardService.newWorkflowDataSource()
                .setIncludeVariables(true)
                .setType(CardService.WorkflowDataSourceType.SPACE)
            )
        )
    );

  const cardSection = CardService.newCardSection()
    .setHeader("Select Chat Space")
    .setId("section_1")
    .addWidget(selectionInput)

  var card = CardService.newCardBuilder()
    .addSection(cardSection)
    .build();

  return card;
}

function onExecuteSpacePicker(e) {
}

Giriş widget'ları için otomatik tamamlama özelliğini ayarlama

Kullanıcıların seçenek listesinden seçim yapmasına yardımcı olmak için SelectionInput widget'larında otomatik tamamlamayı yapılandırabilirsiniz. Örneğin, bir kullanıcı ABD'deki şehirleri dolduran bir menü için Atl yazmaya başlarsa kullanıcı yazmayı bitirmeden önce öğeniz Atlanta için otomatik öneride bulunabilir. En fazla 100 öğeyi otomatik olarak tamamlayabilirsiniz.

Otomatik tamamlama önerileri aşağıdaki veri kaynaklarından gelebilir:

  • Sunucu tarafı otomatik tamamlama: Öneriler, tanımladığınız üçüncü taraf veya harici bir veri kaynağından doldurulur.
  • Google Workspace verileri: Öneriler, Google Workspace kullanıcıları veya Google Chat alanları gibi Google Workspace kaynaklarından alınır.

Sunucu tarafı otomatik tamamlama

Harici bir veri kaynağındaki önerileri otomatik olarak tamamlayacak şekilde bir SelectionInput widget'ı yapılandırabilirsiniz. Örneğin, kullanıcıların bir müşteri ilişkileri yönetimi (CRM) sistemindeki satış potansiyel müşterileri listesinden seçim yapmasına yardımcı olabilirsiniz.

Sunucu taraflı otomatik tamamlama özelliğini uygulamak için:

  1. Veri kaynağını tanımlayın: SelectionInput widget'ında RemoteDataSource belirten bir DataSourceConfig ekleyin. Bu yapılandırma, otomatik tamamlama önerilerini getiren bir Apps Komut Dosyası işlevini gösterir.
  2. Otomatik tamamlama işlevini uygulayın: Bu işlev, kullanıcı giriş alanına yazdığında tetiklenir. İşlev, kullanıcının girişine göre harici veri kaynağınızı sorgulamalı ve bir öneri listesi döndürmelidir.

Aşağıdaki örnekte, sunucu tarafında otomatik tamamlama için bir SelectionInput widget'ının nasıl yapılandırılacağı gösterilmektedir:

Apps Komut Dosyası

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

Otomatik tamamlama isteğini işleme

setFunctionName içinde belirtilen işlev (ör. getAutocompleteResults) Kullanıcı alana yazdığında bir etkinlik nesnesi alır. Bu işlev:

  1. event.workflow.elementUiAutocomplete.invokedFunction öğesinin beklenen işlev adıyla eşleştiğinden emin olmak için öğeyi kontrol edin.
  2. Kullanıcının event.workflow.elementUiAutocomplete.query girişini alın.
  3. Sorguyu kullanarak harici veri kaynağını sorgulayın.
  4. Gerekli biçimde en fazla 100 öneri döndürür.

Aşağıdaki örnekte, kullanıcının sorgusuna göre öneri döndürmek için handleAutocompleteRequest() işlevinin nasıl uygulanacağı gösterilmektedir:

Apps Komut Dosyası

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
  let autocompleteResponse = AddOnsResponseService.newUpdateWidget()
    .addSuggestion(
      query + " option 1",
      query + "_option1",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 1 bottom text"
    )
    .addSuggestion(
      query + " option 2",
      query + "_option2",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 2 bottom text"
    ).addSuggestion(
      query + " option 3",
      query + "_option3",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 3 bottom text"
    );

  const modifyAction = AddOnsResponseService.newAction()
    .addModifyCard(
      AddOnsResponseService.newModifyCard()
        .setUpdateWidget(autocompleteResponse)
    );

  return AddOnsResponseService.newRenderActionBuilder()
    .setAction(modifyAction)
    .build();
}

// 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 verilerini otomatik tamamlama

Ayrıca, kullanıcının Google Workspace ortamındaki verilerden otomatik tamamlama önerileri de doldurabilirsiniz:

  • Google Workspace kullanıcıları: Aynı Google Workspace kuruluşundaki kullanıcıları doldurun.
  • Google Chat alanları: Kullanıcının üyesi olduğu Google Chat alanlarını doldurur.

Bunu yapılandırmak için PlatformDataSource öğesini SelectionInput widget'ında ayarlayın ve WorkflowDataSourceType öğesini USER veya SPACE olarak belirtin.

Apps Komut Dosyası

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

Örnek: Otomatik tamamlama türlerini birleştirme

Aşağıdaki örnekte, sunucu tarafı, kullanıcı ve alan otomatik tamamlama özelliğini gösteren üç SelectionInput widget'ı içeren bir kart oluşturan onConfig işlevi gösterilmektedir:

JSON

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Autocomplete Demo",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "autocomplete_demo",
          "state": "ACTIVE",
          "name": "Autocomplete Demo",
          "description": "Provide autocompletion in input fields",
          "workflowAction": {
            "inputs": [
              {
                "id": "value1",
                "description": "A multi-select field with autocompletion",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "onConfigFunction": "onConfigAutocomplete",
            "onExecuteFunction": "onExecuteAutocomplete"
          }
        }
      ]
    }
  }
}

Apps Komut Dosyası

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
  let autocompleteResponse = AddOnsResponseService.newUpdateWidget()
    .addSuggestion(
      query + " option 1",
      query + "_option1",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 1 bottom text"
    )
    .addSuggestion(
      query + " option 2",
      query + "_option2",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 2 bottom text"
    ).addSuggestion(
      query + " option 3",
      query + "_option3",
      false,
      "https://developers.google.com/workspace/add-ons/images/person-icon.png",
      "option 3 bottom text"
    );

  const modifyAction = AddOnsResponseService.newAction()
    .addModifyCard(
      AddOnsResponseService.newModifyCard()
        .setUpdateWidget(autocompleteResponse)
    );

  return AddOnsResponseService.newRenderActionBuilder()
    .setAction(modifyAction)
    .build();
}

Değişken seçici düğmelerini özelleştirme

Düğme boyutunu ve etiketini ayarlayarak değişken seçici düğmesini özelleştirebilirsiniz.

Düğme boyutu

Düğme boyutunu ayarlamak için aşağıdaki VariableButtonSize enum'larından biriyle birlikte setVariableButtonSize() öğesini kullanın:

  • UNSPECIFIED: Varsayılan değer. Düğme, yan panelde kompakt, diğer bağlamlarda ise tam boyuttadır.
  • COMPACT: Düğmede yalnızca artı işareti (+) gösterilir.
  • FULL_SIZE: Düğmede tam metin etiketi gösterilir.

Düğme etiketi

Düğme metnini ayarlamak için setVariableButtonLabel() simgesini kullanın.

Örnek: Değişken seçici özelleştirme

Aşağıdaki örnekte, farklı değişken seçici düğme boyutlarına ve özel etikete sahip TextInput widget'larının nasıl yapılandırılacağı gösterilmektedir.

  • Web'de değişken seçici düğmesini özelleştirme.
    Şekil 1: Web'de değişken seçici düğmesinin özelleştirilmesi.
  • Eklenti yan panelinde değişken seçici düğmesini özelleştirme
    Şekil 2: Eklenti yan panelinde değişken seçici düğmesi özelleştirme.

Değişken seçici düğmelerini özelleştirmeye yönelik manifest dosyası:

JSON

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/script.locale"
  ],
  "addOns": {
    "common": {
      "name": "Variable button customization",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "variable_picker_customization",
          "state": "ACTIVE",
          "name": "Variable Picker demo",
          "description": "List all possible variable picker customization options",
          "workflowAction": {
            "onConfigFunction": "onUpdateCardConfigFunction",
            "onExecuteFunction": "onUpdateCardExecuteFunction"
          }
        }
      ]
    }
  }
}

Değişken seçici düğmelerini özelleştirmeye yönelik kod:

Apps Komut Dosyası

function onUpdateCardConfigFunction(event) {
  const textInput1 = CardService.newTextInput()
    .setFieldName("value1")
    .setTitle("Regular variable picker button")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.UNSPECIFIED)
      )
    );

  const textInput2 = CardService.newTextInput()
    .setFieldName("value2")
    .setTitle("Size: Unspecified")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.UNSPECIFIED)
      )
    );

  const textInput3 = CardService.newTextInput()
    .setFieldName("value3")
    .setTitle("Size: Full size")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.FULL_SIZE)
      )
    );

  const textInput4 = CardService.newTextInput()
    .setFieldName("value4")
    .setTitle("Size: Compact")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonSize(CardService.VariableButtonSize.COMPACT)
      )
    );

  const textInput5 = CardService.newTextInput()
    .setFieldName("value5")
    .setTitle("Custom button label")
    .setHostAppDataSource(
      CardService.newHostAppDataSource().setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
          .setVariableButtonLabel("New button label!")
      )
    );

  var cardSection = CardService.newCardSection()
    .addWidget(textInput1)
    .addWidget(textInput2)
    .addWidget(textInput3)
    .addWidget(textInput4)
    .addWidget(textInput5)
    .setId("section_1");

  var card = CardService.newCardBuilder().addSection(cardSection).build();

  return card;
}

function onUpdateCardExecuteFunction(event) {
}

Workspace Studio'ya özgü özellikler

Bazı kart widget'ları, Workspace Studio'ya özel işlevler ve özellikler içerir. Bu işlevler ve özellikler hakkında ayrıntılı bilgiyi burada bulabilirsiniz.

TextInput ve SelectionInput

TextInput ve SelectionInput widget'ları, Workspace Studio'ya özel şu özelliklere sahiptir:

  • includeVariables: Kullanıcıların önceki adımlardaki değişkenleri seçmesine olanak tanıyan bir Boole özelliği. Değişken seçicinin sonraki adımlarda gösterilmesi için hem başlangıç etkinliği hem de en az bir karşılık gelen çıkış değişkeni, değişkenle eşlenmelidir.
  • type: Önerileri otomatik tamamlayan numaralandırılmış bir değer. Desteklenen değerler:
    • USER: Kullanıcının kişilerinde bulunan kişiler için otomatik tamamlama önerileri sağlar.
    • SPACE: Kullanıcının üyesi olduğu Google Chat alanları için otomatik tamamlama önerileri sunar.

Hem includeVariables hem de type ayarlandığında giriş alanı, deneyimlerini birleştirir. Kullanıcılar, açılır menüden eşleşen type değişkenini seçebilir ve bu değişkenle ilgili otomatik tamamlama önerilerini görebilir.

  • Google Chat alanı için otomatik tamamlama önerileri.
    Şekil 3: Bir kullanıcı, alan seçerken otomatik tamamlama önerilerini inceliyor.
  • Değişkenler menüsü, kullanıcıların önceki adımlardan çıkış değişkenleri seçmesine olanak tanır.
    Şekil 4: Bir kullanıcı, önceki adımın çıkış değişkenini ➕Değişkenler açılır listesinden seçiyor.

Taşma menüsüyle yalnızca bir çıkış değişkeni seçin

Kullanıcıların taşma menüsünü kullanarak önceki bir adımdan tek bir çıkış değişkeni seçmesine olanak tanımak için SelectionInput widget'ını yapılandırabilirsiniz.

SelectionInputType seçeneğini OVERFLOW_MENU olarak ayarladığınızda widget, özel bir değişken seçici olarak kullanılır. Değişken değerlerini dizelere dönüştüren includeVariables ile TextInput kullanımının aksine, OVERFLOW_MENU seçilen değişkenin orijinal veri türünü korur.

Apps Komut Dosyası

const selectionInput = CardService.newSelectionInput()
  .setFieldName("variable_picker_1")
  .setTitle("Variable Picker")
  .setType(
    CardService.SelectionInputType.OVERFLOW_MENU
  );

Kullanıcıların metin ve çıkış değişkenlerini birleştirmesine izin verme

Kullanıcıların TextInput metin ve çıkış değişkenleriyle nasıl etkileşimde bulunacağını kontrol etmek için setInputMode() kullanarak widget'ları yapılandırabilirsiniz.

  • RICH_TEXT: Kullanıcıların metin ve çıkış değişkenlerini birleştirmesine olanak tanır. Sonuç, tek bir birleştirilmiş dizedir.
  • PLAIN_TEXT: Girişi kısıtlar. Kullanıcılar metin yazabilir veya tek bir çıkış değişkeni seçebilir. Bir değişken seçtiğinizde mevcut metinler değiştirilir. Manifestte tanımlanan belirli veri türlerini zorunlu kılmak için bu modu kullanın.

Aşağıdaki resimde iki TextInput widget'ı gösterilmektedir. İlki RICH_TEXT olarak yapılandırılır ve metin ile bir çıkış değişkeni içerir. İkincisi PLAIN_TEXT olarak yapılandırılır ve yalnızca bir çıkış değişkenine izin verir.

  • RICH_TEXT ve PLAIN_TEXT olarak yapılandırılmış metin girişi widget'ları
    Şekil 5: RICH_TEXT ve PLAIN_TEXT olarak yapılandırılmış metin girişi widget'ları.

Tüm TextInput widget'ları için giriş modunu açıkça ayarlamanızı öneririz.

Farklı giriş modlarına sahip TextInput widget'larını yapılandırmak için manifest dosyasını aşağıda bulabilirsiniz:

JSON

{
  "timeZone": "America/Toronto",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Text and output variable demo",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "richTextDemo",
          "state": "ACTIVE",
          "name": "Rich Text Demo",
          "description": "Show the difference between rich text and plain text TextInput widgets",
          "workflowAction": {
            "inputs": [
              {
                "id": "value1",
                "description": "First user input",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              },
              {
                "id": "value2",
                "description": "Second user input",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "onConfigFunction": "onConfiguration",
            "onExecuteFunction": "onExecution"
          }
        }
      ]
    }
  }
}

Farklı giriş modlarına sahip TextInput widget'larını yapılandırma kodu:

Apps Komut Dosyası

function onConfiguration() {
  const input1 = CardService.newTextInput()
    .setFieldName("value1")
    .setId("value1")
    .setTitle("Rich Text")
    .setHostAppDataSource(
      CardService.newHostAppDataSource()
        .setWorkflowDataSource(
          CardService.newWorkflowDataSource()
            .setIncludeVariables(true)
        )
    )
    // Set input mode to RICH_TEXT to allow mixed text and variables.
    .setInputMode(CardService.TextInputMode.RICH_TEXT);

  const input2 = CardService.newTextInput()
    .setFieldName("value2")
    .setId("value2")
    .setTitle("Plain text")
    .setHostAppDataSource(
      CardService.newHostAppDataSource()
        .setWorkflowDataSource(
          CardService.newWorkflowDataSource()
            .setIncludeVariables(true)
        )
    )
    // Set input mode to PLAIN_TEXT to enforce single variable selection.
    .setInputMode(CardService.TextInputMode.PLAIN_TEXT);

  const section = CardService.newCardSection()
    .addWidget(input1)
    .addWidget(input2);

  const card = CardService.newCardBuilder()
    .addSection(section)
    .build();

  return card;
}

function onExecution(e) {
}

Kartla ilgili dikkat edilmesi gereken noktalar ve sınırlamalar

  • Workspace Studio'yu genişleten eklentilerde kartla gezinme (ör. popCard(), pushCard() ve updateCard()) desteklenmez.

  • SelectionInput değişken seçicide kullanıldığında widget'lar yalnızca "type": "MULTI_SELECT" değerini destekler. Yapılandırma kartlarının diğer bölümlerinde SelectionInput, SelectionType değerlerinin tümünü destekler.