How to create new tab with buttons in word 2016

Question

I am new to office 365. I have developed one taskpane add in (testaddin) for word 2016 using javacript api. In word 2016, I want to create new tab (testtab) and add a button to it . On clicking that button, i need to display my testaddin in taskpane. I have got sample manifest file here. https://github.com/OfficeDev/Office-Add-in-Commands-Samples/tree/master/Word. After downloading files where to place the manifest file. I already have one shared directory which contains my testaddin manifest file and its loading in taskpane. Any help will be really appreciated.

Answer 1

The manifest you refer from GitHub is a runnable one. We can modify it base on our requirement and deploy it into the share folder too. For example, to create a new tab on the ribbon instead of using the build-in tab, we need to use the “CustomTab” instead of “OfficeTab”.

Here is the detail steps:

1. Modify the manifeste like below(you need to modify the source location and images based on your business requirement)

<?xml version="1.0" encoding="UTF-8"?>
<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">
  <!-- BeginBasicSettings: Add-in metadata, used for all versions of Office unless override provided -->

  <!--IMPORTANT! Id must be unique for your add-in, if you clone this manifest ensure that you change this id to your own GUID -->
  <Id>651a32a9-ab8a-4579-ac9f-df1a11a64e54</Id>

  <!--Version. Updates from the store only get triggered if there is a version change -->
  <Version>1.0.0.0</Version>
  <ProviderName>Contoso</ProviderName>
 <DefaultLocale>en-US</DefaultLocale>
  <!-- The display name of your add-in. Used on the store and various placed of the Office UI such as the add-ins dialog -->
  <DisplayName DefaultValue="Citations" />
  <Description DefaultValue="Citations Example"/>

  <!--Icon for your add-in. Used on installation screens and the add-ins dialog -->
  <IconUrl DefaultValue="https://i.imgur.com/LltG56v.png" />

  <!--Todo: Add requirement sets and remove  commenting of high res icon -->
  <!--The HighResolutionIcon element is commented because it is valid only for 1.1 (or above) versions of the manifest.
          To use this property, convert this manifest to version 1.1 by adding an API set in the Activation tab of the manifest editor.-->
  <!--<HighResolutionIconUrl DefaultValue="https://i.imgur.com/MPuvMiq.png" />-->

  <!--Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list -->
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
    <AppDomain>AppDomain2</AppDomain>
    <AppDomain>AppDomain3</AppDomain>
  </AppDomains>
  <!--EndBasicSettings-->

  <!--BeginTaskpaneMode integration. Office 2013 and any client that doesn't understand commands will use this section.
    This section will also be used if there are no VersionOverrides -->
  <Hosts>
    <Host Name="Document" />
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://addinwithfabric.azurewebsites.net/index.html" />
  </DefaultSettings>
  <!--EndTaskpaneMode integration -->

  <Permissions>ReadWriteDocument</Permissions>

  <!--BeginAddinCommandsMode integration-->
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <!-- Optional, override the description of the Add-in -->
    <Description resid="residToolTip" />
    <!--Required, hosts node. Each host can have a different set of commands -->
    <Hosts>
      <!--Specific host. Workbook=Excel, Document=Word, Presentation=PowerPoint -->
      <Host xsi:type="Document">
        <!-- Form factor. Currenly only DesktopFormFactor is supported. We will add TabletFormFactor and PhoneFormFactor in the future-->
        <DesktopFormFactor>

          <!--GetStarted information used on the callout that appears when installing the add-in. 
            Ensure you have build 16.0.6769 or above for GetStarted section to work-->
          <GetStarted>
            <!--Title of the Getting Started callout. resid points to a ShortString resource -->
            <Title resid="Contoso.GetStarted.Title"/>

            <!--Description of the Getting Started callout. resid points to a LongString resource -->
            <Description resid="Contoso.GetStarted.Description"/>

            <!--Not used right now but you need to provide a valid resource. We will add code in the future to consume this URL. 
                                               resid points to a Url resource -->
            <LearnMoreUrl resid="Contoso.GetStarted.LearnMoreUrl"/>
          </GetStarted>

          <!--Function file is an html page that includes the javascript where functions for ExecuteAction will be called. 
            Think of the FunctionFile as the "code behind" ExecuteFunction 
            This sample doesn't use this file, just adding the element for reference-->

          <!--PrimaryCommandSurface==Main Office Ribbon-->
          <ExtensionPoint xsi:type="PrimaryCommandSurface">

            <!--Use OfficeTab to extend an existing Tab. Use CustomTab to create a new tab -->
            <!-- Documentation includes all the IDs currently tested to work -->
            <CustomTab id="Contoso.Citations">
              <!--Group. Ensure you provide a unique id. Recommendation for any IDs is to namespace using your companyname-->
              <Group id="Contoso.Citations.Group1Id1">
                <!--Label for your group. resid must point to a ShortString resource -->
                <Label resid="residLabel4" />
                <!--Icons. Required sizes 16,31,80, optional 20, 24, 40, 48, 64. Strongly recommended to provide all sizes for great UX -->
                <!--Use PNG icons and remember that all URLs on the resources section must use HTTPS -->
                <Icon>
                  <bt:Image size="16" resid="icon1_16x16" />
                  <bt:Image size="32" resid="icon1_32x32" />
                  <bt:Image size="80" resid="icon1_80x80" />
                </Icon>
                <!--Control. It can be of type "Button" or "Menu" -->
                <Control xsi:type="Button" id="Button3Id1">
                  <!--Label for your button. resid must point to a ShortString resource -->
                  <Label resid="residLabel3" />
                  <Supertip>
                    <!--ToolTip title. resid must point to a ShortString resource -->
                    <Title resid="residLabel" />
                    <!--ToolTip description. resid must point to a LongString resource -->
                    <Description resid="residToolTip" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="icon1_16x16" />
                    <bt:Image size="32" resid="icon3_32x32" />
                    <bt:Image size="80" resid="icon1_80x80" />
                  </Icon>
                  <!--This is what happens when the command is triggered (E.g. click on the Ribbon). Supported actions are ExecuteFuncion or ShowTaskpane-->
                  <Action xsi:type="ShowTaskpane">
                    <!--Provide a url resource id for the location that will be displayed on the taskpane -->
                    <SourceLocation resid="residUnitConverterUrl" />
                  </Action>
                </Control>
              </Group>
              <Label resid="residLabel4" />
            </CustomTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="icon1_16x16" DefaultValue="https://i.imgur.com/xV3upTT.png">
          <bt:Override Locale="ja-jp" Value="https://i.imgur.com/xV3upTT.png" />
        </bt:Image>
        <bt:Image id="icon1_32x32" DefaultValue="https://i.imgur.com/kBw0iKX.png">
          <bt:Override Locale="ja-jp" Value="https://i.imgur.com/kBw0iKX.png" />
        </bt:Image>
        <bt:Image id="icon1_80x80" DefaultValue="https://i.imgur.com/xV3upTT.png">
          <bt:Override Locale="ja-jp" Value="https://i.imgur.com/xV3upTT.png" />
        </bt:Image>
        <bt:Image id="icon2_32x32" DefaultValue="https://i.imgur.com/LltG56v.png">
        </bt:Image>
        <bt:Image id="icon3_32x32" DefaultValue="https://i.imgur.com/6WiJTG0.png">
        </bt:Image>
      </bt:Images>
      <bt:Urls>

        <bt:Url id="residUnitConverterUrl" DefaultValue="https://addinwithfabric.azurewebsites.net/index.html">
        </bt:Url>
        <!--LearnMore URL currently not used -->
        <bt:Url id="Contoso.GetStarted.LearnMoreUrl" DefaultValue="https://odsample.azurewebsites.net/Pages/GetStarted.html">
        </bt:Url>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="residLabel" DefaultValue="Get Data">
          <bt:Override Locale="ja-jp" Value="JA-JP Multiple Buttons" />
        </bt:String>
        <bt:String id="residLabel2" DefaultValue="Save Data">
          <bt:Override Locale="ja-jp" Value="JA-JP Multiple Buttons" />
        </bt:String>
        <bt:String id="residLabel3" DefaultValue="Search Citation">
          <bt:Override Locale="ja-jp" Value="JA-JP Multiple Buttons" />
        </bt:String>
        <bt:String id="residLabel4" DefaultValue="Web Citations">
          <bt:Override Locale="ja-jp" Value="JA-JP Multiple Buttons" />
        </bt:String>
        <bt:String id="residLabel5" DefaultValue="Another Command">
          <bt:Override Locale="ja-jp" Value="JA-JP Multiple Buttons" />
        </bt:String>
        <bt:String id="Contoso.GetStarted.Title" DefaultValue="Citation Sample Loaded Successfully">
          <bt:Override Locale="ja-jp" Value="JA-JP Get Started Title" />
        </bt:String>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="residToolTip" DefaultValue="Multiple Buttons Tooltip">
          <bt:Override Locale="ja-jp" Value="JA-JP Multiple Buttons Tooltip" />
        </bt:String>
        <bt:String id="Contoso.GetStarted.Description" DefaultValue="Get going by opening the REFERENCES tab on the Ribbon then click WEB CITATIONS>SEARCH CITATION button">
          <bt:Override Locale="ja-jp" Value="JA-JP Get Started Title" />
        </bt:String>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

2. Copy the manifest to the share folder which you have configure as “Trusted Catalog” for the Word.
3. Insert the apps for Office from the share folder, you are able to see the new tab “Web Citations” on the ribbon

Answer 2

please make sure to follow the documentation. The manifest you downloaded should not require any changes, just to test it make sure to follow the links below:

1. Add-In Commands intro http://dev.office.com/docs/add-ins/design/add-in-commands
2. Check out the samples: https://github.com/OfficeDev/Office-Add-in-Commands-Samples/blob/master/README.md
3. Test it using a network share: https://dev.office.com/docs/add-ins/publish/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins

If you follow these documents you should be able to test. Please let me know if the information on those pages is not useful, or how to improve it!..

thanks!