Post
Ask Question

Provisioning SharePoint List With Custom Schema Using SPFx Solution

Introduction

Let us look at provisioning SharePoint lists, using schema files with SharePoint Framework components.

In the previous post, you would have seen provisioning SharePoint basic lists, using SPFx components. 

In the previous sample, I have explained the steps to create a basic SharePoint custom list with feature mapping, using SharePoint framework solution. In this sample, let us look at how the list will be created with custom schema. The schema can contain the additional content types or fields.

The schema defines the basic structure of SharePoint list. The template is defined, using list instance definition file (elements.xml). The schema which will contain basic field, content types, their references and forms for the list.

Here, let us try to create a simple SharePoint list with an additional content type with few fields, using SPFx project. 

Create project

Create a SharePoint framework project by running the command yo @microsoft/sharepoint or use the existing project.

Add/ Modify List Definition File

Under SharePoint/assets folder, add or modify the list instance definition file (elements.xml) with the necessary basic information like 

  • Title.
  • FeatureId (Base feature ID of the generic list or any other list).
  • Description.
  • Template type (Base template type ID of generic list or any other list).
  • URL.
  • Schema File URL.
The code snippet given below shows the list definition (elements.xml) file.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
  3.    <ListInstance   
  4.             CustomSchema="schema.xml"  
  5.             FeatureId="00bfea71-de22-43b2-a848-c05709900100"  
  6.             Title="Custom List"   
  7.             Description="Custom List"  
  8.             TemplateType="100"  
  9.             Url="Lists/CustomList">  
  10.     </ListInstance>      
  11. </Elements>  
Add/ Modify List Schema File

The schema file contains the list structure and other basic components, which are included. Here, let us only concentrate on adding an additional content type and site column.

Note

The basic schema file can be generated by adding a list, using SharePoint project in Visual Studio.

Copy the schema file content given below to your schema.xml file created under SharePoint/assets folder.

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <List xmlns:ows="Microsoft SharePoint" Title="CustomList" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/CustomList" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">  
  3.   <MetaData>  
  4.     <ContentTypes>  
  5.       <ContentTypeRef ID="0x01">  
  6.         <Folder TargetName="Item" />  
  7.   
  8.       </ContentTypeRef>  
  9.       <ContentTypeRef ID="0x0120" />  
  10.       <ContentTypeRef ID="0x010076E63D35613E4802AF332A0F8DDE6759"/>  
  11.     </ContentTypes>  
  12.     <Fields>  
  13.       <Field ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Type="Text" Name="Title" DisplayName="$Resources:core,Title;" Required="TRUE" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="Title" MaxLength="255" />  
  14.     </Fields>  
  15.     <Views>  
  16.       <View BaseViewID="0" Type="HTML" MobileView="TRUE" TabularView="FALSE">  
  17.         <Toolbar Type="Standard" />  
  18.         <XslLink Default="TRUE">main.xsl</XslLink>  
  19.         <RowLimit Paged="TRUE">30</RowLimit>  
  20.         <ViewFields>  
  21.           <FieldRef Name="LinkTitleNoMenu"></FieldRef>  
  22.           <FieldRef Name="SPFxTextCol"></FieldRef>  
  23.         </ViewFields>  
  24.         <Query>  
  25.           <OrderBy>  
  26.             <FieldRef Name="Modified" Ascending="FALSE"></FieldRef>  
  27.           </OrderBy>  
  28.         </Query>  
  29.         <ParameterBindings>  
  30.           <ParameterBinding Name="AddNewAnnouncement" Location="Resource(wss,addnewitem)" />  
  31.           <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />  
  32.           <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_ONET_HOME)" />  
  33.         </ParameterBindings>  
  34.       </View>  
  35.       <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/15/images/generic.png?rev=23" Url="AllItems.aspx">  
  36.         <Toolbar Type="Standard" />  
  37.         <XslLink Default="TRUE">main.xsl</XslLink>  
  38.         <JSLink>clienttemplates.js</JSLink>  
  39.         <RowLimit Paged="TRUE">30</RowLimit>  
  40.         <ViewFields>  
  41.           <FieldRef Name="LinkTitle"></FieldRef>  
  42.           <FieldRef Name="SPFxTextCol"></FieldRef>  
  43.         </ViewFields>  
  44.         <Query>  
  45.           <OrderBy>  
  46.             <FieldRef Name="ID"></FieldRef>  
  47.           </OrderBy>  
  48.         </Query>  
  49.         <ParameterBindings>  
  50.           <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />  
  51.           <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_DEFAULT)" />  
  52.         </ParameterBindings>  
  53.       </View>  
  54.     </Views>  
  55.     <Forms>  
  56.       <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />  
  57.       <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />  
  58.       <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />  
  59.     </Forms>  
  60.   </MetaData>  
  61. </List>   
Map list to a feature

Now, map the list to a feature. Both list instance definition file and schema file should be mapped to feature (package-solution.json). The solution given below contains the details, package path and feature information, which has list definition and schema files mapped.
  1. {  
  2.   "solution": {  
  3.     "name": "spassetspfxsolution-client-side-solution",  
  4.     "id": "fc3ce3bf-07c7-4029-bbcc-21e440d37658",  
  5.     "version": "1.0.0.10",  
  6.     "features": [{  
  7.       "title": "spassets-solution",  
  8.       "description": "spassets-solution",  
  9.       "id": "d5499ce4-ba83-40b8-a3ce-c0f4bf9b5595",  
  10.       "version": "1.0.0.10",  
  11.       "assets": {  
  12.         "elementManifests": [  
  13.           "elements.xml"  
  14.         ],  
  15.         "elementFiles":[  
  16.           "schema.xml"  
  17.         ]  
  18.       }  
  19.     }]  
  20.   },  
  21.   "paths": {  
  22.     "zippedPackage": "solution/spassetspfxsolution.sppkg"  
  23.   }  
  24. }   

Note

All the features of ID (GUID) are generated, using visual studio generate GUID tool. 

Deploy/ Run

Bundle the solution and upload the bundle files to CDN path. Update the CDN path in the manifest file.

Package and deploy the solution to SharePoint site (Office 365 site), using app catalog site.

The feature can be activated or deactivated from the features page (Feature name can be identified from package solution JSON shown above). The list will be present under the content type page (/_layouts/15/mngctype.aspx).

The snapshot given below shows the created list, using the sample given above.



Summary

Thus you have learned how to add/ provision SharePoint list, using custom schema definition file with SharePoint Framework solutions.


Similar Articles