Create Site Column, Content Type and Custom List in SharePoint Online using SPFx.

SharePoint Framework is the new development 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 this article, we will see how to create SharePoint List with custom Site Columns and Content Type using SharePoint Framework.

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

Open Node.js Command Prompt. By default, CMD set default user location C:\Users\ _PCName_

spfx List Step1

Create a new project directory by md command.

md CreateSPList

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

cd CreateSPList
spfx List CreateSPList

Step 3 :
Now run Yeoman SharePoint Generator to create a new client Web part.

yo @microsoft/sharepoint

Now prompted ask set of configuration about web part.

A) Now prompted:

  • Accept the default create-sp-list as your solution name, and then select Enter.
  • Select SharePoint Online only (latest), and select Enter.
  • Select Use the current folder for where to place the files.
  • Select N to allow the solution to be deployed to all sites immediately.
  • Select N on the question if solution contains unique permissions.
  • Select WebPart as the client-side component type to be created.

B) The next set of prompts ask for specific information about your web part:

  • Accept the default HelloWorld as your web part name, and then select Enter.
  • Accept the default HelloWorld description as your web part description, and then select Enter.
  • Accept the default No javascript framework as the framework you would like to use, and then select Enter.

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

spfx List Success
  • To use Visual Studio Code to explore the web part project structure.

Enter the following command to open the web part project in Visual Studio Code

Code .


  • Open Visual Code Editor. From the menu bar, select Files => Open Folder option to open CreateSPList’.
  • Now Visual Code dashboard show CreateSPList’ project structure see screenshot below
  • Now, let’s add the folder named ‘Sharepoint’ to maintain the SharePoint files that will be deployed as a package.
  • Within the SharePoint folder, let’s add another sub folder named Assets.

We will be creating two xml files – elements.xml and schema.xml. These will hold the information required to create the site columns, content type and then use them to create the list. Let’s create the first supporting xml file elements.xml.

Elements.xml file will contain the list information that will be used to create the list. At first, we will be defining the site columns using the ‘Field’ tag and then the content type that will be deployed to the site. We will also be defining the default data that will be provisioned along with the list. 

Add the Default data to SharePoint List

We will be adding the default data within the Rows tag, as shown below.


The complete elements.xml that are used within the project is given below.

<?xml version="1.0" encoding="utf-8"?> 
<Elements xmlns=" Jump "> 
    <Field ID="{1881DCE1-0A3A-4CF1-B4AE-DFDCEADE9273}" Name="EmployeeName" DisplayName="Employee Name" Type="Text" Required="FALSE" Group="Employee" /> 
    <Field ID="{DC0D3BEA-3012-4BB2-BCE1-FED92724FBA9}" Name="PreviousCompany" DisplayName="Previous Company" Type="Text" Required="FALSE" Group="Employee" /> 
    <Field ID="{AAD71F84-6C7D-4F60-AAF9-13BECAB4F6A4}" Name="JoiningDate" DisplayName="JoiningDate" Type="DateTime" Format="DateOnly" Required="FALSE" Group="Employee" /> 
    <Field ID="{2B174F43-1885-48BF-B56D-C6F63FFBB56B}" Name="Expertise" DisplayName="Expertise" Type="Choice" Required="FALSE" Group="Employee"> 
            <CHOICE>Web Designer</CHOICE> 
    <Field ID="{037B69DB-001F-4FA0-BF26-70827F98DEF9}" Name="Experience" DisplayName="Experience" Group="Employee" Type="Number" Required="False" Min="0" Max="30" Percentage="FALSE"> </Field> 
    <ContentType ID="0x010029DD9E774C03404CAFA262D716A029D4" Name="EmployeeContentType" Group="Employee Content Types" Description="This is the Content Type for Employee Onboarding"> 
            <FieldRef ID="{1881DCE1-0A3A-4CF1-B4AE-DFDCEADE9273}" /> 
            <FieldRef ID="{DC0D3BEA-3012-4BB2-BCE1-FED92724FBA9}" /> 
            <FieldRef ID="{AAD71F84-6C7D-4F60-AAF9-13BECAB4F6A4}" /> 
            <FieldRef ID="{2B174F43-1885-48BF-B56D-C6F63FFBB56B}" /> 
            <FieldRef ID="{037B69DB-001F-4FA0-BF26-70827F98DEF9}" /> </FieldRefs> 
    <ListInstance CustomSchema="schema.xml" FeatureId="00bfea71-de22-43b2-a848-c05709900100" Title="Employee" Description="Employee List created using SharePoint Framework" TemplateType="100" Url="Lists/Employee"> 
