Provisioning SharePoint Lists Using SPFx Solution

Introduction

SharePoint Framework in the recent release provides us with the capability of provisioning SharePoint assets, using configuration files of SharePoint Framework code.

To create SharePoint list, there is a way to add by using list definition files in Visual studio SharePoint project. Likewise, we can add the list definition XML in the elements file and provision the lists, using SharePoint framework project.

In this sample, let us try to create a simple SharePoint list, using SPFx project.

Prerequisite

To setup the development environment, please follow the steps provided by the Microsoft team.

In my previous articles, you have seen about SPFx introduction, prerequisites, steps for setting up the environment and developing and testing the Web parts, using the local environments.

Steps involved

Create a SharePoint Framework project by running the command yo @microsoft/sharepoint.

The list will be created, using definition file (elements.xml). Now, to add the elements.xml file to the project, create Sharepoint/assets folders to the root project folder and add the element.xml file. The snapshot given below shows the folder and the created files.

Add the list instance definition in the elements.xml file. XML given below shows the definition to create a custom list called TestSPFxList. The feature ID for custom list template is 00bfea71-de22-43b2-a848-c05709900100. Likewise, to get the feature Id of the other templates, please refer the technet blog here.

Copy the piece of XML content given below and paste it in definition file (elements.xml).

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<ListInstance
FeatureId="00bfea71-de22-43b2-a848-c05709900100"
Title="TestSPFxList"
Description="New SP List"
TemplateType="100"
Url="Lists/TestSPFxList">
</ListInstance>
</Elements>

To make the list to be available under the feature, the elements file should be mapped to the features, using the package-solution.json file.

Navigate to package-solution.json file under config folder of the project.
Add the feature title, description, feature Id, version and the assets. The assets included the files to be included in the feature. Note that the feature id is a GUID generated, using Visual Studio generate GUID tool.

The snippet given below shows the solution JSON along with the feature details and package path.

{
"solution": {
"name": "spassetsprovisioing-client-side-solution",
"id": "727f23bb-9532-45ee-bb1d-2e48d8757509",
"version": "1.0.0.1",
"features": [{
"title": "assetsprovisioning-solution",
"description": "assetsprovisioning-solution",
"id": "479e94c9-c6f2-4393-bdf1-54545d8b8a2d",
"version": "1.0.0.1",
"assets": {
"elementManifests": [
"elements.xml"
]
}
}]
},
"paths": {
"zippedPackage": "solution/spassetsprovisioing.sppkg"
}
}

Deploy/ Run

The package should be deployed to SharePoint site (Office 365 site). Bundle and package the solution before uploading it to the site.

Mention the CDN path, where the bundle files will be uploaded. The path can be updated in write-manifests.json file. Bundle the solution, using gulp bundle --ship command. Package the solution, using gulp package-solution --ship command.
Navigate to the bundle files folder (rootfolder/temp/deploy), copy all the files and upload it to CDN path.
Navigate to the package folder (rootfolder/solution) and upload the package file (packagename.sppkg) to the apps catalog of the site. Deploy the package, once it prompts.
Navigate to SharePoint site contents page and add the respective app. Once it is added, you can locate the list added, using the solution package.
You can also find the feature in the Web features page (http://siteurl/_layouts/15/ManageFeatures.aspx), where you can activate or deactivate the feature whenever required.

The article givenn below shows the detailed steps for bundling, packaging and deploying.

Developing Web Parts Using SharePoint Framework - Part Three

The snapshot given below shows the app added and the list provisionined on the site.

Summary

Thus, you have learned adding/provisioning SharePoint list, using SharePoint Framework Web part solution.

What Next

In my next articles, you will see how to add other SharePoint assets to the site, using SPFx solution.