SOLVED

Deploy and set up SPFx webpart using PnP templates

%3CLINGO-SUB%20id%3D%22lingo-sub-304109%22%20slang%3D%22en-US%22%3EDeploy%20and%20set%20up%20SPFx%20webpart%20using%20PnP%20templates%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-304109%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20everyone%2C%3C%2FP%3E%3CP%3EI%20have%20a%26nbsp%3Bsimple%20question.%20Is%20it%20possible%20to%20use%20PnP%20templates%20to%20place%20and%20configure%20SPFx%26nbsp%3Bon%20web%20part%20page%20in%20SharePoint%202016%20(also%20SP%20Online).%3C%2FP%3E%3CP%3EThanks%20a%20lot%20for%20any%20suggestions!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-309765%22%20slang%3D%22en-US%22%3ERe%3A%20Deploy%20and%20set%20up%20SPFx%20webpart%20using%20PnP%20templates%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-309765%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%2F256453%22%20target%3D%22_blank%22%3E%40David_Rehak%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBelow%20is%20a%20sample.%20I%20have%20wrapped%20the%20custom%20values%20with%20%22*****%22.%3C%2FP%3E%3CP%3EThe%26nbsp%3B%3CSPAN%3EClientSideWebPartData%20value%20was%20removed%20as%20it%20was%20a%20long%20and%20encoded%20string.%20You%20can%20get%20it%20by%20adding%20the%20web%20part%20to%20a%20page%20and%20extracting%20the%20web%20part%20XML%20using%20PnP%20PowerShell.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EHope%20this%20helps%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CPAGE%20url%3D%22%26quot%3B%7Bsite%7D%2FSitePages%2F*****My%22%20custom%3D%22%22%20page%3D%22%22%3E%3CBR%20%2F%3E%3CWEBPARTS%3E%3CBR%20%2F%3E%3CWEBPART%20title%3D%22%26quot%3B*****My%22%20custom%3D%22%22%20web%3D%22%22%20part%3D%22%22%3E%3CBR%20%2F%3E%3CCONTENTS%3E%3CBR%20%2F%3E%3CWEBPARTS%3E%3CBR%20%2F%3E%3CWEBPART%20xmlns%3D%22%26quot%3B%26lt%3BA%22%20href%3D%22http%3A%2F%2Fschemas.microsoft.com%2FWebPart%2Fv3%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CA%20href%3D%22http%3A%2F%2Fschemas.microsoft.com%2FWebPart%2Fv3%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttp%3A%2F%2Fschemas.microsoft.com%2FWebPart%2Fv3%3C%2FA%3E%22%26gt%3B%3CBR%20%2F%3E%26lt%3Bmetadata%26gt%3B%3CBR%20%2F%3E%3CTYPE%20name%3D%22%26quot%3BMicrosoft.SharePoint.WebPartPages.ClientSideWebPart%2C%22%20microsoft.sharepoint%3D%22%22%3E%3C%2FTYPE%3E%3CBR%20%2F%3E%3CIMPORTERRORMESSAGE%3ECannot%20Import%20WebPart%3C%2FIMPORTERRORMESSAGE%3E%3CBR%20%2F%3E%3C%2FWEBPART%3E%3CBR%20%2F%3E%3CDATA%3E%3CBR%20%2F%3E%3CPROPERTIES%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BAllowZoneChange%26quot%3B%22%20type%3D%22%26quot%3Bbool%26quot%3B%22%3ETrue%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BHelpUrl%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BHidden%26quot%3B%22%20type%3D%22%26quot%3Bbool%26quot%3B%22%3EFalse%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BMissingAssembly%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3ECannot%20Import%20WebPart%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BDescription%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E*****My%20custom%20web%20part%20description*****%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BAllowHide%26quot%3B%22%20type%3D%22%26quot%3Bbool%26quot%3B%22%3ETrue%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BAllowMinimize%26quot%3B%22%20type%3D%22%26quot%3Bbool%26quot%3B%22%3ETrue%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BExportMode%26quot%3B%22%20type%3D%22%26quot%3Bexportmode%26quot%3B%22%3EAll%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BTitle%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E*****My%20Custom%20Web%20Part*****%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BTitleUrl%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BClientSideWebPartData%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E*****Long%20string%20with%20encoded%20web%20part%20data%20here*****%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BChromeType%26quot%3B%22%20type%3D%22%26quot%3Bchrometype%26quot%3B%22%3ENone%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BAllowConnect%26quot%3B%22%20type%3D%22%26quot%3Bbool%26quot%3B%22%3ETrue%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BWidth%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BHeight%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BCatalogIconImageUrl%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BHelpMode%26quot%3B%22%20type%3D%22%26quot%3Bhelpmode%26quot%3B%22%3EModeless%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BClientSideWebPartId%26quot%3B%22%20type%3D%22%26quot%3BSystem.Guid%2C%22%20mscorlib%3D%22%22%3E*****XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX*****%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BAllowEdit%26quot%3B%22%20type%3D%22%26quot%3Bbool%26quot%3B%22%3ETrue%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BTitleIconImageUrl%26quot%3B%22%20type%3D%22%26quot%3Bstring%26quot%3B%22%3E%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BDirection%26quot%3B%22%20type%3D%22%26quot%3Bdirection%26quot%3B%22%3ENotSet%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BAllowClose%26quot%3B%22%20type%3D%22%26quot%3Bbool%26quot%3B%22%3ETrue%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3CPROPERTY%20name%3D%22%26quot%3BChromeState%26quot%3B%22%20type%3D%22%26quot%3Bchromestate%26quot%3B%22%3ENormal%3C%2FPROPERTY%3E%3CBR%20%2F%3E%3C%2FPROPERTIES%3E%3CBR%20%2F%3E%3C%2FDATA%3E%3CBR%20%2F%3E%3C%2FWEBPARTS%3E%3CBR%20%2F%3E%3C%2FCONTENTS%3E%3CBR%20%2F%3E%3C%2FWEBPART%3E%3CBR%20%2F%3E%3C%2FWEBPARTS%3E%3CBR%20%2F%3E%3C%2FPAGE%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CP%3E%3C%2FP%3E%3CLINGO-SUB%20id%3D%22lingo-sub-309587%22%20slang%3D%22en-US%22%3ERe%3A%20Deploy%20and%20set%20up%20SPFx%20webpart%20using%20PnP%20templates%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-309587%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20Joel%2C%3C%2FP%3E%3CP%3EPerhaps%2C%20did%20you%20manage%20to%20find%20an%20example%20of%20the%20code%3F%20Highly%20appreciated.%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-304615%22%20slang%3D%22en-US%22%3ERe%3A%20Deploy%20and%20set%20up%20SPFx%20webpart%20using%20PnP%20templates%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-304615%22%20slang%3D%22en-US%22%3EI'm%20off%20work%20and%20without%20access%20to%20my%20laptop%20at%20the%20moment%2C%20but%20I%20can%20try%20to%20provide%20an%20example%20later%20or%20maybe%20tomorrow.%3CBR%20%2F%3EHaving%20said%20that%2C%20you%20will%20be%20able%20to%20get%20the%20code%20you%20need%20by%20adding%20the%20webpart%20to%20a%20site%20homepage%2C%20ensure%20that%20the%20web%20part%20is%20configured%20as%20per%20your%20need%20and%20then%20extracting%20the%20template%20from%20the%20site.%20The%20template%20contains%20the%20homepage%20by%20default%2C%20which%20should%20contain%20your%20web%20part.%3CBR%20%2F%3EI%20often%20follow%20this%20approach%20myself%20as%20it's%20very%20easy%20and%20quite%20reliable.%3CBR%20%2F%3EAs%20a%20heads%20up%2C%20your%20web%20part%20configuration%20will%20be%20a%20JSON%20string%20encoded%20within%20the%20XML.%3CBR%20%2F%3E%3CBR%20%2F%3EHope%20this%20helps%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-304595%22%20slang%3D%22en-US%22%3ERe%3A%20Deploy%20and%20set%20up%20SPFx%20webpart%20using%20PnP%20templates%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-304595%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20Joel%2C%3C%2FP%3E%3CP%3EThank%20you%20for%20the%20answer.%3C%2FP%3E%3CP%3EWould%20you%20mind%20to%20share%20the%20example%20of%20provisioning%20file%20(how%20to%20do%20set%20up).%3C%2FP%3E%3CP%3EI%20could%20then%20try%20it%20in%20the%20on-premise%20environment.%3C%2FP%3E%3CP%3EThank%20you%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-304236%22%20slang%3D%22en-US%22%3ERe%3A%20Deploy%20and%20set%20up%20SPFx%20webpart%20using%20PnP%20templates%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-304236%22%20slang%3D%22en-US%22%3EHi%20David%3CBR%20%2F%3E%3CBR%20%2F%3EIf%20you%20are%20referring%20to%20PnP%20provisioning%20templates%2C%20then%20the%20answer%20is%20Yes%20for%20SharePoint%20online%2C%20but%20never%20done%20it%20for%202016%2C%20so%20not%20sure.%3CBR%20%2F%3EHopefully%20someone%20else%20will%20be%20able%20to%20confirm%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Hello everyone,