<Field Name="EmployeeName">Adnan Shawkat</Field> 
<Field Name="PreviousCompany">Microsoft</Field> 
<Field Name="JoiningDate">10/08/2015</Field> 
<Field Name="Expertise">SharePoint</Field> 
<Field Name="Experience">7</Field> 
<Field Name="EmployeeName">Kevin C</Field> 
<Field Name="PreviousCompany">IBM</Field> 
<Field Name="JoiningDate">11/04/2016</Field> 
<Field Name="Expertise">Java</Field> 
<Field Name="Experience">4</Field> 
<Field Name="EmployeeName">Christopher</Field> 
<Field Name="PreviousCompany">Oracle</Field> 
<Field Name="JoiningDate">12/03/2014</Field> 
<Field Name="Expertise">.NET</Field> 
<Field Name="Experience">11</Field> 
</Data> </ListInstance> 

Note: List of feature ID will change depend on list template type.


Finally, we will be creating the schema.xml file which contains the list xml. Here, we will be adding the Content Type that we have declared in the elements.xml.

The complete schema.xml will look like below.

<List xmlns:ows="Microsoft SharePoint" Title="Basic List" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Basic List" BaseType="0" xmlns=" Jump "> 
            <ContentTypeRef ID="0x010029DD9E774C03404CAFA262D716A029D4" />
            <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"> 
                <XslLink Default="TRUE">main.xsl</XslLink> 
                <RowLimit Paged="TRUE">30</RowLimit> 
                <Toolbar Type="Standard" /> 
                    <FieldRef Name="LinkTitle"></FieldRef> 
                    <FieldRef Name="EmployeeName"></FieldRef> 
                    <FieldRef Name="PreviousCompany"></FieldRef> 
                    <FieldRef Name="JoiningDate"></FieldRef> 
                    <FieldRef Name="Expertise"></FieldRef> 
                    <FieldRef Name="Experience"></FieldRef> 
                        <FieldRef Name="ID" /> </OrderBy> 
            <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" /> 
            <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" /> 
            <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" /> </Forms> 

Before we can deploy the package, we have to update the feature in the package-solution.json file.

Update Package-Solution.json

Initially, the file contents will contain only the solution name. We must add the feature node as well to this file.

list Package-Solution

Add the below content after the version tag. Here, the id is a Visual Studio created GUID that identifies a unique feature.

list GUID

The contents of the package-solution.json will look like below.

    "solution": { 
        "name": "create-sp-list-client-side-solution", 
        "id": "f26589ce-0cd0-49c4-9ca3-f4a559851a0d", 
        "version": "", 
        "features": [{ 
            "title": "create-sp-list-client-side-solution", 
            "description": "create-sp-list-client-side-solution", 
            "id": "7BC1C758-F2A2-4775-B26E-DC60F8620E9A", 
            "version": "", 
            "assets": { 
                "elementManifests": ["elements.xml"], 
                "elementFiles": ["schema.xml"] 
    "paths": { 
        "zippedPackage": "solution/ create-sp-list.sppkg" 

Now, let’s package the solution using gulp bundle.

Package and deploy the Solution

Now, we must package and bundle the solution.

gulp bundle --ship

Thus, we are done with the packaging of the solution.

list packaging

If we head over to the solutions folder, we can see the ‘create-sp-list package’ which we will be uploading to SharePoint

Make a note of the solution URL in the local computer as we will need it to upload to SharePoint.

Deploy SPPKG file in SharePoint Online.

Let’s head over to the SharePoint App Catalog site to where we will be uploading the solution.

Click on Upload to add the solution file to the site.

Click on OK to complete the upload.

list complete

It will ask to trust and Deploy the solution to SharePoint.

list Deploy-the-solution

We can see the uploaded solution in the App Catalog.

Now let’s head over to the site contents and add the solution to the site.

On searching for the deployed app, it will list out the recently added solutions.

list deployed

Click on it to add the solution to the site.

After a few seconds, we can see the newly created custom site.

list seconds

Going inside it we can see the default data that we had added to the list.


Thus, we saw how to create SharePoint List with custom Site Columns and Content Type using SharePoint Framework. We will see more of SharePoint Framework in action in the coming articles.

Create Site Column, Content Type and Custom List in SharePoint Online using SPFx.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top