如何为同一Office加载项区分O365在线版与本地Outlook的UI控件？

嘿，这个需求其实完全可以通过Office加载项的**清单文件（manifest.xml）**来实现——利用它的条件性UI配置能力，就能给在线版Office 365和本地Outlook客户端分别定义不同的控件布局和文本。我给你一步步拆解具体怎么做：

Office加载项的清单支持根据客户端类型（在线/本地）、版本等维度，定义独立的UI布局。核心是通过VersionOverrides节点下的DesktopFormFactor（对应本地Outlook）和WebFormFactor（对应在线版Office 365）来分别配置。

第一步：编写清单的差异化UI配置 #

在清单的VersionOverrides节点内，我们可以给两类客户端分别写UI逻辑：

1. 本地Outlook客户端：配置独立按钮组 #

在DesktopFormFactor里，直接用Group包裹Button控件，实现按钮组效果：

<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
  <Requirements>
    <bt:Sets DefaultMinVersion="1.1">
      <bt:Set Name="Mailbox" MinVersion="1.1"/>
    </bt:Sets>
  </Requirements>
  <Hosts>
    <Host xsi:type="MailHost">
      <!-- 本地Outlook客户端的UI配置 -->
      <DesktopFormFactor>
        <FunctionFile resid="Commands.Url"/>
        <ExtensionPoint xsi:type="MessageReadCommandSurface">
          <CustomTab id="MyCustomTab">
            <Group id="MyDesktopGroup">
              <Label resid="Group.Desktop.Label"/>
              <Control xsi:type="Button" id="MyDesktopButton">
                <Label resid="Button.Desktop.Label"/>
                <Supertip>
                  <Title resid="Button.Desktop.Title"/>
                  <Description resid="Button.Desktop.Desc"/>
                </Supertip>
                <Icon>
                  <bt:Image size="16" resid="Icon.16"/>
                  <bt:Image size="32" resid="Icon.32"/>
                  <bt:Image size="80" resid="Icon.80"/>
                </Icon>
                <Action xsi:type="ExecuteFunction">
                  <FunctionName>runMyAddin</FunctionName>
                </Action>
              </Control>
            </Group>
            <Label resid="Tab.Label"/>
          </CustomTab>
        </ExtensionPoint>
      </DesktopFormFactor>

      <!-- 在线版Office 365的UI配置 -->
      <WebFormFactor>
        <FunctionFile resid="Commands.Url"/>
        <ExtensionPoint xsi:type="MessageReadCommandSurface">
          <CustomTab id="MyCustomTab">
            <Group id="MyWebGroup">
              <Label resid="Group.Web.Label"/>
              <!-- 用Menu控件实现下拉菜单 -->
              <Control xsi:type="Menu" id="MyWebMenu">
                <Label resid="Menu.Web.Label"/>
                <Supertip>
                  <Title resid="Menu.Web.Title"/>
                  <Description resid="Menu.Web.Desc"/>
                </Supertip>
                <Icon>
                  <bt:Image size="16" resid="Icon.16"/>
                  <bt:Image size="32" resid="Icon.32"/>
                  <bt:Image size="80" resid="Icon.80"/>
                </Icon>
                <Items>
                  <Item id="MyWebMenuItem">
                    <Label resid="MenuItem.Web.Label"/>
                    <Supertip>
                      <Title resid="MenuItem.Web.Title"/>
                      <Description resid="MenuItem.Web.Desc"/>
                    </Supertip>
                    <Icon>
                      <bt:Image size="16" resid="Icon.16"/>
                      <bt:Image size="32" resid="Icon.32"/>
                      <bt:Image size="80" resid="Icon.80"/>
                    </Icon>
                    <Action xsi:type="ExecuteFunction">
                      <FunctionName>runMyAddin</FunctionName>
                    </Action>
                  </Item>
                  <!-- 可以添加更多菜单项 -->
                </Items>
              </Control>
            </Group>
            <Label resid="Tab.Label"/>
          </CustomTab>
        </ExtensionPoint>
      </WebFormFactor>
    </Host>
  </Hosts>

  <!-- 统一管理所有文本和资源 -->
  <Resources>
    <bt:Images>
      <bt:Image id="Icon.16" DefaultValue="https://your-addin-url/icon-16.png"/>
      <bt:Image id="Icon.32" DefaultValue="https://your-addin-url/icon-32.png"/>
      <bt:Image id="Icon.80" DefaultValue="https://your-addin-url/icon-80.png"/>
    </bt:Images>
    <bt:Urls>
      <bt:Url id="Commands.Url" DefaultValue="https://your-addin-url/commands.html"/>
    </bt:Urls>
    <bt:ShortStrings>
      <bt:String id="Tab.Label" DefaultValue="我的加载项"/>
      <!-- 本地客户端专属文本 -->
      <bt:String id="Group.Desktop.Label" DefaultValue="本地功能组"/>
      <bt:String id="Button.Desktop.Label" DefaultValue="启动加载项"/>
      <bt:String id="Button.Desktop.Title" DefaultValue="启动我的Office加载项"/>
      <!-- 在线版专属文本 -->
      <bt:String id="Group.Web.Label" DefaultValue="在线功能组"/>
      <bt:String id="Menu.Web.Label" DefaultValue="加载项菜单"/>
      <bt:String id="Menu.Web.Title" DefaultValue="我的在线加载项菜单"/>
      <bt:String id="MenuItem.Web.Label" DefaultValue="启动加载项"/>
    </bt:ShortStrings>
    <bt:LongStrings>
      <bt:String id="Button.Desktop.Desc" DefaultValue="点击启动本地版加载项功能"/>
      <bt:String id="Menu.Web.Desc" DefaultValue="选择菜单选项启动在线版加载项功能"/>
      <bt:String id="MenuItem.Web.Desc" DefaultValue="点击启动在线版加载项功能"/>
    </bt:LongStrings>
  </Resources>
</VersionOverrides>

第二步：关键细节说明 #

• 客户端自动识别：Office会根据当前运行环境（在线网页/本地客户端）自动加载对应的FormFactor节点下的UI配置，不需要额外判断逻辑。
• 控件类型差异：本地用Button实现按钮组，在线用Menu控件实现下拉菜单，菜单内可添加多个Item对应不同功能。
• 文本资源分离：把不同客户端的文本标签统一放在Resources里，通过唯一ID关联，既清晰又方便后续做本地化。
• 兼容性检查：确保Requirements里的MinVersion符合目标客户端版本（比如Mailbox 1.1及以上就支持这些控件）。

第三步：测试验证 #

• 在线版：登录Office 365 Outlook网页版，安装加载项后检查自定义标签是否显示下拉菜单。
• 本地版：打开Outlook 2016及以上客户端，安装加载项后查看是否显示按钮组。

如果遇到加载异常，可以用Office官方的加载项验证工具检查清单语法，或者查看客户端的加载项日志排查问题。

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