Configuring OOTB People web part using PnP Core Online library

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: