question

Nancy-0218 avatar image
0 Votes"
Nancy-0218 asked MichaelHan-MSFT answered

Using C# or Pnp.framework, how to create modern page and add SPFx webpart to modern page.

Hi

I have referred the following links, but these references uses OfficeDevPnp which doesn't work for me.

https://www.sharepointpals.com/post/how-to-add-custom-webparts-programmatically-in-modern-page-on-sharepoint-office-365-using-patterns-and-practice-officedevpnp/

https://asishpadhy.com/2018/09/19/deploy-and-add-spfx-webparts-to-modern-pages-using-officedevpnp-csom-library/

Please let me know the solution using C# or Pnp.framework if possible.

Thanks in advance

office-sharepoint-online
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

MichaelHan-MSFT avatar image
0 Votes"
MichaelHan-MSFT answered

Hi @Nancy-0218 ,

Currently, some functionalities are not complete in PnP.framwork. And we can not create modern page with PnP.framework now. Below is the ClientSidePage class in PnP.Framework, it's incomplete.

91548-image.png

So I would sugeest you use SharePointPnPCoreOnline to create modern pages.

And you can read this offical articles to create modern page and add custom SPFx webpart: https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/modern-experience-customizations-customize-pages

Below is the sample in the article:

 ClientSidePage p = new ClientSidePage(cc);
    
 // get a list of possible client side web parts that can be added
 var components = p.AvailableClientSideComponents();
    
 // Find our custom "HelloWord" web part
 var myWebPart = components.Where(s => s.ComponentType == 1 && s.Name == "HelloWorld").FirstOrDefault();
 if (myWebPart != null)
 {
     // Instantiate a client side web part from our found web part information
     ClientSideWebPart helloWp = new ClientSideWebPart(myWebPart) { Order = 10 };
     // Add the custom client side web part to the page
     p.AddControl(helloWp);
 }
    
 // Persist the page to SharePoint
 p.Save("PnPRocks.aspx")



If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (47.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.