Creating a Custom Ribbon Tab in Outlook Add-in

Question

I've been working on developing Outlook Add-ins and I'm currently trying to create a customized ribbon tab within Outlook. I've followed the tutorial provided by Microsoft, which has been great for creating Add-ins, but I'm having trouble understanding how to customize the ribbon in Outlook.

I also took a look at this guide, but I'm struggling to figure out where to start. I'm unsure about the type of project to choose in Visual Studio and what "Ribbon (Visual Designer)" refers to.

I came across this thread, which had some information, but it wasn't very helpful in giving me clear instructions.

Could someone provide me with step-by-step instructions or guidance on how to create a new tab in the ribbon and add buttons or dropdowns to it? Any advice, code examples, or pointers to relevant resources would be greatly appreciated. I'm specifically looking for insights on how to customize the ribbon in an Outlook Add-in context.

Thank you in advance for your help!

Answer 1

You are mixing up frameworks here. Since you are creating an add-in using the framework in this tutorial, you can add a custom tab to the ribbon by opening up the manifest XML file and then adding a CustomTab element to it, for example:

<ExtensionPoint xsi:type="ContosoRibbonTab">
  <CustomTab id="Contoso.TabCustom2">
    <Group id="Contoso.TabCustom2.group2">
       <!-- add your button control markup here -->
    </Group>
    <Label resid="customTabLabel1" />
  </CustomTab>
</ExtensionPoint>

More information here:

1. https://learn.microsoft.com/en-us/office/dev/add-ins/design/custom-tab-placement
2. https://learn.microsoft.com/en-us/javascript/api/manifest/customtab?view=common-js-preview

Since you are building an Outlook add-in, you can omit the InsertBefore and the InsertAfter elements since they are not supported in Outlook.