如何通过代码动态修改Outlook Web Add-in功能区按钮图标

你没法直接修改manifest里的resid来切换图标，因为manifest是静态配置，加载后不会动态变化。要实现点击按钮后切换图标，得用Office.js提供的ribbon.updateControl API来动态更新按钮的图标资源。

步骤1：确认Manifest配置 #

确保你的manifest里已经正确定义了两个图标资源，并且按钮初始使用蓝色图标：

<Resources>
  <Images>
    <!-- 蓝色图标 -->
    <Image Id="IconBlue" DefaultValue="/images/blue-icon-16.png" />
    <Image Id="IconBlue_32" DefaultValue="/images/blue-icon-32.png" />
    <Image Id="IconBlue_80" DefaultValue="/images/blue-icon-80.png" />
    <!-- 绿色图标 -->
    <Image Id="IconGreen" DefaultValue="/images/green-icon-16.png" />
    <Image Id="IconGreen_32" DefaultValue="/images/green-icon-32.png" />
    <Image Id="IconGreen_80" DefaultValue="/images/green-icon-80.png" />
  </Images>
</Resources>

<!-- 功能区按钮配置 -->
<Control xsi:type="Button" Id="MyTaskButton">
  <Label resid="TaskButtonLabel" />
  <Icon>
    <bt:Image size="16" resid="IconBlue" />
    <bt:Image size="32" resid="IconBlue_32" />
    <bt:Image size="80" resid="IconBlue_80" />
  </Icon>
  <Action xsi:type="ExecuteFunction">
    <FunctionName>handleButtonClick</FunctionName>
  </Action>
</Control>

步骤2：编写JavaScript切换逻辑 #

在按钮点击的处理函数中，先执行你的业务任务，再调用updateControl方法替换图标为绿色：

function handleButtonClick() {
  // 执行你的核心任务逻辑
  executeYourTask();

  // 动态切换按钮图标为绿色
  Office.context.ui.ribbon.updateControl("MyTaskButton", {
    icon: {
      "16": "IconGreen",
      "32": "IconGreen_32",
      "80": "IconGreen_80"
    }
  }).catch(err => {
    console.error("图标切换失败: ", err);
  });
}

function executeYourTask() {
  // 这里写你原来的任务代码，比如处理邮件、数据等
  console.log("任务执行完成");
}

关键注意事项 #

• 控件ID匹配：updateControl的第一个参数必须和manifest中按钮的Id完全一致，大小写敏感
• 多尺寸图标：要为所有配置的图标尺寸（16/32/80px）指定对应的绿色图标resid，否则会显示异常
• 回退逻辑：如果需要切换回蓝色图标，只需要将icon对象中的resid改回蓝色图标对应的ID即可
• API兼容性：这个API支持Outlook Web版及较新的桌面端版本，确保你的Office.js引用的是最新稳定版

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