M365 – SPFX – Getting JSON data – JSON serialized information of SPFX component to provision / add on modern client side page through CSOM

Hi All,

Greetings for the day 🙂 LIFE IS BEAUTIFUL 🙂 I hope we all are safe 🙂 STAY SAFE, STAY HEALTHY 🙂

Background / Details / Use Case:

• This article is actually continuation of my previous following three articles –
  • SharePoint Online – Resolving error – You can only promote home pages as site home page – error while calling ClientSidePage.PromoteAsHomePage() in CSOM
  • M365 – SharePoint Online – Resolving exception “NoComponentId” while creating new client side page in Site Pages Library using CSOM
  • M365 – SharePoint Online – Adding / Provisioning client side webpart on modern page using CSOM in .NET Core application

We have requirement – we need to provision some client side pages in our communication site when its created. So we have a job which doing the magic for us.

One of the requirement is we need to provision the OOB as well as our custom SPFX components to respective client side page.

So to provision / add SPFX components from client side,

• Load our ClientSidePage using ClientSidePage.Load()
• We need to instantiate the ClientSideWebPart class
• We need to set the PropertiesJson property of ClientSideWebPart class
• Finally add the component using ClientSidePage.AddControl()

Example : Consider we need to add/provision OOB QucikLinks webpart on our one of the client side page and we need to provision default link for “Google”.

Following are the detailed steps:

• Step 1 – Load our client side page

ClientSidePage clientSidePage =  ClientSidePage.Load(contentContext, pageTitle);

• Step 2 -Instantiate our OOB QuickLinks SPFX component

 //Quick Links wp
ClientSideWebPart qlWebPart = clientSidePage.InstantiateDefaultWebPart(DefaultClientSideWebParts.QuickLinks);

• Step 3 – Set the JSON properties – provision the default link – “Google” as

qlWebPart.PropertiesJson = "{\"controlType\":3,\"id\":\"ca330715-e5de-4c9d-9a17-112f345d17c4\",\"webPartId\":\"c70391ea-0b10-4ee9-b2b4-006d3fcad0cd\",\"webPartData\":{\"id\":\"c70391ea-0b10-4ee9-b2b4-006d3fcad0cd\",\"instanceId\":\"ca330715-e5de-4c9d-9a17-112f345d17c4\",\"title\":\"Quick links\",\"serverProcessedContent\":{\"searchablePlainTexts\":{\"items[0].title\":\"Google\"},\"links\":{\"items[0].sourceItem.url\":\"http://google.co.in\"}}]}";

• Step 4 – Add component on the page

clientSidePage.AddControl(qlWebPart, sectionFirst.Columns[1], 0);

Complete code:

ClientSidePage clientSidePage =  ClientSidePage.Load(contentContext, pageTitle);

//Quick Links wp
ClientSideWebPart qlWebPart = clientSidePage.InstantiateDefaultWebPart(DefaultClientSideWebParts.QuickLinks);

qlWebPart.PropertiesJson = "{\"controlType\":3,\"id\":\"ca330715-e5de-4c9d-9a17-112f345d17c4\",\"webPartId\":\"c70391ea-0b10-4ee9-b2b4-006d3fcad0cd\",\"webPartData\":{\"id\":\"c70391ea-0b10-4ee9-b2b4-006d3fcad0cd\",\"instanceId\":\"ca330715-e5de-4c9d-9a17-112f345d17c4\",\"title\":\"Quick links\",\"serverProcessedContent\":{\"searchablePlainTexts\":{\"items[0].title\":\"Google\"},\"links\":{\"items[0].sourceItem.url\":\"http://google.co.in\"}}]}";

clientSidePage.AddControl(qlWebPart, sectionFirst.Columns[1], 0);

This code perfectly works, when application/job executes, OOB Quick links SPFX component get added / provisioned successfully on given client side page.

But pain point is for Step 4 in above steps. To set the JSON string for PopertiesJson property of ClientSideWeb part class

In code if you hover mouse on PropertoesJson property we will get an idea how to get – JSON serialized web part info – JSON string

How to get the JSON value for PropertiesJson property:

• Open the workbench application page – so say – https://knowledgejunction1.sharepoint.com/_layouts/15/workbench.aspx as

• Add the OOB QuickLinks SPFX component on workbench.aspx page as

• Add the link – Google and click on “save” in left top corner as

Fig : M365 – SPFX – workbench.aspx application page – Adding OOB QuickLinks SPFX component – Adding link

• Once ready, there is a link called “Web part data” – which will open popup and will give us the JSON data which can be set to PropertiesJson property of ClientSideWebPart class as

There are some extra details as well in current JSON string like – SiteID, WebID, Current site URL – remove those properties or update to set dynamically. Otherwise component will break when we will execute the job for provisioning on other site or other tenant.

I’ll stop here now 🙂

Share In Teams:

Enjoy the beautiful life 🙂 Have a FUN 🙂 HAVE A SAFE LIFE 🙂 TAKE CARE 🙂