Provision SharePoint List With Custom Site Columns And Content Type Using SharePoint Framework

SharePoint Framework is the new development model in which a lot of work has been going on since 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 SharePoint List with custom Site Columns and Content Type

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

md ProvisionSPList

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

cd ProvisionSPList

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

yo @microsoft/sharepoint

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

• What is your solution name? : Set it to ‘ProvisionSPList’.

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 ‘ProvisionSPList‘ and press Enter
• What is your Webpart description- We will specify it as this Webpart will provision SharePoint List
  
  
  

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

Edit the web part

Run the Code to scaffold and open the project in Visual Studio Code.

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 provision 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 provision 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.

Elements.XML

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

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Field ID="{11ED4026-1C15-4636-80EF-C27C41DB90E0}" Name="EmployeeName" DisplayName="Employee Name" Type="Text" Required="FALSE" Group="Employee" />
    <Field ID="{1DA0BA30-F87A-4D1B-9303-729AA02BEE25}" Name="PreviousCompany" DisplayName="Previous Company" Type="Text" Required="FALSE" Group="Employee" />
    <Field ID="{145B5D00-E3AE-48EB-BB75-9699922AF8D8}" Name="JoiningDate" DisplayName="JoiningDate" Type="DateTime" Format="DateOnly" Required="FALSE" Group="Employee" />
    <Field ID="{197F8587-C417-458D-885E-4FBC28D1F612}" Name="Expertise" DisplayName="Expertise" Type="Choice" Required="FALSE" Group="Employee">
        <CHOICES>
            <CHOICE>SharePoint</CHOICE>
            <CHOICE>Java</CHOICE>
            <CHOICE>.NET</CHOICE>
            <CHOICE>Python</CHOICE>
            <CHOICE>C++</CHOICE>
            <CHOICE>Web Designer</CHOICE>
        </CHOICES>
    </Field>
    <Field ID="{10E72105-7577-4E9E-A758-BBBE8FF4E9BA}" Name="Experience" DisplayName="Experience" Group="Employee" Type="Number" Required="False" Min="0" Max="30" Percentage="FALSE"> </Field>
    <ContentType ID="0x010100FA0963FA69A646AA916D2E41284FC9D1" Name="EmployeeContentType" Group="Employee Content Types" Description="This is the Content Type for Employee Onboarding">
        <FieldRefs>
            <FieldRef ID="{11ED4026-1C15-4636-80EF-C27C41DB90E0}" />
            <FieldRef ID="{1DA0BA30-F87A-4D1B-9303-729AA02BEE25}" />
            <FieldRef ID="{145B5D00-E3AE-48EB-BB75-9699922AF8D8}" />
            <FieldRef ID="{197F8587-C417-458D-885E-4FBC28D1F612}" />
            <FieldRef ID="{10E72105-7577-4E9E-A758-BBBE8FF4E9BA}" /> </FieldRefs>
    </ContentType>
    <ListInstance CustomSchema="schema.xml" FeatureId="00bfea71-de22-43b2-a848-c05709900100" Title="Employee" Description="Employee List created using SharePoint Framework" TemplateType="100" Url="Lists/Employee">
        <Data>
<Rows>
<Row>
<Field Name="EmployeeName">Priyaranjan</Field>
<Field Name="PreviousCompany">Cognizant</Field>
<Field Name="JoiningDate">10/08/2010</Field>
<Field Name="Expertise">SharePoint</Field>
<Field Name="Experience">7</Field>
</Row>
<Row>
<Field Name="EmployeeName">Nimmy</Field>
<Field Name="PreviousCompany">SunTech</Field>
<Field Name="JoiningDate">11/04/2012</Field>
<Field Name="Expertise">Java</Field>
<Field Name="Experience">4</Field>
</Row>
<Row>
<Field Name="EmployeeName">Jinesh</Field>
<Field Name="PreviousCompany">IBM</Field>
<Field Name="JoiningDate">12/03/2006</Field>
<Field Name="Expertise">.NET</Field>
<Field Name="Experience">11</Field>
</Row>
</Rows>
</Data> </ListInstance>
</Elements>

Schema.XML

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.

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

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="http://schemas.microsoft.com/sharepoint/">
    <MetaData>
        <ContentTypes>
            <ContentTypeRef ID="0x010100FA0963FA69A646AA916D2E41284FC9D9" /> </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="/_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="EmployeeName"></FieldRef>
                    <FieldRef Name="PreviousCompany"></FieldRef>
                    <FieldRef Name="JoiningDate"></FieldRef>
                    <FieldRef Name="Expertise"></FieldRef>
                    <FieldRef Name="Experience"></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>

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.

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

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

{
    "solution": {
        "name": "provision-sp-list-client-side-solution",
        "id": "f26589ce-0cd0-49c4-9ca3-f4a559851a0d",
        "version": "1.0.0.0",
        "features": [{
            "title": "provision-sp-list-client-side-solution",
            "description": "provision-sp-list-client-side-solution",
            "id": "7BC1C758-F2A2-4775-B26E-DC60F8620E9A",
            "version": "2.0.0.0",
            "assets": {
                "elementManifests": ["elements.xml"],
                "elementFiles": ["schema.xml"]
            }
        }]
    },
    "paths": {
        "zippedPackage": "solution/provision-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

gulp package-solution

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

If we head over to the solutions folder, we can see the ‘provision-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.

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.

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

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.

Click on it to add the solution to the site.

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

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

The main solution files used in this section are uploaded in Microsoft TechNet gallery. Feel free to download it.

Summary

Thus, we saw how to Provision 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.