How to create Word Add-in SplitButton Control?

[hiren3897]

Note: This repo is only for questions related to its samples. If you have questions about how to use office.js or the Office developer platform, please post your question on https://stackoverflow.com. Tag your question with office-js or outlook-web-addins

Question I am creating a Microsoft Word add-in with 'yo office'. My project stack includes React and Typescript (manifest.xml).

I would like to create a group control using SplitButton Is this possible?

My Manifest.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<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:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="TaskPaneApp">
  <Id>d113e90e-6acb-4afe-b355-e83b9d499ddf</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Contoso</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="wordor" />
  <Description DefaultValue="A template to get started." />
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-64.png" />
  <SupportUrl DefaultValue="https://www.contoso.com/help" />
  <AppDomains>
    <AppDomain>https://www.contoso.com</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Document" />
  </Hosts>
  <Requirements>
    <Sets DefaultMinVersion="1.1">
      <Set Name="SharedRuntime" MinVersion="1.1" />
    </Sets>
  </Requirements>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:3000/taskpane.html" />
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="Document">
        <Runtimes>
          <Runtime resid="Taskpane.Url" lifetime="long" />
        </Runtimes>
        <DesktopFormFactor>
          <GetStarted>
            <Title resid="GetStarted.Title" />
            <Description resid="GetStarted.Description" />
            <LearnMoreUrl resid="GetStarted.LearnMoreUrl" />
          </GetStarted>
          <FunctionFile resid="Taskpane.Url" />
          <ExtensionPoint xsi:type="PrimaryCommandSurface">
            <OfficeTab id="TabHome">
              <Group id="CommandsGroup">
                <Label resid="CommandsGroup.Label" />
                <Icon>
                  <bt:Image size="16" resid="Icon.16x16" />
                  <bt:Image size="32" resid="Icon.32x32" />
                  <bt:Image size="80" resid="Icon.80x80" />
                </Icon>
                <Control xsi:type="Button" id="Showtaskpane">
                  <Label resid="Item1.Label" />
                  <Supertip>
                    <Title resid="Item1.Label" />
                    <Description resid="Item1.Tooltip" />
                  </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="ExecuteFunction">
                    <FunctionName>toggleTaskPane</FunctionName>
                  </Action>
                </Control>
                <Control xsi:type="Button" id="itemExecuteFunction">
                  <Label resid="Item2.Label" />
                  <Supertip>
                    <Title resid="Item2.Label" />
                    <Description resid="Item2.Tooltip" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Send_button_Icon.16x16" />
                    <bt:Image size="32" resid="Send_button_Icon.32x32" />
                    <bt:Image size="80" resid="Send_button_Icon.80x80" />
                  </Icon>
                  <Action xsi:type="ExecuteFunction">
                    <FunctionName>sendReport</FunctionName>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon_16x16.png" />
        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon_32x32.png" />
        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon_32x32@2x.png" />
        <bt:Image id="Send_button_Icon.16x16" DefaultValue="https://localhost:3000/assets/send_button_icon_16x16.png" />
        <bt:Image id="Send_button_Icon.32x32" DefaultValue="https://localhost:3000/assets/send_button_icon_32x32.png" />
        <bt:Image id="Send_button_Icon.80x80" DefaultValue="https://localhost:3000/assets/send_button_icon_32x32@2x.png" />
      </bt:Images>
      <bt:Urls>
        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812" />
        <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html" />
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GetStarted.Title" DefaultValue="Reportor add-in!" />
        <bt:String id="CommandsGroup.Label" DefaultValue="Reports" />
        <bt:String id="Menu.Label" DefaultValue="Milvue" />
        <bt:String id="Item1.Label" DefaultValue="Milvue" />
        <bt:String id="Item2.Label" DefaultValue="Send Report" />
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="GetStarted.Description" DefaultValue="Your sample add-in loaded succesfully. Go to the HOME tab and click the 'Show Taskpane' button to get started." />
        <bt:String id="Item1.Tooltip" DefaultValue="Click to open Add-in" />
        <bt:String id="Item2.Tooltip" DefaultValue="Choose to send report" />
        <bt:String id="Menu.Tooltip" DefaultValue="Open Menu" />
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

Answer your question here.

[AlexJerabek]

Hi @hiren3897,

The only valid controls are buttons, menus, and mobile buttons (as defined by the Control section of the manifest). If you need a split button, you could add it to a task pane in your add-in. You can also request new features at the M365 Developer Platform Tech Community site.

Since this question doesn't pertain to the samples in this repo, I'm going to close the issue. If you need help implementing your add-in's UI, I'd recommend posting on Stack Overflow (with the tag "office-js"). If the manifest documentation is unclear, please use the controls at the bottom of each page to create issues and let us know.

Thanks!