Cấu hình theo từng bước

Cấu hình theo bậc cho phép trình kết nối điền sẵn trình kết nối một cách linh động dựa trên câu trả lời do người dùng cung cấp. Ví dụ: điền sẵn một "Thành phố" trình đơn thả xuống sau "Trạng thái" đã chọn trình đơn thả xuống.

Yêu cầu

Hướng dẫn này giả định rằng bạn đã quen thuộc với Trình kết nối cộng đồng . Xem xác định cấu hình qua getConfig để ôn lại kiến thức.

Tổng quan

Cấu hình theo bước bao gồm Looker Studio gọi getConfig() nhiều và trình kết nối của bạn trả về nhiều câu hỏi về cấu hình hơn mỗi lần. Một cuộc gọi đến getConfig() sẽ bao gồm câu trả lời của người dùng cho getConfig() cuối cùng của bạn. Quá trình này sẽ tiếp tục, miễn là bạn trả lời câu trả lời có setIsSteppedConfig(true).

Nguyên tắc

Đặt setIsSteppedConfig(true) cho đến khi định cấu hình xong

Looker Studio sẽ liên tục gọi getConfig() miễn là Đã đặt setIsSteppedConfig(true).Sau khi định cấu hình xong, bước cuối cùng Phản hồi getConfig() phải đặt setIsSteppedConfig(false).

Đặt isDynamic(true) cho các câu hỏi về cấu hình để xác định các câu hỏi sau này

Nếu người dùng sửa đổi trường đánh dấu isDynamic, thì sẽ bị xoá trong giao diện người dùng và người dùng cần định cấu hình tất cả các bước tiếp theo. Điều này giúp đảm bảo người dùng không gửi cho bạn cấu hình không hợp lệ.

Câu trả lời do người dùng cung cấp sẽ được chuyển qua request.configParams.

request.configParams sẽ có giá undefined cho getConfig() đầu tiên tới trình kết nối của bạn. Các yêu cầu tiếp theo sẽ bao gồm câu trả lời do người dùng cung cấp dưới dạng đối tượng được khoá bởi mã cấu hình hoặc undefined nếu người dùng không cung cấp câu trả lời nào.

Ví dụ:

{
  state: 'CA',
  city: 'mountain_view'
}

Cấu hình có tính bổ sung

Bạn nên thêm các câu hỏi mới về cấu hình sau các câu hỏi hiện có.

Không thể thay đổi cấu hình

Nếu bạn từng đặt câu hỏi về cấu hình, câu hỏi đó nên hiển thị cho tất cả các lệnh gọi tiếp theo. Ví dụ: nếu có câu hỏi về cấu hình A trong lệnh gọi đầu tiên đến getConfig(), A phải được đưa vào tất cả tương lai phản hồi.

Cấu hình không thay đổi

Các lệnh gọi đến getConfig() có cùng configParams sẽ trả về cùng một kết quả .

Không được ghi đè thông số động

Looker Studio sẽ không cho phép dùng các thông số cấu hình động bị ghi đè.

Thiết lập mẫu

Trình đơn thả xuống linh động

Câu hỏi đầu tiên này nhắc người dùng chọn một trạng thái, sau đó cung cấp một cách linh động một thành phố thả xuống dựa trên tiểu bang đã chọn.

var cc = DataStudioApp.createCommunityConnector();

function optionsForState(state) {
  switch (state) {
    case "IL": {
      return [["Chicago", "chicago"], ["Springfield", "springfield"]];
    }
    case "CA": {
      return [["Mountain View", "mountain_view"], ["Los Angeles", "los_angeles"]];
    }
    default: {
      cc.newUserError()
          .setText('You must either select "IL" or "CA"')
          .throwException();
    }
  }
}

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

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

Đường dẫn phân nhánh

Thao tác này sẽ đặt thêm câu hỏi nếu "Quốc gia" đã chọn là "Hoa Kỳ".

var cc = DataStudioApp.createCommunityConnector();

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

  config
      .newSelectSingle()
      .setId('country')
      .setName('Country')
  // Set isDynamic to true so any changes to Country will clear the state
  // selections.
      .setIsDynamic(true)
      .addOption(config.newOptionBuilder().setLabel('United States').setValue('USA'))
      .addOption(config.newOptionBuilder().setLabel('Canada').setValue('CA'));

  if (!isFirstRequest) {
    // validate a valid value was selected for configParams.country
    if (configParams.country === undefined) {
      cc.newUserError().setText('You must choose a country.').throwException();
    }
    switch (configParams.country) {
      case 'USA': {
        config
            .newSelectSingle()
            .setId('state')
            .setName('State')
            .addOption(config.newOptionBuilder().setLabel('New York').setValue('NY'))
            .addOption(config.newOptionBuilder().setLabel('Calfornia').setValue('CA'));
        break;
      }
      case 'CA': {
        // No additional configuration is needed for Canada.
        break;
      }
      default: {
        cc.newUserError()
            .setText('You must either select "CA" or "USA"')
            .throwException();
      }
    }
  }
  return config.build();
}