SharePoint Framework: How to let modern web parts interact with each other?

Question

How can web parts know of and interact with each other within the SharePoint Framework?

Here's an example. Let's say we need:

1. a search box web part
2. search result web part
3. a filter web part

All built by us in SPFx. All placed on one page.

The user types a search query into the search box - the search result web part and the filter web part should update while typing. The user clicks a value in the filter web part - the search result web part should update. And so on. Highly interactive.

And this is just one example, you could imagine other complex, modular UIs.

The user is free to place any of these web parts on any page (modern and classic). He could leave the filter web part out and just place the search box and search result web part and it should work. If he omits a critical web part the other web parts should detect this and show a hint.

So the web parts "know" each other and bind their UI to a shared state. User interaction in one web part triggers actions in other web parts.

How would you approach this in the most SPFx-compatible manner? I think I could always use a shared data blob somewhere and somehow bind to that (how?). But is this the way? What are the alternatives?

Answer 1

Heinrich,

I know this is an old question, but I thought it would be useful to post an updated response for anyone looking into this.

I believe you are looking for Dynamic Data Connections in the SharePoint Framework.

It is relatively easy to implement, see the tutorial on docs.microsoft.com.

There are also a few samples in the GitHub: - React-events-dynamicdata - The awesome FilterPack, which does pretty much exactly what you're asking seems to use dynamic data (either that, or it uses voodoo magic, but it is definitely awesome) - My own react-chartcontrol sample has two web parts: dynamicDataCallable and dynamicDataConsumer, which implement dynamic data for drawing charts.

One tip: when you create your dynamic data consumers (which receive the data), make sure you create a variable to store the received value in your web part's manifest, under the properties node. Otherwise, you'll get a scary error saying it can't serialize the properties.

For example, my dynamicDataConsumer web part expects a dynamic property called contributor, which is an object. In my web part manifest, I define it as follows:

 "properties": {
      "contributor": {}
    }

I hope this helps?

Answer 2

Is this what you are looking for?

https://github.com/SharePoint/sp-dev-docs/blob/master/docs/spfx/web-parts/guidance/tutorial-share-data-between-web-parts-global-variable.md

The article talks about setting up two different WebParts that use a single central data store to access data which means that you can share data between the two distinct WebParts and you can deploy either of them individually without a requirement on the other as Heinrich stated. It should allow communication between the two WebParts as he wants