配置MS Teams新标签页时如何控制Save按钮的启用与禁用状态

实现前提 #

• 项目内已集成版本≥1.10.0的Teams JS SDK，低版本接口存在兼容问题
• 配置页加载时必须先调用microsoftTeams.initialize()完成SDK初始化

核心实现逻辑 #

配置页的Save按钮默认处于禁用状态，你可以通过Teams JS SDK提供的setValidityState方法，结合业务校验逻辑动态切换按钮的启用/禁用状态，和官方应用的配置页交互逻辑完全一致。
参考代码示例：

// 初始化Teams SDK
microsoftTeams.initialize();

// 业务校验逻辑：根据实际需求修改校验规则
const isBusinessRulePassed = () => {
  // 示例：判断表单必填项是否全部填写、配置参数是否合法等
  const inputVal = document.getElementById("configInput").value.trim();
  return inputVal.length > 0;
}

// 更新Save按钮状态的公共方法
const updateSaveBtnState = () => {
  const isValid = isBusinessRulePassed();
  // 传入true启用Save按钮，传入false禁用Save按钮
  microsoftTeams.settings.setValidityState(isValid);
}

// 注册Save按钮点击回调
microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
  // 写入标签页配置
  microsoftTeams.settings.setSettings({
    entityId: "自定义标签页唯一标识",
    contentUrl: "标签页实际加载的页面地址",
    suggestedDisplayName: "标签页展示名称"
  });
  // 通知Teams保存完成，关闭配置页
  saveEvent.notifySuccess();
});

// 页面加载完成后初始化按钮状态
updateSaveBtnState();

// 监听所有会影响校验结果的用户操作，实时更新按钮状态
// 示例：监听输入框内容变化事件
document.getElementById("configInput").addEventListener("input", updateSaveBtnState);

注意事项 #

• setValidityState方法仅在标签页配置页上下文下生效，在标签页普通内容页调用无效
• 所有会影响业务校验结果的用户操作（输入内容、切换选项、上传文件等）触发后，都需要主动调用updateSaveBtnState更新按钮状态，才能实现实时交互效果
• 如果需要自定义标签页移除时的逻辑，可以额外调用registerOnRemoveHandler注册移除事件回调

内容的提问来源于stack exchange，提问作者GMAC