How to Add Custom WebParts Programmatically in Modern page on SharePoint Office 365 using Patterns and Practice (OfficeDevPNP)

Sathish Nadarajan
Solution Architect
May 3, 2018
Rate this article
[Total: 1    Average: 5/5]

In the earlier article, we saw how to create the modern pages and add the Out of the Box WebParts programmatically. Now the real requirement would be, how to add our SPFX webparts on the modern pages. That would be the actual requirement from the customers right.

The simple steps are,

1. Get the Page

2. Get the available webparts for that page. Which is similar to the canvas ‘+’ symbol.

3. Identify the Webpart.

4. Add the webpart to appropriate section and column.

5. Save the page.

The piece of code is as follows.


 using (var ctx = authMgr.GetSharePointOnlineAuthenticatedContextTenant(siteUrl, userName, password))
 //Create a page or get the existing page
 var page2 = ctx.Web.AddClientSidePage("PageWithSections.aspx", true);
 // Add Section 
 page2.AddSection(CanvasSectionTemplate.ThreeColumn, 5);
 // get the available web parts - this collection will include OOTB and custom SPFx web parts..
 // Get all the available webparts
 var components = page2.AvailableClientSideComponents();
 // add the named web part..
 var webPartToAdd = components.Where(wp => wp.ComponentType == 1 && wp.Name == "MYWEBPARTNAME").FirstOrDefault();
 if (webPartToAdd != null)
 ClientSideWebPart clientWp = new ClientSideWebPart(webPartToAdd) { Order = 1 };
 //Add the WebPart to the page with appropriate section
 page2.AddControl(clientWp, page2.Sections[0].Columns[2]);
 // the save method creates the page if one doesn't exist with that name in this site..

Very simple and straight forward right.

Happy Coding,

Sathish Nadarajan.

Author Info

Sathish Nadarajan
Solution Architect
Rate this article
[Total: 1    Average: 5/5]
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 13+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business more

Leave a comment