Find properties for OOTB modern web parts when adding them to the page using PnP Core Online library

August 6, 2018

With the uptake in the SharePoint modern experience I’ve found my self getting to understand and know the new ways of working with Yeoman, Gulp, VSCode, etc. At times this has been a painful experience but on the whole it has been an interesting shift away from the classic C# server side development world I’m used to.

That said I’m currently working on a project which requires c# code and its been a funny switch back into this frame of mind. My task has been to provision some modern pages and add various different web parts to the page.

When looking at this I decided to use SharePointPnPCoreOnline to help speed up the development and this is a great library to save you writing code. There are some great guides and articles out there on how you can interact with modern pages,

Most of these have lots of detail around creating pages, updating pages and adding web parts but when it comes to adding some of the OOTB web parts you need specific properties set in order for these to work as expected. This article details the steps I followed to work out what you need to set in each case, this process should work for any modern web part.

My first test was adding the OOTB image web part and this is actually covered in the MS documentation, however when I tried I noticed that although the web part was added it wasn’t correctly configured

Sample Code Snippet

var imageWebPart = page.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image);

imageWebPart.Properties[“imageSourceType”] = 2;
imageWebPart.Properties[“siteId”] = imageFile.SiteId;
imageWebPart.Properties[“webId”] = imageFile.WebId;
imageWebPart.Properties[“listId”] = imageFile.ListId;
imageWebPart.Properties[“uniqueId”] = imageFile.UniqueId;
page.AddControl(imageWebPart, firstColumn, controlIndexPosition);

The result of the code above was a new image web part was added but it wasn’t showing the image, see below

IncorrectlyConfiguredImage

From one of the previous PnP calls I was aware you can add a special query string parameter to get information about the page and web part configuration so I navigated to my new page and added ?maintenancemode=true to the url and refreshed the page. This puts the page and web parts in a debug mode were you can see all the configuration data, see below

MaintenanceMode

I found the added ImageWebPart instance and then clicked on the “Data” tab and this shows all the web part specific properties, see below

ImageWebPartProperties

I then added an image web part and manually configured this. Once added I saved and closed the page and re-added the query string parameter, see below

ImageWebPartPropertiesWorking

I compared the two and was able to see in the “serveProcessedContent” section of the JSON there is an “imageSource” property. At first I tried to set this on the “serveProcessedContent” web part object but this is read only. In the end I simple added the “imageSource” to the properties directly, see below, and this worked.

Working Code Sample

var imageWebPart = page.InstantiateDefaultWebPart(DefaultClientSideWebParts.Image);

imageWebPart.Properties[“imageSourceType”] = 2;
imageWebPart.Properties[“imageSource”] = image.Url;
imageWebPart.Properties[“siteId”] = imageFile.SiteId;
imageWebPart.Properties[“webId”] = imageFile.WebId;
imageWebPart.Properties[“listId”] = imageFile.ListId;
imageWebPart.Properties[“uniqueId”] = imageFile.UniqueId;
imageWebPart.Properties[“linkUrl”] = image.LinkUrl;
imageWebPart.Properties[“captionText”] = image.CaptionText;
imageWebPart.Properties[“overlayText”] = image.TextOverlay;
imageWebPart.Properties[“altText”] = image.AltText;

page.AddControl(imageWebPart, firstColumn, controlIndexPosition);

This was an example specifically focused on the image web part, however its the same process for any of the OOTB or custom web parts and I have followed the same process for the OOTB File Viewer and Person web part.

Hope this helps

Advertisements

%d bloggers like this: