I have a PPT add-in taskpane with multiple tabs. Some of them are hidden using a drop menu. I also have a custom Tab section in the Ribbon and I would like to add a button there for each tab, so when the user clicks it the corresponding tab should be selected.

Is this possible?

I have a PPT add-in taskpane with multiple tabs. Some of them are hidden using a drop menu. I also have a custom Tab section in the Ribbon and I would like to add a button there for each tab, so when the user clicks it the corresponding tab should be selected.

Is this possible?

• office-js
• office-addins

Share Improve this question Follow asked Mar 21 at 8:33 HumbertoHumberto 43411 gold badge55 silver badges1414 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I'm sorry, but there's no way to pass parameters to an add-in command. You might try the following as a workaround. (I haven't tried this and I don't know if it will work.)
1. Set the action type for each button to ExecuteAction instead of ShowTaskpane.
2. Assign each button action to a different function.
3. Each function calls the `showAsTaskpane()` method and sets focus to the desired tab in the task pane. See [Show or hide the task pane of your Office Add-in](https://learn.microsoft/en-us/office/dev/add-ins/develop/show-hide-add-in).

I followed @Rick suggestion together with a simple window.postMessage() to fix my problem. In summary, since my Add-in is using a shared runtime I emit/post messages whenever I click on one of my Custom Tab buttons and then listen to those events on my react component to switch the corresponding tab.

Thanks again @Rick Kirkham for the tip

In case someone else is facing a similar here is my solution:

//manifest.xml
...
<Control xsi:type="Button" id="images">
   <Label resid="ImagesButton.Label"/>
   <Supertip>
       <Title resid="ImagesButton.Label"/>
       <Description resid="ImagesButton.Tooltip"/>
   </Supertip>
   <Icon>
       <bt:Image size="16" resid="Assets.Icon.16x16"/>
       <bt:Image size="32" resid="Assets.Icon.32x32"/>
       <bt:Image size="80" resid="Assets.Icon.80x80"/>
   </Icon>
   <Action xsi:type="ExecuteFunction">
       <FunctionName>postSwitchTabEvent</FunctionName>
   </Action>
</Control>
...

//commands.ts

async function postSwitchTabEvent(event: Office.AddinCommands.Event): Promise<void> {
  await Office.addin.showAsTaskpane();
  const tabId = event.source.id;
  window.postMessage({ type: "switchTab", tabId }, "*"); 
  eventpleted();
}

Office.actions.associate("postSwitchTabEvent", postSwitchTabEvent);

//App.tsx

...

useEffect(() => {
        Office.onReady(() => {
           console.log("Office Ready on Assets Panel")
            // Listen for tab switch messages from the Ribbon
            const handleMessage = (event) => {
                if (event.data && event.data.type === "switchTab") {
                  console.log("Assets Panel switchTab event", event)
                  console.log("Assets Panel switching to ", event.data.tabId)
                  setSelectedTab(event.data.tabId);
                }
            };

            window.addEventListener("message", handleMessage);

            // Cleanup the event listener on unmount
            return () => {
                window.removeEventListener("message", handleMessage);
            };
        });
  }, []);

...