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

M365 - SharePoint Online - adding OOB default client side web part - DefaultClientSideWebParts
M365 - SharePoint Online - adding OOB default client side web part - DefaultClientSideWebParts

Hi All,

LIFE IS BEAUTIFUL ๐Ÿ™‚ I hope we all are safe ๐Ÿ™‚ STAY SAFE, STAY HEALTHY ๐Ÿ™‚

Background / Use Case / Requirement:

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
M365 - SharePoint Online - adding OOB default client side web part - DefaultClientSideWebParts
Fig: M365 – SharePoint Online – adding OOB default client side web part – DefaultClientSideWebParts
  • 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);

Complete Code with detailed comments :

private static bool ConfigureComponentsOnPage(string siteUrl, string pageTitle, ClientContext contentContext)
     bool flag = false;
     ClientSidePage clientSidePage = null;
//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
         #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);

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 ๐Ÿ™‚

Prasham Sabadra

LIFE IS VERY BEAUTIFUL :) ENJOY THE WHOLE JOURNEY :) Founder of Knowledge Junction and live-beautiful-life.com, Author, Learner, Passionate Techie, avid reader. Certified Professional Workshop Facilitator / Public Speaker. Scrum Foundation Professional certificated. Motivational, Behavioral , Technical speaker. Speaks in various events including SharePoint Saturdays, Boot camps, Collages / Schools, local chapter. Can reach me for Microsoft 365, Azure, DevOps, SharePoint, Teams, Power Platform, JavaScript.

You may also like...

1 Response

  1. February 15, 2021

    […] M365 โ€“ SharePoint Online โ€“ Adding / Provisioning client side webpart on modern page using CSOM i… […]

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: