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'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.com/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 }, "*");
event.completed();
}
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);
};
});
}, []);
...