I have a simple question. Is it possible to use PnP templates to place and configure SPFx on web part page in SharePoint 2016 (also SP Online).

Thanks a lot for any suggestions!

5 Replies
Highlighted
Hi David

If you are referring to PnP provisioning templates, then the answer is Yes for SharePoint online, but never done it for 2016, so not sure.
Hopefully someone else will be able to confirm
Highlighted

Hello Joel,

Thank you for the answer.

Would you mind to share the example of provisioning file (how to do set up).

I could then try it in the on-premise environment.

Thank you

Highlighted
I'm off work and without access to my laptop at the moment, but I can try to provide an example later or maybe tomorrow.
Having said that, you will be able to get the code you need by adding the webpart to a site homepage, ensure that the web part is configured as per your need and then extracting the template from the site. The template contains the homepage by default, which should contain your web part.
I often follow this approach myself as it's very easy and quite reliable.
As a heads up, your web part configuration will be a JSON string encoded within the XML.

Hope this helps

Highlighted

Hello Joel,

Perhaps, did you manage to find an example of the code? Highly appreciated. 

Thank you.

Highlighted
Solution

Hi @David_Rehak

 

Below is a sample. I have wrapped the custom values with "*****".

The ClientSideWebPartData value was removed as it was a long and encoded string. You can get it by adding the web part to a page and extracting the web part XML using PnP PowerShell.

