如何在Office JS Add-in功能区中显示/隐藏控件

Office JS原生功能区API确实不支持直接显示/隐藏单个按钮或控件，仅提供启用/禁用的接口，但可以通过以下两种官方支持的方案间接实现需求：

方案1：使用动态菜单（Dynamic Menu） #

动态菜单允许每次打开菜单时动态生成菜单项，适合需要条件显示的菜单类控件。你可以在菜单的加载函数中根据业务条件过滤需要显示的项：

步骤1：在Manifest中定义动态菜单 #

<Control xsi:type="DynamicMenu" id="MyDynamicMenu">
  <Label resid="MenuLabel"/>
  <Supertip>
    <Title resid="MenuTitle"/>
    <Description resid="MenuDesc"/>
  </Supertip>
  <Icon>
    <bt:Image size="16" resid="Icon16"/>
    <bt:Image size="32" resid="Icon32"/>
    <bt:Image size="80" resid="Icon80"/>
  </Icon>
  <Action xsi:type="ExecuteFunction" functionName="loadDynamicMenuItems"/>
</Control>

步骤2：编写动态加载逻辑 #

async function loadDynamicMenuItems(event) {
  // 自定义条件判断（示例：判断当前选中单元格是否有内容）
  const shouldShowButton1 = await Excel.run(async context => {
    const range = context.workbook.getSelectedRange();
    range.load('cellType');
    await context.sync();
    return range.cellType === Excel.CellType.content;
  }).catch(err => {
    console.error(err);
    return false;
  });

  // 构造要显示的菜单项数组
  const menuItems = [];
  if (shouldShowButton1) {
    menuItems.push({
      type: "button",
      id: "DynamicButton1",
      label: "处理选中内容",
      icon: { officeFabricIconFontName: "CheckMark" },
      action: () => { /* 按钮点击逻辑 */ }
    });
  }
  // 可添加更多条件判断的菜单项

  // 通知功能区更新菜单内容
  event.completed({ menuItems });
}

方案2：通过控件组（Group）的显隐间接控制控件 #

Office JS支持自定义组的显隐设置，你可以将需要条件显示的控件单独放在一个组中，然后通过Office.Ribbon.requestUpdate()更新组的可见性：

代码示例 #

// 更新指定组的可见性
async function updateConditionalGroupVisibility() {
  const condition = await checkBusinessCondition(); // 自定义条件判断函数
  await Office.Ribbon.requestUpdate({
    tabs: [
      {
        id: "YourCustomTabId", // 替换为你的自定义选项卡ID
        groups: [
          {
            id: "ConditionalControlGroup", // 替换为目标组的ID
            visible: condition
          }
        ]
      }
    ]
  });
}

// 示例条件判断函数（仅当当前工作表名为"数据处理"时显示组）
async function checkBusinessCondition() {
  return Excel.run(async context => {
    const activeSheet = context.workbook.activeWorksheet;
    activeSheet.load('name');
    await context.sync();
    return activeSheet.name === "数据处理";
  });
}

注意事项 #

• 不要尝试通过DOM操作（如aria-label定位）修改功能区控件：Office功能区运行在独立沙箱中，直接操作DOM属于未授权的hack方式，会导致兼容性问题，且可能被Office版本更新破坏。
• 动态菜单的更新仅在菜单打开时触发，适合需要实时变化的菜单项；组的显隐更新需要主动调用requestUpdate，适合需要持久显示/隐藏的控件集合。

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