How to Create Site Columns, Content Type and Custom List using SharePoint Framework

Welcome to our new article on “How to Create Site Columns, Content-Type and Custom List using SharePoint Framework”. In this article, we will see about Create Site Columns, Content-Type and Custom List using SharePoint Framework.

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 assets is a generic term referring to the basic building blocks of SharePoint that constitute fields, content types, list instances.

Create SPFx CustomList using SharePoint framework.

Create SPFx Solution:

Step 1: Now we will create the directory, where we will be adding the solution, using below command

• Open the command prompt. Create a directory for the SPFx solution.
  • md SPFxCustomList
• Navigate to the directory created above
  • cd SPFxCustomList

Step 2: Run Yeoman SharePoint Generator to create the solution.

• yo @microsoft/sharepoint

Yeoman generator will present you with the wizard by asking questions about the solution to be created.

• Solution Name: Hit Enter to have a default name (PropertyPane in this case) or type in any other name for your solution.
• Target for component: Here, we can select the target environment where we are planning to deploy the client web-part; i.e., Selected choice – SharePoint Online only (latest)
• Place of files: Selected choice – use the current 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)
• Require Permissions: will the component in the solution require permission to access? Selected choice -N.
• Type of client-side component to create: Choose the web-part option. Selected option – Web-part.
• Web part name: Hit enter to select the default name or type in any other name. Type name – SPFxCustomList
• Web part description: Hit enter to select the default description or type in any other value.
• Framework to use: Select option – No JavaScript Framework.

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

Step 3: Run the “Code .” in the command prompt, to open the project in Visual Studio Code.

Step 4: Follow the below steps to add the folders inside your web-part project “SPFxCustomList”.

• Now let’s add the folder named ‘sharepoint’ to maintain the SharePoint files that will be deployed as a package.
• Next, let’s add another subfolder named “assets” Within the SharePoint folder.
• Next create two XML files – “elements.xml” and schema.xml which will hold the information required to provision the site columns, content type and then use them to create the list.

Step 5: “elements.xml” file will contain the list of information that will be used to provision the list. Here we defining the site columns using the ‘Field’ tag. Now we are creating the below Site Columns in this demo :

• ProductName – field type is “Text”
• ProductDescription – field type is “Note”(“Note” means Multiple lines of text)
• ProductCategory – field type is “Choice”
• Quantity – field type is “Number”
• TotalAmount – field type is “Currency”
• DeliveredDate – field type is “DateTime”

For creating the GUID of the site columns using Online GUID creator Tools or Visual Studio GUID Generator.

In vs code, go to Extensions-> type “insert guid” in the search box then you will get so many extensions and install “Insert GUID” extension to vs code.

For creating new GUID, go to the Command Pallet. Access all available commands based on your current context.

short cut key – “cntrl+shipt+p”. Click on “insert GUID” and then select GUID which you want add to your code.

Copy and paste the below code in “elements.xml” file.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Field ID="{0f4511ac-abe2-440a-b248-9f27a31674a6}"
            Name="ProductName"
            DisplayName="Product Name"
            Type="Text"
            Required="FALSE"
            Group="ProductDetails Columns" />
<Field ID="{ad708af2-0d23-43e8-aced-9f6b90dab513}"
            Name="ProductDescription"
            DisplayName="Product Description"
            Type="Note"
            Required="FALSE"
            NumLines="6"           
            RichText="FALSE"
            Group="ProductDetails Columns" />
<Field ID="{82b176f3-17d6-48c3-ac4d-1ef8fbeac946}"
         Name="ProductCategory"
         DisplayName="Product Category"
         Type="Choice"
         Required="FALSE"
         Group="ProductDetails Columns">
    <CHOICES>
      <CHOICE>Mobile</CHOICE>
      <CHOICE>Laptop</CHOICE>
    </CHOICES>
</Field>
<Field ID="{cd49904c-a453-4ae1-b97c-a41348c8e8ff}"
  Name="Quantity"
  DisplayName="Quantity"
  Type="Number"
  Required="False"   
  Min="1"
  Max="100"
  Percentage="FALSE"  
  Group="ProductDetails Columns" />  
<Field ID="{065e12e4-22a5-4708-89ec-3b5017f5a9a9}"
             Name="TotalAmount"
             DisplayName="Total Amount"
             Type="Currency"
             Decimals="2"
             Min="0"
             Required="FALSE"
             Group="ProductDetails Columns" />
<Field ID="{a5d1c18b-adc5-449f-8e07-20dc0d4d5dfa}"
            Name="DeliveredDate"
            DisplayName="DeliveredDate"
            Type="DateTime"
            Format="DateOnly"
            Required="FALSE"
            Group="ProductDetails Columns" />
<ContentType ID="0x01003149ea7d45674d83a284c27d30a9a9b3" 
            Name="ProductDetailsContentType" 
            Group="ProductDetails Content Type" 
            Description="This is the Content Type for Product Details">
        <FieldRefs>
            <FieldRef ID="{0f4511ac-abe2-440a-b248-9f27a31674a6}" /> 
            <FieldRef ID="{ad708af2-0d23-43e8-aced-9f6b90dab513}" />
            <FieldRef ID="{cd49904c-a453-4ae1-b97c-a41348c8e8ff}" /> 
            <FieldRef ID="{82b176f3-17d6-48c3-ac4d-1ef8fbeac946}" />
            <FieldRef ID="{065e12e4-22a5-4708-89ec-3b5017f5a9a9}" />
            <FieldRef ID="{a5d1c18b-adc5-449f-8e07-20dc0d4d5dfa}" />
        </FieldRefs>
