Sometimes you have multiple add-ins and you need to facilitate communication between them. For example, a common scenario I have heard is that you have:
- A Content Add-in that displays something like a graph or an organization chart.
- A Taskpane app that allows you to manipulate settings, upload and download data from a backend web service.
You need to be able to facilitate communication between the two so that when updates happen to one add-in, the other receives those updates. I recently worked on a proof of concept that helped prove how this can be done.
The solution is to use the Document as a communication medium. In the particular case we used CustomXMLParts in the document. Here is how it would work:
- One add-in would need to send an update to the other, so it would write a CustomXMLPart with a specific namespace and a “context” (basically, I am the TaskPane communicating) to the document.
- Both add-ins will have a window.setInterval() thread running to check the documents for CustomXMLParts in that given namespace.
- The timer on the Content Add-in would fire, find the new customXMLPart from the taskpane, read the contents and then update itself as needed and finally, delete the CustomXMLPart.
Here is the code for the Content Add-in to look for the message from the TaskPane:
Next, here is the code in the Task Pane Add-in that will send the message for the content add-in to read:
3 thoughts on “Communication between Office Web Add-ins”
Thanks for the POC! I think there is something messed up around your const ns declarations, but I’m not sure what that member is for anyway
Oops, I see it now 🙂 What I should have pointed out was the weird quote encoding with those two string definitions
Good catch on that. The issue is not with the code in GitHub:
const ns = “http://pfe.microsoft.com/excelpoc/1.0”;
Something about the way it is brought in through the web part on WordPress. I tried to change it, but it still looked that same, so not sure what is going on with it, but I guess it is the formatter.
You can see it is correctly displayed in GitHub too if you click View RAW. It just displays with the webpart as " instead. 🙁