Part 2. Pinnable Task Pane — Building Outlook Add-in with React
Implement a pinnable task pane in Outlook
More posts on buiding Outlook add-in with React:
In this post, we are going to make our task pane pinnable.
manifest.xml
In manifest file, we add a tag <SupportPinning> like this:
// the button that opens the task pane
<Control xsi:type="Button" id="TaskPaneButton">
<Label resid="TaskpaneButton.Label"/>
<Supertip>
<Title resid="TaskpaneButton.Label"/>
<Description resid="TaskpaneButton.Tooltip"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
</Icon>
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="App.Url"/>
<SupportsPinning>true</SupportsPinning>
</Action>
</Control>(full manifest file here)
Now if you add the add-in again to your outlook using the new manifest.xml, you should see the little pin on the top right side.
Add handler when the mailbox item changes
But you might notice that your app doesn’t update when you switch between emails, that’s because it doesn’t know when the mailbox item changes.
So we need to listen to the mailbox item change event and run whatever update you want when the change event happens. It goes something like this:
Office.context.mailbox.addHandlerAsync(
Office.EventType.ItemChanged,
yourFunctionToGetNewMailboxItem
);In our case, we have a context that has the mailbox.item object. So we need to get the new item when we switch to another email.
export const OfficeContextProvider: React.FC = ({ children }) => {
useEffect(() => {
Office.onReady(() => { // get mailbox item when office is ready
getMailboxItem(); // add event listener to mailbox item change event
Office.context.mailbox.addHandlerAsync(
Office.EventType.ItemChanged,
getMailboxItem
);
});
}, []);
return (
<OfficeContext.Provider value={...}>
{children}
</OfficeContext.Provider>
);
};
(full file here)
More posts on buiding Outlook add-in with React:
