Configuring OOTB People web part using PnP Core Online library

August 6, 2018

Following on from my previous post Find properties for OOTB modern web parts when adding them to the page using PnP Core Online library I was working with adding the OOTB People web part to a modern page.

I was following the steps documented in the previous post and was able to tell the required web part JSON was as below

PersonWebPartProperties

As this web part supports configuring multiple people as you may expect it wants an array of users. This was slightly different from other web parts as in most cases its simple data types like strings, integers or booleans.

At first I tried creating an object and then passing a JSON string to this property but that didn’t work as its expecting an actual JSON array. When debugging through the code I noticed this was expecting a JToken object, see below

PersonPropertyType

After a little trial and error I eventually got this working by creating a generic list of JObject items and then creating a new dynamic JObject and set all required person details from the web part property data above. See full code example below

Code Sample

var loginName = userLogin.LoginName;

//Create list of people to add
List<JObject> persons = new List<JObject>();

//Create new person object
dynamic person = new JObject();
person.id = loginName;
person.upn = loginName.Substring(loginName.LastIndexOf(“|”) + 1);
person.role = “”;
person.department = “”;
person.phone = “”;
person.sip = “”;

//add person to list
persons.Add(person);

//Create token object required by web part from list above
var token = Newtonsoft.Json.Linq.JToken.FromObject(persons);
//set web part property
peopleWebPart.Properties[“persons”] = token;

//add the web part to the page
page.AddControl(peopleWebPart, secondColumn, 2);

 

I hope this helps if someone else is struggling with the same issue

Advertisements

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


%d bloggers like this: