Provision Custom Sharepoint List Using SharePoint Framework Development Model

Priyaranjan K S
7y
3.5k
0
1

Article

SharePoint Framework is the new development model in which lots of work has been going on in the past year. It went to General Availability on Feb 23, 2017. It is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps in SharePoint.

In a previous article, we saw how to set up the development environment for SharePoint Framework. We also saw the basic Hello World webpart creation and how to retrieve and display list items using SharePoint Framework. In this article, we will see how to Provision Custom SharePoint List using 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 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.

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

Package and Deploy the Solution

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.