Overview

SharePoint components, like web parts, normally interact with the SharePoint assets like lists, libraries, content types, etc. In full trust solutions, we deploy these SharePoint assets along with a web part in a single deployable package (.wsp).

Similarly, SharePoint Framework (SPFx) client-side web parts do interact with the underlying lists and libraries in SharePoint site. These SharePoint assets need to be provisioned along with the client-side solution package. SharePoint framework toolchain allows us to package and deploy SharePoint assets with client-side solution packages.

In this article, we will explore how we can package together the SharePoint assets needed for SPFx web parts.

SharePoint Assets

SharePoint assets is a generic term referring to the basic building blocks of SharePoint that constitutes fields, content types, list instances.
Fields (Site Columns)

A field is a metadata that describes the property or attribute of the object we want to represent. For example, an Employee can be represented with ID, Name, Department, etc. Each field has a specific type such as text, number, Boolean, etc.

Below is an example of a field representing a number.
  1. <Field ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}"
  2. Name="SPFxAmount"
  3. DisplayName="Amount"
  4. Type="Currency"
  5. Decimals="2"
  6. Min="0"
  7. Required="FALSE"
  8. Group="SPFx Columns" />
Content types

Content Type is a reusable collection of site columns. Below is an example of content type that uses site column.
  1. <ContentType ID="0x010042D0C1C200A14B6887742B6344675C8B"
  2. Name="Cost Center"
  3. Group="SPFx Content Types"
  4. Description="Content types from SPFx">
  5. <FieldRefs>
  6. <FieldRef ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}" />
  7. </FieldRefs>
  8. </ContentType>
List instance

List instance is pre-defined SharePoint list with a well-known identifier. We can add, update, and delete items from a list.
  1. <ListInstance
  2. FeatureId="00bfea71-de22-43b2-a848-c05709900100"
  3. Title="SPFx List"
  4. Description="SPFx List"
  5. TemplateType="100"
  6. Url="Lists/SPFxList">
  7. </ListInstance>
List instance with custom schema

We can create our own schema to define fields, content types, and views for list instance. Use CustomSchema attribute in ListInstance element to reference the custom schema.
  1. <ListInstance
  2. CustomSchema="schema.xml"
  3. FeatureId="00bfea71-de22-43b2-a848-c05709900100"
  4. Title="SPFx List"
  5. Description="SPFx List"
  6. TemplateType="100"
  7. Url="Lists/SPFxList">
  8. </ListInstance>
Create SPFx Solution

Open the command prompt. Create a directory for SPFx solution.
  1. md spfx-provisionspassets
Navigate to the above-created directory.
  1. cd spfx-provisionspassets
Run Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint
Yeoman generator will present you with the wizard by asking questions about the solution to be created.

SharePoint

Solution Name
Hit Enter to have the default name (spfx-provisionspassets, in this case) or type in any other name for your solution.
Selected choice - Hit enter
Target for component

Here, we can select the target environment where we are planning to deploy the client webpart, i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice - SharePoint Online only (latest)
Place of files

We may choose to use the same folder or create a subfolder for our solution.
Selected choice - the same folder
Deployment option

Selecting Y will allow the app to be deployed instantly to all sites and will be accessible everywhere.
Selected choice - N (install on each site explicitly)
Type of client-side component to create

We can choose to create client side webpart or an extension. Choose the WebPart option.
Selected choice - WebPart
Web part name

Hit Enter to select the default name or type in any other name.
Selected choice - ProvisionSPAssets
Web Part description

Hit Enter to select the default description or type in any other value.
Selected choice - Provision SharePoint Assets with SPFx
Framework to use

Select any JavaScript framework to develop the component. Available choices are (No JavaScript Framework, React, and Knockout)
Selected choice - No JavaScript Framework
Yeoman generator will perform scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running the below command.
  1. npm shrinkwrap
In the command prompt, type the below command to open the solution in code editor of your choice.
  1. code .
Add SharePoint Assets to Solution

Step 1

Create a folder hierarchy as sharepoint\assets.

SharePoint
Step 2

