Search code examples
javascriptms-officeoffice-jsoffice-addinsoffice-app

Routing and navigation in Office taskpanes


I have a mean-stack site with angular-ui-router, now I want to code an Office add-in with a server and a part of its functionality, and interact with Office.

I have seen add-in commands, which permits of going to certain pages from ribbon buttons. But could anyone tell me what should be the best tool to implement navigation (as well as going back & forward) inside the task pane (like ui-view and ui-router for a web site).

For example, how should we implement the navbar and the navigation in the following taskpane?

enter image description here

Additionally, I have seen some add-ins can launch 2 taskpanes (by 2 ribbon buttons in the same group) at the same time. We can switch between 2 taskpanes, and we can also show them side by side at the same time.

Does anyone know how to achieve this?

enter image description here


Solution

  • For independent taskpanes, you can specify an unique TaskpaneId for each Action defined in your manifest. See the manifest Action documentation for details. Note that this isn't supported by Outlook.

    The UX you're referencing is using two different types of control elements. In this case there are several Button controls and a Menu control (the drop-down).

    All of the above are defined within your add-in's manifest file. For working examples of add-in commands there is an Office Add-in Commands Sample available on GitHub. There are several add-in samples included in this repo, each with their own manifest (for example, the Word manifest).