M365 – SharePoint Online – Adding / Provisioning client side webpart on modern page using CSOM in .NET Core application

Hi All,

LIFE IS BEAUTIFUL 🙂 I hope we all are safe 🙂 STAY SAFE, STAY HEALTHY 🙂

Background / Use Case / Requirement:

• This article is actually continuation of my previous following two articles.
  • M365 – 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
• 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 page.
• Here I am sharing the code to provision the OOB / Custom SPFX component on client side page when its provisioned and hence this article 🙂

Step by Step details for adding OOB component / webpart:

• Understanding the DefaultClientSideWebParts and clientSidePage.InstantiateDefaultWebPart() for adding OOB components
  • DefaultClientSideWebParts enum available in OfficeDevPnP.Core.Pages class
  • This enum lists possible OOB components / webparts

• Understanding the clientSidePage.InstantiateDefaultWebPart()
  • This method create instance of OOB client side webpart as in below code

public OfficeDevPnP.Core.Pages.ClientSideWebPart 
InstantiateDefaultWebPart(DefaultClientSideWebParts webPart);

• Once we have instance of ClientSideWebpart, we are ready to provision on our client side page as in below code sample we will provision OOB people component

//We have to add OOB contacts / people component
ClientSideWebPart pplWebPart = clientSidePage.InstantiateDefaultWebPart                                  (DefaultClientSideWebParts.People);

//adding people component-1st in 2nd column of 1st section
clientSidePage.AddControl(pplWebPart, sectionFirst.Columns[1], 0);

Step by Step details for adding our custom component / webpart:

• Get our custom SPFX component / webpart which we need add on our client side page
• We can get our custom component from the available components using our component name – make sure SPFX package for our custom components installed either globally or at least for this site so that our custom component will be available through ClientSidePage.AvailableClientSideComponents() method
• Using following code – say here we need to our custom News component

#get all available components which we can add on client side page
var components = clientSidePage.AvailableClientSideComponents();

#region adding News wp 
  //Finding our custom component from available components
var newsWPToAdd = components.Where(wp =>wp.ComponentType == 1 && wp.Name  == "News").FirstOrDefault();

  if (newsWPToAdd != null)
  {
     List list = getSitePagesLibrary(siteUrl);
     // Creating instance of ClientSideWebPart 
     ClientSideWebPart clientWp=new ClientSideWebPart(newsWPToAdd){Order=1};
  
    // setting default properties of WP
   clientWp.PropertiesJson = "{\"description\":\"News\",\"sourcePath \":\"SpecificSite\",\"resultType\":\"newspages\"}";
  
   //Add the WebPart to the page with appropriate section
   homePage.AddControl(clientWp, sectionFirst.Columns[1], 1);
 }
#endregion

Complete Code with detailed comments :

private static bool ConfigureComponentsOnPage(string siteUrl, string pageTitle, ClientContext contentContext)
{
     bool flag = false;
     ClientSidePage clientSidePage = null;
     try
     {
//Loading client side page on which we need to add components
clientSidePage = ClientSidePage.Load(contentContext, pageTitle);
     }
     catch (Exception ex)
     {
        //ToDo: Exception handling
     }
//Get available components - includes our custom SPFX components
     var components = clientSidePage.AvailableClientSideComponents();    
//Add sections to home page    clientSidePage.AddSection(CanvasSectionTemplate.TwoColumnLeft, 0);
CanvasSection sectionFirst = clientSidePage.Sections[0];

    //Get all available components from the given page
    try
    {
         #region Adding wps

    //We have to add OOB contacts / people component
ClientSideWebPart pplWP = clientSidePage.InstantiateDefaultWebPart(DefaultClientSideWebParts.People)
clientSidePage.AddControl(pplWP, sectionFirst.Columns[1], 0);

//Adding OOB document lib webpart - which is not available in - 
//DefaultClientSideWebParts - so we need to find it in available 
//components-We are getting OOB document lib component based on id

var docLib = components.Where(wp => wp.Id == "f92bf067-bc19-489e-a556-7fe95f508720").FirstOrDefault();

//Creating instance of ClientSideWebPart from above docLib 
//component which we fetched                
ClientSideWebPart clientSideWebPart=new ClientSideWebPart(docLib{Order = 1 };

clientSideWebPart.PropertiesJson = "{\"controlType\":3,\"id\":\"7ab69e80-db16-40e8-8b1e-b6b163b86fe9\",\"webPartId\":\"f92bf067-bc19-489e-a556-7fe95f508720\",\"webPartData\":{\"id\":\"f92bf067-bc19-489e-a556-7fe95f508720\",\"instanceId\":\"7ab69e80-db16-40e8-8b1e-b6b163b86fe9\",\"title\":\"Document library\", \"serverProcessedContent\":{\"searchablePlainTexts\":{\"listTitle\":\"Project Documents\"}}},\"properties\":{\"isDocumentLibrary\":true,\"webRelativeListUrl\":\"/Project Documents\",\"selectedViewId\":\"5e589895-d9c7-402d-a141-e565c16691d1\",\"hideCommandBar\":true}}";

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

#endregion
clientSidePage.Save();
clientSidePage.Publish();
flag = true;
}
catch (Exception ex)
{
  //ToDo: Exception handling
}
return flag;
}

Thanks for reading 🙂 Feel free to discuss / comments / questions 🙂 SHARING IS CARING 🙂

Share In Teams:

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