Using dynamic data extensibility feature to connect ArcGIS web part with other client-side SPFx web parts

[RaajRaaj]

Using SharePoint SPFx framework to extend dynamic data or web part connectivity

In the January 2023 release of ArcGIS for SharePoint, we are introducing a new feature which is an extension of the existing web part connectivity between a SharePoint list and the ArcGIS map web part.

The current feature allows web part connectivity between SharePoint lists and the ArcGIS  map web part.

After the January 2023 release, it will be possible to interact with the ArcGIS map web part using client-side SPFx web parts.

Dynamic data in the SharePoint Framework is based on the source-notification model. Components named as a dynamic data source or a “publisher”, provide data, and notify the SharePoint Framework when the data changes. Other web parts on the page can subscribe to notifications issued by a dynamic data source. Whenever the data changes in the dynamic data source, the SPFx framework notifies all the consumer web parts that source data has changed and the consumer web parts can then request the data from the source web part. This allows client-side SharePoint SPFx web parts to exchange data and also allows you to build rich experiences and compelling end-user solutions.

This blog will discuss the steps needed to set up the client-side SPFx web part to receive data from the ArcGIS web part that is acting as a publisher. We will also discuss web part connectivity with the ArcGIS web part acting as a consumer with a publishing client-side SPFx web part added to the same page.

  ArcGIS web part as a “Publisher”

I will first add the ArcGIS web part to a SharePoint page. The next step is to add layers using SharePoint lists or ArcGIS layers. In this example, I will be adding a layer from ArcGIS Online. Once the layer is added to the map, I can now add the sample consumer web part to the same page (for more information on how to create these sample client-side SPFx web parts, please refer to this link).

As you can see in the above video, once I select features using a selection tool, some basic information regarding the selected features is printed on the “consumer” client-side SPFx web part. I can access additional information from the browser console, which is printed under “ArcGIS web part layer selection Info”. Similarly, the ArcGIS web part can also print information regarding filtered features.

  ArcGIS web part as a “Consumer”

I will first add the ArcGIS web part to a SharePoint page. The next step is to add layers using SharePoint lists or ArcGIS layers. In this example, I will be adding a layer from ArcGIS Online. Once the layer is added to the map, I can now add the sample publisher web part to the same page (for more information on how to create these sample client-side SPFx web parts, please refer to this link).

In the below example, I have added a layer from ArcGIS Online which shows the locations of all the Hospitals in Puerto Rico. The map layer also contains information regarding the number of beds available at each hospital, speciality type and other key details regarding each hospital. I will then add a client-side SPFx web part which can create can be used to create simple donut charts. For the below example, I have used a SharePoint List containing Hospital specialities to create the donut chart. Next, I will edit the ArcGIS web part and on the side config pane, I will add a new connection. In the new connection, I will choose the Web part source to connect, in this case it’s the client-side SPFx web part with the donut chart. I will then choose the map layer from the drop-down and also choose the column to join with the donut chart. In this case, the joining column is the “Type” attribute in the map layer. Now the connection has been established.

As you can see in the above video, once I select a specific specialty type on the donut chart, the map layer gets filtered, and it shows the hospital locations with that specialty type.

Filtered Info:

Now that the map layer has been filtered, adding the consumer client-side SPFx web part to the same page will result in the filtered info being printed on the browser console. Thus, the ArcGIS web part can now act both as a publisher and a consumer to exchange data with other client-side SPFx web parts.