Add a file elements.xml under sharepoint\assets folder.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  4. <Field ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}"
  5. Name="SPFxAmount"
  6. DisplayName="Amount"
  7. Type="Currency"
  8. Decimals="2"
  9. Min="0"
  10. Required="FALSE"
  11. Group="SPFx Columns" />
  13. <Field ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}"
  14. Name="SPFxCostCenter"
  15. DisplayName="Cost Center"
  16. Type="Choice"
  17. Required="FALSE"
  18. Group="SPFx Columns">
  19. <CHOICES>
  20. <CHOICE>Administration</CHOICE>
  21. <CHOICE>Information</CHOICE>
  22. <CHOICE>Facilities</CHOICE>
  23. <CHOICE>Operations</CHOICE>
  24. <CHOICE>Sales</CHOICE>
  25. <CHOICE>Marketing</CHOICE>
  26. </CHOICES>
  27. </Field>
  29. <ContentType ID="0x010042D0C1C200A14B6887742B6344675C8B"
  30. Name="Cost Center"
  31. Group="SPFx Content Types"
  32. Description="Sample content types from web part solution">
  33. <FieldRefs>
  34. <FieldRef ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}" />
  35. <FieldRef ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}" />
  36. </FieldRefs>
  37. </ContentType>
  39. <ListInstance
  40. CustomSchema="schema.xml"
  41. FeatureId="00bfea71-de22-43b2-a848-c05709900100"
  42. Title="SPFx List"
  43. Description="SPFx List"
  44. TemplateType="100"
  45. Url="Lists/SPFxList">
  46. </ListInstance>
  48. </Elements>
We are provisioning 2 fields - content type and list instance, with custom schema. FeatureId in the ListInstance represents the ID of feature which contains list definition. The featureId mentioned in the XML represents the ID for custom list definition.
Custom Schema

Add schema.xml file as your custom schema.
  1. <List xmlns:ows="Microsoft SharePoint" Title="Basic List" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Basic List" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">
  2. <MetaData>
  3. <ContentTypes>
  4. <ContentTypeRef ID="0x010042D0C1C200A14B6887742B6344675C8B" />
  5. </ContentTypes>
  6. <Fields></Fields>
  7. <Views>
  8. <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="AllItems.aspx">
  9. <XslLink Default="TRUE">main.xsl</XslLink>
  10. <JSLink>clienttemplates.js</JSLink>
  11. <RowLimit Paged="TRUE">30</RowLimit>
  12. <Toolbar Type="Standard" />
  13. <ViewFields>
  14. <FieldRef Name="LinkTitle"></FieldRef>
  15. <FieldRef Name="SPFxAmount"></FieldRef>
  16. <FieldRef Name="SPFxCostCenter"></FieldRef>
  17. </ViewFields>
  18. <Query>
  19. <OrderBy>
  20. <FieldRef Name="ID" />
  21. </OrderBy>
  22. </Query>
  23. </View>
  24. </Views>
  25. <Forms>
  26. <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
  27. <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
  28. <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
  29. </Forms>
  30. </MetaData>
  31. </List>
Package Assets as part of Solution

We have created the assets and custom schema. We need to package these files as part of the solution.

Step 1

Open package-solution.json file under config folder.

Step 2

Include feature framework definition for solution package.

SharePoint
  1. {
  2. "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  3. "solution": {
  4. "name": "spfx-provisionspassets-client-side-solution",
  5. "id": "ea551656-9f74-4107-b049-e296e475932d",
  6. "version": "1.0.0.0",
  7. "includeClientSideAssets": true,
  8. "features": [{
  9. "title": "asset-deployment-webpart-client-side-solution",
  10. "description": "asset-deployment-webpart-client-side-solution",
  11. "id": "523fe887-ced5-4036-b564-8dad5c6c6e24", // Specify unique GUID
  12. "version": "1.0.0.0",
  13. "assets": {
  14. "elementManifests": [
  15. "elements.xml"
  16. ],
  17. "elementFiles":[
  18. "schema.xml"
  19. ]
  20. }
  21. }]
  22. },
  23. "paths": {
  24. "zippedPackage": "solution/spfx-provisionspassets.sppkg"
  25. }
  26. }
Always specify unique GUID for feature ID.
Deploy and Test
Step 1

Package your client-side solution by running the below command.
  1. gulp bundle
Step 2

Create a solution package by running the below command.
  1. gulp package-solution
This command will create package (.sppkg) inside sharepoint/solution folder.
Step 3

Deploy the package to the app catalog,

SharePoint
Step 4

Click Deploy.

Step 5

Open SharePoint site, click “Add an app”.

Step 6

Install the app.

SharePoint
Step 7

When installation finishes, refresh the page. The site should have “SPFx List” provisioned.

SharePoint
Step 8

Open “SPFx List”, it should have our content type with site columns inside it.

SharePoint
Summary

SharePoint assets can be provisioned using SPFx. We can define the needed structure to provision on the SharePoint site, which can be utilized by SPFx web parts.