Forum Discussion
Deploy and set up SPFx webpart using PnP templates
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>
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
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
Hello Joel,
Perhaps, did you manage to find an example of the code? Highly appreciated.
Thank you.
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>