SOLVED

PnP PowerShell - Adding SPFx web part to a 'classic' page

%3CLINGO-SUB%20id%3D%22lingo-sub-169570%22%20slang%3D%22en-US%22%3EPnP%20PowerShell%20-%20Adding%20SPFx%20web%20part%20to%20a%20'classic'%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-169570%22%20slang%3D%22en-US%22%3E%3CP%3EUsing%20PnP%20PowerShell%2C%20I'm%20able%20to%20add%20a%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CCODE%3E.dwp%3C%2FCODE%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eor%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CCODE%3E.webpart%3C%2FCODE%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Efile%20to%20my%20page%20using%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fpowershell%2Fmodule%2Fsharepoint-pnp%2Fadd-pnpwebparttowebpartpage%3Fview%3Dsharepoint-ps%22%20rel%3D%22noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3CCODE%3EAdd-PnPWebPartToWebPartPage%3C%2FCODE%3E%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3EI%20can%20also%20add%20an%20SPFx%20client%20side%20web%20part%20to%20a%20'modern'%20page%20using%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fpowershell%2Fmodule%2Fsharepoint-pnp%2Fadd-pnpclientsidewebpart%3Fview%3Dsharepoint-ps%22%20rel%3D%22noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3CCODE%3EAdd-PnPClientSideWebPart%3C%2FCODE%3E%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIs%20there%20a%20way%20then%20using%20PnP%20to%20add%20an%20SPFx%20client%20side%20web%20part%20to%20a%20'classic'%20page%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20found%20a%20hacky%20way%20by%20manually%20adding%20the%20client%20side%20web%20part%20to%20the%20'classic'%20page%2C%20exporting%20it%20to%20get%20the%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CCODE%3E.webpart%3C%2FCODE%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Efile%20and%20using%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CCODE%3EAdd-PnPWebPartToWebPartPage%3C%2FCODE%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eto%20add%20that%20file%20programmatically.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170599%22%20slang%3D%22en-US%22%3ERe%3A%20PnP%20PowerShell%20-%20Adding%20SPFx%20web%20part%20to%20a%20'classic'%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170599%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F126452%22%20target%3D%22_blank%22%3E%40Mark%20Andrada%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENo%20problem%2C%20other%20commands%20will%20help%20here.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EStart%20by%20adding%20the%20web%20part%20to%20a%20page.%3C%2FP%3E%0A%3CP%3ENext%2C%20execute%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fpowershell%2Fmodule%2Fsharepoint-pnp%2Fget-pnpwebpart%3Fview%3Dsharepoint-ps%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGet-PnPWebPart%3C%2FA%3E%20to%20get%20all%20the%20web%20parts%20on%20the%20page%20and%20identify%20the%20Id%20for%20the%20one%20you%20need%20to%20export%20as%20XML%3C%2FP%3E%0A%3CP%3EFinally%2C%20use%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fpowershell%2Fmodule%2Fsharepoint-pnp%2Fget-pnpwebpartxml%3Fview%3Dsharepoint-ps%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGet-PnPWebPartXml%3C%2FA%3E%20to%20get%20the%20XML%20for%20the%20web%20part%20(passing%20the%20correct%20Id)%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ELet%20me%20know%20if%20you%20find%20any%20problems%2C%20but%20it%20should%20be%20very%20easy%20to%20complete.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170563%22%20slang%3D%22en-US%22%3ERe%3A%20PnP%20PowerShell%20-%20Adding%20SPFx%20web%20part%20to%20a%20'classic'%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170563%22%20slang%3D%22en-US%22%3EI%20guess%20I'm%20a%20bit%20confused%20still.%20I%20have%20the%20client%20web%20part%20app%20added%20and%20installed%20on%20my%20site%20collection%20app%20catalog.%20How%20would%20I%20get%20the%20XML%20from%20here%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-170393%22%20slang%3D%22en-US%22%3ERe%3A%20PnP%20PowerShell%20-%20Adding%20SPFx%20web%20part%20to%20a%20'classic'%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-170393%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F126452%22%20target%3D%22_blank%22%3E%40Mark%20Andrada%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20can%20absolutely%20be%20done%20%3A)%3C%2Fimg%3E%3C%2FP%3E%0A%3CP%3EYou%20will%20need%20the%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fpowershell%2Fmodule%2Fsharepoint-pnp%2Fadd-pnpwebparttowebpartpage%3Fview%3Dsharepoint-ps%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EAdd-PnPWebPartToWebPartPage%3C%2FA%3E%20command%20as%20this%20is%20the%20one%20for%26nbsp%3Bclassic%20pages%26nbsp%3B%3C%2FP%3E%0A%3CP%3ECheck%20example%202%3A%20you%20will%20need%20to%20create%20a%20variable%20that%20contains%20your%20web%20part%20XML%20and%20then%20pass%20that%20variable%20to%20the%20command.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EJoel%3C%2FP%3E%0A%3CH1%20class%3D%22%22%20id%3D%22toc-hId-1818279771%22%20id%3D%22toc-hId-1928956283%22%3E%26nbsp%3B%3C%2FH1%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Using PnP PowerShell, I'm able to add a .dwp or .webpart file to my page using Add-PnPWebPartToWebPartPage.

I can also add an SPFx client side web part to a 'modern' page using Add-PnPClientSideWebPart.

 

Is there a way then using PnP to add an SPFx client side web part to a 'classic' page?

 

I found a hacky way by manually adding the client side web part to the 'classic' page, exporting it to get the .webpart file and using Add-PnPWebPartToWebPartPage to add that file programmatically.

3 Replies
Highlighted

Hi @Mark Andrada,

 

This can absolutely be done :)

You will need the Add-PnPWebPartToWebPartPage command as this is the one for classic pages 

Check example 2: you will need to create a variable that contains your web part XML and then pass that variable to the command.

 

Joel

 

Highlighted
I guess I'm a bit confused still. I have the client web part app added and installed on my site collection app catalog. How would I get the XML from here?
Highlighted
Best Response confirmed by Mark Andrada (New Contributor)
Solution

Hi @Mark Andrada,

 

No problem, other commands will help here.

 

Start by adding the web part to a page.

Next, execute Get-PnPWebPart to get all the web parts on the page and identify the Id for the one you need to export as XML

Finally, use Get-PnPWebPartXml to get the XML for the web part (passing the correct Id)

 

Let me know if you find any problems, but it should be very easy to complete.