Hope this helps

 

 

<pnp:Page Url="{site}/SitePages/*****My Custom Page*****.aspx" Overwrite="true" Layout="Custom">
<pnp:WebParts>
<pnp:WebPart Title="*****My Custom Web Part*****" Row="1" Column="1">
<pnp:Contents>
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<type name="Microsoft.SharePoint.WebPartPages.ClientSideWebPart, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
<importErrorMessage>Cannot Import WebPart</importErrorMessage>
</metaData>
<data>
<properties>
<property name="AllowZoneChange" type="bool">True</property>
<property name="HelpUrl" type="string" />
<property name="Hidden" type="bool">False</property>
<property name="MissingAssembly" type="string">Cannot Import WebPart</property>
<property name="Description" type="string">*****My custom web part description*****</property>
<property name="AllowHide" type="bool">True</property>
<property name="AllowMinimize" type="bool">True</property>
<property name="ExportMode" type="exportmode">All</property>
<property name="Title" type="string">*****My Custom Web Part*****</property>
<property name="TitleUrl" type="string" />
<property name="ClientSideWebPartData" type="string">*****Long string with encoded web part data here*****</property>
<property name="ChromeType" type="chrometype">None</property>
<property name="AllowConnect" type="bool">True</property>
<property name="Width" type="string" />
<property name="Height" type="string" />
<property name="CatalogIconImageUrl" type="string" />
<property name="HelpMode" type="helpmode">Modeless</property>
<property name="ClientSideWebPartId" type="System.Guid, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">*****XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX*****</property>
<property name="AllowEdit" type="bool">True</property>
<property name="TitleIconImageUrl" type="string" />
<property name="Direction" type="direction">NotSet</property>
<property name="AllowClose" type="bool">True</property>
<property name="ChromeState" type="chromestate">Normal</property>
</properties>
</data>
</webPart>
</webParts>
</pnp:Contents>
</pnp:WebPart>
</pnp:WebParts>
</pnp:Page>