Published: 5th July 2017
This is a continuation post in the SharePoint Framework Development series, In the earlier article we saw how to set up the environment and the tool chains required to start the development using SharePoint Framework(SPFx). You can 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 create Site Columns, Content Type and a Custom List using SharePoint Framework. The major solution files used in the demo can be downloaded from here.
Before moving forward, ensure that the SharePoint Framework development environment is ready. Spin up Node.js command prompt using which we will be creating the web part project structure
We can create the directory, where we will be adding the solution, using the command given below.
Let’s move to the newly created working directory, using the command.
We will then create the client Web part by running the Yeoman SharePoint Generator.
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 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.
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 which 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.In this demo we will be creating the below Site Columns :
The GUID of the site columns can either be created using Online GUID creator Tools or Visual Studio GUID Generator
Then we will create the content type named 'EmployeeContentType' that will be deployed to the site. We have to include the Field IDs of the Site Columns specified earlier within the Content Type as shown below.
Once we are done specifying the site columns and Content Type,We can also be define the default data that will be provisioned along with the list using Rows tag as shown below.
The complete elements.xml that is used with the project is given below:
Finally, we will be creating the schema.xml file which will contain the list xml. Here, we will be adding the Content Type that we had declared in the elements.xml as below:
The complete schema.xml will look like below:
Before we can deploy the package we have to update the feature in the package-solution.json file so that during deployment it knows what to deploy. This json file acts like the feature.xml in the server side solutions.
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.
contents of the package-solution.json will look like below :
Now we must package and bundle the solution using
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 solution.
Click on it to add the solution to the site.
After few seconds, we can see the newly created custom list.
Going inside it we can see that the site columns have been created and added to the list and default data has also been added to the list.
Thus we saw how to create Site Columns,Content Type and a Custom List using SharePoint Framework. In the next post we will see how to use SharePoint Framework to create a web part that retrieves and displays SharePoint List Items.
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 30 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