</ContentType> 
    <ListInstance 
            CustomSchema="schema.xml"
            FeatureId="00bfea71-de22-43b2-a848-c05709900100"
            Title="ProductDetails" 
            Description="Product Details List created using SharePoint Framework"
            TemplateType="100"
            Url="Lists/ProductDetails">
     </ListInstance>
</Elements>

Step 6: Adding the content type that we had declared in the “elements.xml” into the “schema.xml” file as shown below.

<ContentTypes>
      <ContentTypeRef ID="0x01003149ea7d45674d83a284c27d30a9a9b3" />
    </ContentTypes>

Step 7: Copy and paste the complete code in the “schema.xml” file.

<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/">
  <MetaData>
    <ContentTypes>
      <ContentTypeRef ID="0x01003149ea7d45674d83a284c27d30a9a9b3" />
    </ContentTypes>
    <Fields></Fields>
    <Views>
      <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="https://i0.wp.com/www.spguides.com/_layouts/images/generic.png" Url="AllItems.aspx">
        <XslLink Default="TRUE">main.xsl</XslLink>
        <JSLink>clienttemplates.js</JSLink>
        <RowLimit Paged="TRUE">30</RowLimit>
        <Toolbar Type="Standard" />
        <ViewFields>
          <FieldRef Name="LinkTitle"></FieldRef>
          <FieldRef Name="ProductName"></FieldRef>
          <FieldRef Name="ProductDescription"></FieldRef>
          <FieldRef Name="ProductCategory"></FieldRef>
          <FieldRef Name="Quantity"></FieldRef>
          <FieldRef Name="TotalAmount"></FieldRef>
          <FieldRef Name="DeliveredDate"></FieldRef>
        </ViewFields>
        <Query>
          <OrderBy>
            <FieldRef Name="ID" />
          </OrderBy>
        </Query>
      </View>
    </Views>
    <Forms>
      <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>
 </MetaData>
</List>

Step 8: Initially the “package.solution” file will contain only the solution name. We must add the feature node as well to this file.

Add the below content after the “isDomainIsolated”: false. Here the “id” is a Visual studio created GUID that identifies a unique feature.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "sp-fx-custom-list-client-side-solution",
    "id": "ae49fb29-f8ca-47a3-80e3-502ab7c4518a",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "features": [{
      "title": "sp-fx-custom-list-client-side-solution",
      "description": "sp-fx-custom-list-client-side-solution",
      "id": "433d792a-ad6f-44d1-abd5-daf51307d491",
      "version": "2.0.0.0",
      "assets": {        
        "elementManifests": [
          "elements.xml"
        ],
        "elementFiles":[
          "schema.xml"
        ]
      }
    }]
  },
  "paths": {
    "zippedPackage": "solution/sp-fx-custom-list.sppkg"
  }
}

Step 9: Now run the command “gulp serve“. The serve task is used to test the developed web part locally using workbench files. To prevent “gulp serve” from opening a new browser instance, you should run “gulp serve –nobrowser“.

Step 10: Now we should bundle the solution using “gulp bundle –ship“.The bundle task will generate the scripts required to run the web part on the site. This command will bundle all Typescripts and its node_module dependencies in a single compiled JavaScript file.

Step 11: Next run the command “gulp package-solution –ship“.This command will create the package (.sppkg) file. This package should be added to the app catalog.

Read How to use SPFx preconfiguredentries with examples

Upload your solution in “apps for SharePoint” of App Catalog

Step 12: Go to App Launcher -> Admin -> Admin centers -> SharePoint -> Classic SharePoint Admin Center -> Apps -> App Catalog -> Click on Apps for SharePoint.

Step 13: Then Click on “OK”, it will ask you trust and deploy the solution to SharePoint.

Step 14: Now the solution is added in the App Catalog in SharePoint.

Install the solution on your site:

Step 15: Go to the site contents->add an app. Here you can find your newly created app details.

Step 16: Click on the app to add the solution to the site. After some time, you will see the newly created SharePoint list.

step 17: Click on the newly created list you can see site columns have been created and added to the list.

Step 18: You can see the content type created in the site. Go to Site settings->click on Site content types under web designer galleries.

Step 19: You can see the site columns created on the site. Go to site settings->click on Site columns under web designer galleries.

In this article you have learned adding/provisioning create site column, content types and SharePoint list, using SharePoint Framework Web part solution.

Following some of the articles on creating a custom list, content types in sharepoint 2013/2016/2019 and sharepoint online

• Create a list using the SharePoint framework (SPFx) Step by Step tutorial
• SharePoint Hosted App or Add-in Example: Create Site Column, Content type and List in SharePoint Online using Visual Studio 2017
• Create, Update and Delete SharePoint List using Rest API in SharePoint 2013/2016/Online
• Create and delete SharePoint list using JSOM Javascript Object Model in SharePoint online
• Create site columns using the JavaScript Client Object Model
• deploy SharePoint framework client web part
• Property welcome does not exist on type ‘JSX.IntrinsicElements’ in SPFx React
• React vs Angular in Details
• SharePoint content type CSOM examples

Hope this Spfx tutorial explains, how to create site column, content type and create a list in the SharePoint framework.