Provision Custom List using SharePoint Framework



Published: 5th July 2017

Welcome to the continuation of the SharePoint Framework Development series, In an earlier article we saw how to set up the environment and the tool chains required to start the development using SharePoint Framework(SPFx). You may also read through the simple Hello World Web part using TypeScript and explore the project structure of SPFx. 

In this article we will see how to deploy a custom list to SharePoint Online using SPFx. The major files used for the demo can be downloaded from here.

Download the guide to setup SharePoint Framework.

Create the Web part project

We can create the directory, where we will be adding the solution, using the command given below.

md CustomList 

Let’s move to the newly created working directory, using the command.

cd CustomList

We will then create the client Web part project structure by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

This will display the prompt, which we must fill up, to proceed with the project creation.

●      What is your solution name? : Set it to ‘CustomList’.

On pressing enter, we will be asked to chose the working folder for the project.

●      Where do you want to place your files- Use current folder.

●      What framework would you like to start with- Select “No javaScript web framework” for the time being, as this is a sample Web part.

●      What is your Webpart name- We will specify it as ‘CustomList ‘and press Enter

●      What is your Webpart description- We will specify it as ‘Custom List Created using SharePoint Framework’

Yeoman has started working on the scaffolding of the project. It will install the required dependencies and scaffold the solution files for the ‘CustomList’ Web part, which will take some time to complete. Once completed, we will get a congratulations message.

Run Code . to create the scaffolding and open the project in Visual Studio Code

Edit the web part

Now let’s add the folder named ‘SharePoint’ to maintain the SharePoint files that will be deployed as a package.

Within the SharePoint folder lets add another sub folder named Assets.

We will be creating an xml file - elements.xml which will hold the information required to provision the list. Let’s create the first supporting xml file elements.xml.

Add the below list information to the elements.xml file which contains the list name and type. The feature Id ‘00bfea71-de22-43b2-a848-c05709900100’ refers to custom list. 

Thus we have created the solution structure and added the list information in the xml file which will be automatically provisioned when the solution is deployed. However we have to make sure that this elements.xml file is packaged as part of the solution.In the older SharePoint Server side solutions we would be using Features to implement this. Similarly we have a Feature Framework for SPFx as well. In order to do this we will be adding a feature definition in the package-solution.json file in the configuration folder.

After adding the feature definition in the package-solution.json, it will look like below:

Package and Deploy the Solution

Thus we are done with the addition of the list creation information. Now let’s create the deployment package by running gulp serve command from the Node.js command prompt. 

This will create the sppkg package in the solutions folder as shown below. 

Take a note of the sppkg file url by opening it in File Explorer. 

We will be uploading this package to the App Catalog in the next step. 

 

Head over to the App Catalog and upload the package.

After upload, it will ask if we trust the package. Click on Deploy to add the solution.

If we refresh the App Catalog page we can see the uploaded solution. 

Ensure that there are no errors for the uploaded package by checking the below columns. In case there are some errors, we won’t be able to add the solution to the site. 

Now if we head over to the site, we can see the newly uploaded solution in the site contents.

Click on it to add the solution to the site. 

This will add the solution to the site contents. At the same time, it will provision whatever site assets were deployed as part of it. In our case, it is a custom list with the name ‘Custom List’. We can see it from the Site contents as shown below. 

Summary

Thus we saw how to provision custom list using SharePoint Framework. In the next post we will see how to site columns and content types using SharePoint Framework and use them to create the custom list. 

 



Join 6,500 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here