求助：使用Visual Studio JavaScript创建多级菜单Outlook Web加载项

云上老周
2026-7-10
Outlook Web加载项多级菜单XML实现示例
Outlook Web加载项的多级菜单可通过Office Add-in Manifest XML中的<Menu>与<SubMenu>嵌套实现，每个菜单项使用OpenUrl类型的Action跳转外部网站。以下是匹配你需求结构的完整XML样例：
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
  <!-- 基础配置 -->
  <Id>你的加载项唯一ID</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>你的名称/组织</ProviderName>
  <DefaultLocale>zh-CN</DefaultLocale>
  <DisplayName DefaultValue="多级跳转菜单加载项"/>
  <Description DefaultValue="包含多级外部链接菜单的Outlook Web加载项"/>
  <IconUrl DefaultValue="https://your-domain.com/icon.png"/>
  <HighResolutionIconUrl DefaultValue="https://your-domain.com/high-res-icon.png"/>
  <SupportUrl DefaultValue="https://your-domain.com/support"/>
  <Hosts>
    <Host Name="Mailbox"/>
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.3"/>
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation DefaultValue="https://your-domain.com/read.html"/>
        <RequestedHeight>250</RequestedHeight>
      </DesktopSettings>
    </Form>
  </FormSettings>
  <Permissions>ReadWriteItem</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
  </Rule>
  <DisableEntityHighlighting>false</DisableEntityHighlighting>

  <!-- 版本覆盖与菜单核心配置 -->
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Requirements>
      <bt:Sets DefaultMinVersion="1.3">
        <bt:Set Name="Mailbox"/>
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <DesktopFormFactor>
          <FunctionFile resid="Commands.Url"/>
          <ExtensionPoint xsi:type="MessageReadCommandSurface">
            <CustomTab id="CustomTab">
              <Group id="MainMenuGroup">
                <Label resid="MainMenuGroup.Label"/>
                <!-- 顶级主菜单 -->
                <Control xsi:type="Menu" id="MainMenu">
                  <Label resid="MainMenu.Label"/>
                  <Supertip>
                    <Title resid="MainMenu.Title"/>
                    <Description resid="MainMenu.Description"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Items>
                    <!-- Menu 1.1 一级子菜单 -->
                    <Item id="Menu1.1">
                      <Control xsi:type="Menu" id="Menu1.1.SubMenu">
                        <Label resid="Menu1.1.Label"/>
                        <Items>
                          <!-- Menu 1.1.A 跳转按钮 -->
                          <Item id="Menu1.1.A">
                            <Control xsi:type="Button" id="Menu1.1.A.Button">
                              <Label resid="Menu1.1.A.Label"/>
                              <Supertip>
                                <Title resid="Menu1.1.A.Title"/>
                                <Description resid="Menu1.1.A.Description"/>
                              </Supertip>
                              <Icon>
                                <bt:Image size="16" resid="Icon.16x16"/>
                                <bt:Image size="32" resid="Icon.32x32"/>
                                <bt:Image size="80" resid="Icon.80x80"/>
                              </Icon>
                              <Action xsi:type="OpenUrl">
                                <Url>https://your-target-url.com/1.1.A</Url>
                              </Action>
                            </Control>
                          </Item>
                          <!-- Menu 1.1.B 跳转按钮 -->
                          <Item id="Menu1.1.B">
                            <Control xsi:type="Button" id="Menu1.1.B.Button">
                              <Label resid="Menu1.1.B.Label"/>
                              <Supertip>
                                <Title resid="Menu1.1.B.Title"/>
                                <Description resid="Menu1.1.B.Description"/>
                              </Supertip>
                              <Icon>
                                <bt:Image size="16" resid="Icon.16x16"/>
                                <bt:Image size="32" resid="Icon.32x32"/>
                                <bt:Image size="80" resid="Icon.80x80"/>
                              </Icon>
                              <Action xsi:type="OpenUrl">
                                <Url>https://your-target-url.com/1.1.B</Url>
                              </Action>
                            </Control>
                          </Item>
                        </Items>
                      </Control>
                    </Item>
                    <!-- Menu 1.2 一级子菜单 -->
                    <Item id="Menu1.2">
                      <Control xsi:type="Menu" id="Menu1.2.SubMenu">
                        <Label resid="Menu1.2.Label"/>
                        <Items>
                          <!-- Menu 1.2.A 二级子菜单 -->
                          <Item id="Menu1.2.A">
                            <Control xsi:type="Menu" id="Menu1.2.A.SubMenu">
                              <Label resid="Menu1.2.A.Label"/>
                              <Items>
                                <!-- Menu 1.2.A.A1 跳转按钮 -->
                                <Item id="Menu1.2.A.A1">
                                  <Control xsi:type="Button" id="Menu1.2.A.A1.Button">
                                    <Label resid="Menu1.2.A.A1.Label"/>
                                    <Supertip>
                                      <Title resid="Menu1.2.A.A1.Title"/>
                                      <Description resid="Menu1.2.A.A1.Description"/>
                                    </Supertip>
                                    <Icon>
                                      <bt:Image size="16" resid="Icon.16x16"/>
                                      <bt:Image size="32" resid="Icon.32x32"/>
                                      <bt:Image size="80" resid="Icon.80x80"/>
                                    </Icon>
                                    <Action xsi:type="OpenUrl">
                                      <Url>https://your-target-url.com/1.2.A.A1</Url>
                                    </Action>
                                  </Control>
                                </Item>
                                <!-- Menu 1.2.A.A2 跳转按钮 -->
                                <Item id="Menu1.2.A.A2">
                                  <Control xsi:type="Button" id="Menu1.2.A.A2.Button">
                                    <Label resid="Menu1.2.A.A2.Label"/>
                                    <Supertip>
                                      <Title resid="Menu1.2.A.A2.Title"/>
                                      <Description resid="Menu1.2.A.A2.Description"/>
                                    </Supertip>
                                    <Icon>
                                      <bt:Image size="16" resid="Icon.16x16"/>
                                      <bt:Image size="32" resid="Icon.32x32"/>
                                      <bt:Image size="80" resid="Icon.80x80"/>
                                    </Icon>
                                    <Action xsi:type="OpenUrl">
                                      <Url>https://your-target-url.com/1.2.A.A2</Url>
                                    </Action>
                                  </Control>
                                </Item>
                              </Items>
                            </Control>
                          </Item>
                          <!-- Menu 1.2.B 跳转按钮 -->
                          <Item id="Menu1.2.B">
                            <Control xsi:type="Button" id="Menu1.2.B.Button">
                              <Label resid="Menu1.2.B.Label"/>
                              <Supertip>
                                <Title resid="Menu1.2.B.Title"/>
                                <Description resid="Menu1.2.B.Description"/>
                              </Supertip>
                              <Icon>
                                <bt:Image size="16" resid="Icon.16x16"/>
                                <bt:Image size="32" resid="Icon.32x32"/>
                                <bt:Image size="80" resid="Icon.80x80"/>
                              </Icon>
                              <Action xsi:type="OpenUrl">
                                <Url>https://your-target-url.com/1.2.B</Url>
                              </Action>
                            </Control>
                          </Item>
                        </Items>
                      </Control>
                    </Item>
                    <!-- Menu 1.3 直接跳转按钮 -->
                    <Item id="Menu1.3">
                      <Control xsi:type="Button" id="Menu1.3.Button">
                        <Label resid="Menu1.3.Label"/>
                        <Supertip>
                          <Title resid="Menu1.3.Title"/>
                          <Description resid="Menu1.3.Description"/>
                        </Supertip>
                        <Icon>
                          <bt:Image size="16" resid="Icon.16x16"/>
                          <bt:Image size="32" resid="Icon.32x32"/>
                          <bt:Image size="80" resid="Icon.80x80"/>
                        </Icon>
                        <Action xsi:type="OpenUrl">
                          <Url>https://your-target-url.com/1.3</Url>
                        </Action>
                      </Control>
                    </Item>
                    <!-- Menu 1.4 直接跳转按钮 -->
                    <Item id="Menu1.4">
                      <Control xsi:type="Button" id="Menu1.4.Button">
                        <Label resid="Menu1.4.Label"/>
                        <Supertip>
                          <Title resid="Menu1.4.Title"/>
                          <Description resid="Menu1.4.Description"/>
                        </Supertip>
                        <Icon>
                          <bt:Image size="16" resid="Icon.16x16"/>
                          <bt:Image size="32" resid="Icon.32x32"/>
                          <bt:Image size="80" resid="Icon.80x80"/>
                        </Icon>
                        <Action xsi:type="OpenUrl">
                          <Url>https://your-target-url.com/1.4</Url>
                        </Action>
                      </Control>
                    </Item>
                  </Items>
                </Control>
              </Group>
              <Label resid="CustomTab.Label"/>
            </CustomTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <!-- 资源配置 -->
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://your-domain.com/icon-16.png"/>
        <bt:Image id="Icon.32x32" DefaultValue="https://your-domain.com/icon-32.png"/>
        <bt:Image id="Icon.80x80" DefaultValue="https://your-domain.com/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="Commands.Url" DefaultValue="https://your-domain.com/commands.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="MainMenuGroup.Label" DefaultValue="主菜单组"/>
        <bt:String id="MainMenu.Label" DefaultValue="Main menu"/>
        <bt:String id="MainMenu.Title" DefaultValue="主菜单"/>
        <bt:String id="Menu1.1.Label" DefaultValue="Menu 1.1"/>
        <bt:String id="Menu1.1.A.Label" DefaultValue="Menu 1.1.A"/>
        <bt:String id="Menu1.1.A.Title" DefaultValue="跳转至Menu 1.1.A链接"/>
        <bt:String id="Menu1.1.B.Label" DefaultValue="Menu 1.1.B"/>
        <bt:String id="Menu1.1.B.Title" DefaultValue="跳转至Menu 1.1.B链接"/>
        <bt:String id="Menu1.2.Label" DefaultValue="Menu 1.2"/>
        <bt:String id="Menu1.2.A.Label" DefaultValue="Menu 1.2.A"/>
        <bt:String id="Menu1.2.A.A1.Label" DefaultValue="Menu 1.2.A.A1"/>
        <bt:String id="Menu1.2.A.A1.Title" DefaultValue="跳转至Menu 1.2.A.A1链接"/>
        <bt:String id="Menu1.2.A.A2.Label" DefaultValue="Menu 1.2.A.A2"/>
        <bt:String id="Menu1.2.A.A2.Title" DefaultValue="跳转至Menu 1.2.A.A2链接"/>
        <bt:String id="Menu1.2.B.Label" DefaultValue="Menu 1.2.B"/>
        <bt:String id="Menu1.2.B.Title" DefaultValue="跳转至Menu 1.2.B链接"/>
        <bt:String id="Menu1.3.Label" DefaultValue="Menu 1.3"/>
        <bt:String id="Menu1.3.Title" DefaultValue="跳转至Menu 1.3链接"/>
        <bt:String id="Menu1.4.Label" DefaultValue="Menu 1.4"/>
        <bt:String id="Menu1.4.Title" DefaultValue="跳转至Menu 1.4链接"/>
        <bt:String id="CustomTab.Label" DefaultValue="自定义菜单"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="MainMenu.Description" DefaultValue="包含多级外部跳转链接的主菜单"/>
        <bt:String id="Menu1.1.A.Description" DefaultValue="点击跳转至Menu 1.1.A对应的外部网站"/>
        <bt:String id="Menu1.1.B.Description" DefaultValue="点击跳转至Menu 1.1.B对应的外部网站"/>
        <bt:String id="Menu1.2.A.A1.Description" DefaultValue="点击跳转至Menu 1.2.A.A1对应的外部网站"/>
        <bt:String id="Menu1.2.A.A2.Description" DefaultValue="点击跳转至Menu 1.2.A.A2对应的外部网站"/>
        <bt:String id="Menu1.2.B.Description" DefaultValue="点击跳转至Menu 1.2.B对应的外部网站"/>
        <bt:String id="Menu1.3.Description" DefaultValue="点击跳转至Menu 1.3对应的外部网站"/>
        <bt:String id="Menu1.4.Description" DefaultValue="点击跳转至Menu 1.4对应的外部网站"/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>
关键配置说明

替换所有Url标签内的地址为实际外部网站链接
将图标、加载项页面等资源地址替换为你自己的资源路径
通过嵌套<Menu>和<Item>实现多级菜单结构，叶子节点使用<Button>搭配OpenUrl Action完成跳转
确保Manifest的命名空间和版本要求符合Office Add-in规范，最低支持Outlook Web App的Mailbox 1.3版本
内容的提问来源于stack exchange，提问作者Johny Bravo
求助：使用Visual Studio JavaScript创建多级菜单Outlook Web加载项

关键配置说明 #

关键配置说明
