[SOLVED] Two Custom Ribbon Tabs In Same Office Add-In

Two Custom Ribbon Tabs In Same Office Add-In - Excel Javascript

I'm trying to build a second tab in my Excel Add-In and I can't get it to work. I've basically duplicated my first tab and if I delete either tab, they show, but I can't get both to show together. Is it possible for an Office Add-In to have more then one tab?

I was reading about <ExtensionPoint xsi:type="PrimaryCommandSurface"> and wondered if that should be duplicated around my custom tabs or if all the tabs should be inside that one element?

Here is my custom tab that is working. If I re-arrange them, the second one will load always.

 <ExtensionPoint xsi:type="PrimaryCommandSurface">

        <!-- Custom Tab -->
        <!-- <OfficeTab id="TabHome"> -->
        <CustomTab id="Contoso.CustomTab2">
          <Group id="Contoso.CustomTab2.group1">

            <Label resid="FindSMP.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="NewButton">
              <Label resid="FakeData.Label"/>
              <Supertip>
                <Title resid="FakeData.Label"/>
                <Description resid="FakeData.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>fakedata</FunctionName>
              </Action>
            </Control>


          </Group>
          <Label resid="TabGroup.Label"/>

        </CustomTab>
        <!-- Custom Tab -->
      </ExtensionPoint>
      <ExtensionPoint xsi:type="PrimaryCommandSurface">
        <!-- Custom Tab -->
        <!-- <OfficeTab id="TabHome"> -->
        <CustomTab id="Contoso.CustomTab3">
          <Group id="Contoso.CustomTab3.group1">

            <Label resid="FindSMP.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="FakeDataButton">
              <Label resid="FakeData.Label"/>
              <Supertip>
                <Title resid="FakeData.Label"/>
                <Description resid="FakeData.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>fakedata</FunctionName>
              </Action>
            </Control>


          </Group>
          <Label resid="TabGroup12.Label"/>

        </CustomTab>
        <!-- Custom Tab -->

      </ExtensionPoint>

If I comment this out, then the first one loads:

  </ExtensionPoint>
  <ExtensionPoint xsi:type="PrimaryCommandSurface">

Update: Issue URL on GitHub --> https://github.com/OfficeDev/office-js/issues/2521

Solution

According to MSFT an Add-In can't have two tabs.