Forum Discussion
Solved
Deploy and set up SPFx webpart using PnP templates
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!
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>
5 Replies
- 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 confirmHello 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
- 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
