CODEWITHSUNDEEP
exceloffice-jsoffice-addinsribbonxexcel-web-addins
Aishwarya Vohra
Aishwarya Vohra

Reputation: 19

Show/hide controls in Office JS Addin ribbon

I am creating an Office JS Addin app for Excel in which I have added a custom tab using the manifest. The tab is always visible but a few controls on the tab (i.e. buttons/menus) need to be shown/hidden based on certain conditions.

I read the official documentation and understood that the tabs can be shown/hidden using the contextual tab method but the controls can only be enabled/disabled. I even tried to write some javascript to access the button from the ribbon using "aria-label" but that didn't work. Any advice on how this can be achieved?

Upvotes: 0

Views: 664

Answers (1)

Eugene Astafiev
Eugene Astafiev

Reputation: 49455

The Ribbon API is still limited when comparing to Office COM add-ins. You can post or vote for an existing feature request on Tech Community where they are considered when the Office dev team goes through the planning process.

Moreover, custom contextual tabs are currently only supported on Excel and only on these platforms and builds.

  • Excel on Windows: Version 2102 (Build 13801.20294) or later.
  • Excel on Mac: Version 16.53.806.0 or later.
  • Excel on the web

Custom contextual tabs work only on platforms that support the following requirement sets:

To hide or show a contextual tab programmatically you may use the following code:

const showDataTab = async () => {
    const myContextualTab: Office.Tab = {id: "CtxTab1", visible: true};
    const ribbonUpdater: Office.RibbonUpdaterData = { tabs: [ myContextualTab ]};
    await Office.ribbon.requestUpdate(ribbonUpdater);
}

Read more about that in the Create custom contextual tabs in Office Add-ins article.

The Enable and Disable Add-in Commands article explains how to programmatically enable or disable your custom add-in commands.

Upvotes: 2

Related Questions