Google Calendar插件：基于CardService实现全选复选框及UI开发疑问

CardService是Google Workspace插件的声明式UI框架，无前端本地JS运行时环境，所有组件状态变化都需要通过服务端回调完成重渲染，具体实现逻辑如下：

• 组件抽离：将复选框组的构建逻辑封装为可复用函数，入参为当前用户提交的选中值数组，函数内部根据选中值动态设置每一个复选框的初始选中状态
• 绑定回调：给整个SelectionInput组件设置setOnChangeAction，指定当用户勾选/取消勾选任意选项时触发的服务端处理函数
• 状态同步：在回调函数中检测用户操作，如果检测到"select all"对应的占位值被选中，就将所有子选项设为选中状态；如果"select all"被取消勾选，就清除所有子选项的选中状态，最后重新构建整个复选框组随卡片返回

示例代码：

// 抽离的复选框组构建函数，selectedValues为表单当前提交的选中值数组
function buildCalendarCheckboxGroup(selectedValues = []) {
  // 判断是否触发全选操作
  const isSelectAllChecked = selectedValues.includes("all");
  // 过滤掉全选占位值，避免业务逻辑中混入无效参数
  const realSelectedValues = selectedValues.filter(item => item !== "all");

  return CardService.newSelectionInput()
    .setType(CardService.SelectionInputType.CHECK_BOX)
    .setFieldName("calendar")
    // 绑定选中值变化的服务端回调
    .setOnChangeAction(CardService.newAction().setFunctionName("handleCheckboxStateChange"))
    .addItem("select all", "all", isSelectAllChecked)
    .addItem("calendar1", "cal1", isSelectAllChecked || realSelectedValues.includes("cal1"))
    .addItem("calendar2", "cal2", isSelectAllChecked || realSelectedValues.includes("cal2"));
}

// 复选框状态变化的回调处理函数
function handleCheckboxStateChange(event) {
  // 从事件上下文获取表单提交的当前选中值
  const currentValues = event.parameters.calendar || [];
  // 用最新选中值重新构建复选框组
  const updatedCheckbox = buildCalendarCheckboxGroup(currentValues);
  // 组装更新后的卡片并返回
  const cardSection = CardService.newCardSection().addWidget(updatedCheckbox);
  return CardService.newCardBuilder()
    .addSection(cardSection)
    .build();
}

实现注意点：

• 不要把"select all"选项和下方具体日历选项拆分为两个独立的SelectionInput组件，统一在同一个组件内维护状态可以大幅降低同步成本
• 因为框架特性限制，全选操作会有极短的服务端往返延迟，这是CardService的固有特性，无法实现原生HTML那种无延迟的本地状态响应
• 提交最终业务参数时记得过滤掉全选占位值"all"，避免无效参数干扰业务逻辑

你对插件UI开发规则的认知存在场景边界的混淆，具体规则可以拆分为两类场景：

• 插件内嵌主功能UI：也就是直接展示在Google Calendar侧边栏、事件编辑浮层、通知卡片里的交互界面，强制要求使用CardService构建，官方不允许在这类场景下嵌入原生HTML开发界面，目的是保证跨端交互一致性、降低安全风险。你之前认为的“Workspace插件主UI不能用HTML/HTMLService构建”的认知是完全正确的。
• 独立打开的配置/授权页面：也就是通过Web App路由返回的、用户点击后跳出Workspace内嵌界面、在新标签页打开的页面，这类场景完全允许使用HTMLService开发。你参考的官方会议插件示例中，doGet函数返回HTML的代码，是用于承载会议供应商授权参数的独立设置页，不属于插件内嵌主UI的范畴，因此没有违反开发规则。

内容的提问来源于stack exchange，提问作者Deniece-Ding