google-apps-script - 如何在配置设置中构建动态下拉菜单？

Question

我是 Google Data Studio 的新手，正在考虑为我们的 Saas 服务构建社区连接器。 对于配置部分，我需要使用逐步配置过程。基本上，我嵌套了一组下拉列表。

但是，我需要来自 API 的数据来填充这些列表。我定义了 REST 服务端点，但在社区连接器的 getConfig 部分中找不到任何有关如何配置此端点的文档/示例。

有人有一个可以作为引用的工作示例吗？

在查看文档时，有一个关于逐步配置的部分，这正是我正在寻找的内容。您可以在这里找到该示例:https://developers.google.com/datastudio/connector/stepped-configuration#dynamic_dropdowns

在此示例中，它们显示了以下用于定义下拉值的内容。 请注意，各州已对“伊利诺伊州”和“加利福尼亚州”的值进行了硬编码。

我的问题是，如何动态调用 API 来检索值以填充此列表？我有 3 个嵌套下拉菜单，每个下拉菜单都有一个单独的 API 调用，使用上一个下拉菜单中的答案来驱动下一个下拉菜单。

例如第一个 API 可能是 http://myapi.com/countries返回国家列表。 当他们选择国家/地区时，下一个 API 调用可能是 http://myapi.com/states?country=US

等等

 config.newSelectSingle()
      .setId("state")
      .setName("State")
  // Set isDynamic to true so any changes to State will clear the city
  // selections.
      .setIsDynamic(true)
      .addOption(config.newOptionBuilder().setLabel("Illinois").setValue("IL"))
      .addOption(config.newOptionBuilder().setLabel("California").setValue("CA"));

  if (!isFirstRequest) {
    var city = config.newSelectSingle()
        .setId("city")
        .setName("City");
    var cityOptions = optionsForState(configParams.state);
    cityOptions.forEach(function(labelAndValue) {
      var cityLabel = labelAndValue[0];
      var cityValue = labelAndValue[1];
      city.addOption(config.newOptionBuilder().setLabel(cityLabel).setValue(cityValue));
    });
  }
  return config.build();
}

Answer 1

解决了我遇到的问题。对于可能遇到类似问题的其他人，这是我的工作 getConfig() 方法。

function getConfig(request) {
  var config = cc.getConfig();
  var configParams = request.configParams;
  var isFirstRequest = configParams === undefined;
  if (configParams ===undefined || configParams.tab ===undefined) {
    config.setIsSteppedConfig(true);
  }


var url ='https://<yourAPIURL>';

var userProperties = PropertiesService.getUserProperties();
var key = userProperties.getProperty('dscc.key');
 var mykey ="Bearer " + key

  var options = {
     "method" : "GET",
     "headers" : {
       "AUTHORIZATION" : mykey,
       "cache-control": "no-cache"
     }
   };
  var response = UrlFetchApp.fetch(url,options);
  var parsedResponse = JSON.parse(response);
      

  var zoneControl = config.newSelectSingle()
  .setId("zone")
  .setName("Zone")
  .setIsDynamic(true);
  
  parsedResponse.map(function(itm) {
    zoneControl.addOption(config.newOptionBuilder().setLabel(itm.name).setValue(itm.id))
  });
  
  if(configParams !==undefined && configParams.zone !==undefined){
    var blockurl ='https://<yourAPIURL>?zoneid='+ configParams.zone;
    var blockResponse = UrlFetchApp.fetch(blockurl,options);
    var parsedBlockResponse = JSON.parse(blockResponse);
     var blockControl = config.newSelectSingle()
     .setId("block")
     .setName("Block")
     .setIsDynamic(true);
    
   parsedBlockResponse.map(function(itm) {
    blockControl.addOption(config.newOptionBuilder().setLabel(itm.name).setValue(itm.blockKey))
  });
  }
  
  if(configParams !==undefined && configParams.block !==undefined){
    var taburl =''https://<yourAPIURL>?blockKey='+ configParams.block;
    var tabResponse = UrlFetchApp.fetch(taburl,options);
    var parsedTabResponse = JSON.parse(tabResponse);
     var tabControl = config.newSelectSingle()
     .setId("tab")
     .setName("Tab")
    
   parsedTabResponse.map(function(itm) {
    tabControl.addOption(config.newOptionBuilder().setLabel(itm.name).setValue(itm.internalname))
  });
  }
    
  return config.build();

}