Provision SPFx Web Parts to Classic Sites – Part 4: Include SPFx Web Part inside of Web Template

Today we could finish this collection of blog posts how you could make provisioning of SPFx Web Parts to Classic SharePoint Sites inside of your WSP solution package:

  1. Include SPFx Assets & Package inside of WSP
  2. Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP
  3. Install SPFx Web Part to SharePoint Site/Web
  4. Include SPFx Web Part inside of Web Template (this blog post)

In previous posts we have already done SPFx Web Parts with custom gulp tasks for copying Assets & Package files automatically from SPFx Projects to Module Item of our WSP solution and deploying SPFx Web Parts to SharePoint Server 2016 App Catalog with WSP Feature. Then we continued with problems how to programmatically install SPFx Web Part to specific SharePoint Site or Web or Sub-Web (or any kind of Web 🙂 ) inside of some WSP Feature.
So today we will end with problem how to include SPFx Web Parts into SharePoint Web Template.

Firstly we have to create SharePoint Empty Element Project Item and add onet.xml file into it.

2018-05-09_0808

Then we have to set ElementFile deployment type for onet.xml file.

2018-05-09_0809

In Elements.xml file we have to define our Web Template:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <WebTemplate
   Name="CompanyWT"
   BaseTemplateName="STS"
   BaseTemplateID="1"
   BaseConfigurationID="0"
   Title="Company"
   Description="Company Web Template"
   DisplayCategory="Custom"/>
</Elements>

In onet.xml file we have to define xml structure with Site Collection and Web Features like example below:

<?xml version="1.0" encoding="utf-8" ?>
<Project Title="CompanyWT" Revision="2" ListDir="" xmlns:ows="Microsoft SharePoint" UIVersion="15">
  <NavBars>
  </NavBars>
  <Configurations>
    <Configuration ID="-1" Name="NewWeb"/>
    <Configuration ID="0" Name="BLANKINTERNET">
      <Lists/>
      <SiteFeatures>
        <!-- :: Site Collection Features :: -->

      </SiteFeatures>
      <WebFeatures>
        <!-- :: Web Features :: -->
      
        <!-- SPFxWebPartsFeature -->
        <Feature ID="1c74af4d-409f-4108-a099-5d1a22b9b192" />
      </WebFeatures>
      <Modules>
      </Modules>
    </Configuration>
  </Configurations>
  <Modules>
  </Modules>
</Project>

As you can see in red above we have to include SPFxWebPartFeature which was created in previous post.

So, when we will create new Site Collection, Web or Sub Web from our new Company Web Template we will get all SPFx Web Parts already deployed and installed inside of Site Collection / Web / Sub Web creation process.

We could include our Web Template definition files inside of some Farm or Web Application scope Feature.

Last but not least we could provision SPFx Web Parts automatically to default.aspx page of our new Site Collection, Web or Sub Web created from Company Web Template. For that reason we have to create new SharePoint Module with default.aspx file.

2018-05-09_2029

Then add this content into default.aspx file:

<%@ Page Inherits="Microsoft.SharePoint.Publishing.TemplateRedirectionPage,Microsoft.SharePoint.Publishing,Version=16.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<%@ Reference VirtualPath="~TemplatePageUrl" %>
<%@ Reference VirtualPath="~masterurl/custom.master" %>

Inside of Elements.xml file we could add SPFx Web Part into default.aspx page with AllUsersWebPart element. Because we have SPFx Web Part we have to use ClientSideWebPart type from Microsoft.SharePoint.WebPartPages namespace like example below:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="CompanyWeP" Url="$Resources:osrvcore,List_Pages_UrlName;">
    <File Path="CompanyWeP\default.aspx" Url="default.aspx" Type="GhostableInLibrary" Level="Published">
      <Property Name="Title" Value="Welcome to Company Page" />
      <Property Name="PublishingPageLayout" Value="~SiteCollection/_catalogs/masterpage/StranPodjetjaPL.aspx, Stran Podjetja" />
 
      <AllUsersWebPart ID="g_5bd86e77_9633_4503_9cd0_5f2f9f0a9837" WebPartZoneID="TopRowLeft" WebPartOrder="2">
        <![CDATA[
          <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 this SPFx Web Part.</importErrorMessage>
            </metaData>
            <data>
              <properties>
                <property name="Description" type="string">Team Members SPFx Web Part</property>
                <property name="HelpUrl" type="string" />
                <property name="Hidden" type="bool">False</property>
                <property name="MissingAssembly" type="string">Cannot Import WebPart</property>
                <property name="CatalogIconImageUrl" type="string" />
                <property name="Title" type="string">Team Members</property>
                <property name="AllowHide" type="bool">True</property>
                <property name="AllowMinimize" type="bool">True</property>
                <property name="ExportMode" type="string">All</property>
                <property name="AllowZoneChange" type="bool">True</property>
                <property name="TitleUrl" type="string" />
                <property name="ChromeType" type="chrometype">Default</property>
                <property name="AllowConnect" type="bool">True</property>
                <property name="Width" type="string" />
                <property name="Height" type="string" />
                <property name="HelpMode" type="string">Modeless</property>
                <property name="ClientSideWebPartId" type="System.Guid, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">633cbe61-210f-4c20-9d7c-267cf12ca3f3</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>
        ]]>
      </AllUsersWebPart>
    </File>
  </Module>
</Elements>

Please take care that you will use GUID from manifest.json file (example on image below) of your SPFx Web Part for ClientSideWebPartId property of AllUsersWebPart element above.

2018-05-09_2044

At the end we have to add this SharePoint Module into Web Scope Feature and include it into our Web Template onet.xml file (with red color below):

<?xml version="1.0" encoding="utf-8" ?>
<Project Title="CompanyWT" Revision="2" ListDir="" xmlns:ows="Microsoft SharePoint" UIVersion="15">
  <NavBars>
  </NavBars>
  <Configurations>
    <Configuration ID="-1" Name="NewWeb"/>
    <Configuration ID="0" Name="BLANKINTERNET">
      <Lists/>
      <SiteFeatures>
        <!-- :: Site Collection Features :: -->
 
      </SiteFeatures>
      <WebFeatures>
        <!-- :: Web Features :: -->
      
        <!-- CompanyWebFeature -->
        <Feature ID="f237e7a1-d835-466e-8675-f68a9e4776d3" />
        <!-- SPFxWebPartsFeature -->
        <Feature ID="1c74af4d-409f-4108-a099-5d1a22b9b192" />
      </WebFeatures>
      <Modules>
      </Modules>
    </Configuration>
  </Configurations>
  <Modules>
  </Modules>
</Project>

So thats all about Provision SPFx Web Parts to Classic Sites. Happy coding. 🙂

Previous step -> Install SPFx Web Part to SharePoint Site/Web inside Feature

Cheers!
Gašper Rupnik

{End.}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: