Provisioning SPFX Client Web Parts - Content Rollup & Events

Background

The Modern UI in SharePoint is getting better and better. We have passed the point in time where we create the sites using the classic version of SharePoint and this means we need to be able to provision the modern stuff.

Chris O'Brien wrote a really nice blog post explaining the details of provisioning client side web parts to modern SharePoint pages and I will not iterate the things he pointed out there. Kudos to Chris for a nice article!

In this short blog post I will add to that post explaining how to add two other web parts, the Events Web Part and the Content Roll Up Wep Part. I did some digging on the properties and values that needs to be set in order to configure these web parts and thought it would be a good idea to save you the trouble.

How to add the web parts

When it comes to the Content Roll Up Web Part, the goal here is to list the latest documents in a list-view style.
In the sample code below we assume that we already have a ClientPage object called page . The steps in short are:

  • Get the ClientPage you want to populate
  • Ensure that there is a section on the page
  • Instantiate a web part using the InstantiateDefaultWebPart method on the ClientPage object
  • Configure the properties of the web part
  • Add the web part to a section
  • Save the page
  • Party

For this web part you need to configure the Guids for a Web and it's Site. Also pay attention to the "layoutId" property that is set to "List". There are other layouts available and I haven't been able to find any documentation on the available values. What I do is to add the a web part to a page, then I inspect the property values that are set when using the user interface and then you can just replicate them. Here is the code for the Content Rollup Web Part displaying the latest documents.

var latestDocsWP = page.InstantiateDefaultWebPart(DefaultClientSideWebParts.ContentRollup); latestDocsWP.Properties["templateId"] = 2; latestDocsWP.Properties["maxItemsPerPage"] = 8; latestDocsWP.Properties["hideWebPartWhenEmpty"] = false; latestDocsWP.Properties["layoutId"] = "List"; latestDocsWP.Properties["dataProviderId"] = "Search"; latestDocsWP.Properties["webId"] = webId; latestDocsWP.Properties["siteId"] = siteId; var section = ensureSection(page); page.AddControl(latestDocsWP, section); page.Save(); The result shows a list of the latest modified documents on the site (when the site is brand new and there is no activity it displays some placeholders like below):

When it comes to the Events Web Part, you also need to ensure that you actually have an event list to be able to connect the Web part. There are tons of articles on how to do that, one place to start is by reading microsofts documentation. So to configure this web part you need the Guids of the list, the web and the site.

var eventsWP = page.InstantiateDefaultWebPart(DefaultClientSideWebParts.Events); eventsWP.Properties["selectedListId"] = eventListId; eventsWP.Properties["selectedCategory"] = ""; eventsWP.Properties["dateRangeOption"] = 0; eventsWP.Properties["startDate"] = ""; eventsWP.Properties["endDate"] = ""; eventsWP.Properties["isOnSeeAllPage"] = false; eventsWP.Properties["layoutId"] = "FilmStrip"; eventsWP.Properties["dataProviderId"] = "Event"; eventsWP.Properties["webId"] = webId; ; eventsWP.Properties["siteId"] = siteId; var section = ensureSection(page); page.AddControl(eventsWP, section); page.Save();

The result:

How to keep digging

If you want to play around with this stuff my advice is to simply add different web parts to a page and inspect what the properties and values are.

Happy coding!