SPFX how to do provisioning or how to create site columns, site content types through code

Firstly, Provision the site meaning we want to provision the site columns, content types, List everything through our app.

Now using SPFx, we will be creating site columns, content types, list instances through our XML.

After creating the webpartscaffold using yo @microsoft/sharepoint.

Step:

In this demonstration, we won't work with webparts at all, but we will be working with XML files.

Create a folder called sharepoint under your webpart root folder.

under sharepoint folder, create an assets folder

under assets folder create an elements.xml file and schema.xml file.

Step: 

Now we are going to create site columns, content type and a list instance.

Elements.xml file: 

In elements.xml file we are going to create fields with Field tag.

https://tejasadventure.blogspot.com/2021/07/spfx-provisioning-elementsxml.html

Create GUID for FieldRef

ID represents GUID. GUID can be created by the user itself or we can generate it by VS Code.

example:

press cntrl shift p -> insert guid-> and go for second guid

Name represents Name of the filed

Group represents some group name we are giving as CustomDemoGroup in our example.

<Field ID="{53A51AF9-70D2-4731-A815-B038A56CFC3D}"

  Name="SoftwareName"

  Group="CustomDemoGroup"

  Type="Text"

  Hidden="FALSE"

  DisplayName="SoftwareName" />

  <Field ID="{287F71C5-026D-42B2-9FB8-5DB35A69ACF3}"

  Name="SoftwareVersion"

  Group="CustomDemoGroup"

  Type="Text"

  Hidden="FALSE"

  DisplayName="SoftwareVersion" />

  <Field ID="{86BFF556-D9B5-45CE-8187-E523DEB6F5A5}"

  Name="SoftwareDescription"

  Group="CustomDemoGroup"

  Type="Text"

  Hidden="FALSE"

  DisplayName="SoftwareDescription" />

    

  <Field ID="{A4D15F6B-0922-44C4-951A-27B461F5019F}"

  Name="SoftwareVendor"

  Group="CustomDemoGroup"

  DisplayName="Software Vendor"

  Type="Choice" 

  Required="TRUE">

    <CHOICES>

      <CHOICE>Microsoft</CHOICE>

      <CHOICE>Sun Microsystem</CHOICE>

      <CHOICE>Adobe</CHOICE>

      <CHOICE>Others</CHOICE>

    </CHOICES>

  </Field>  

Create ContentType

In order to create contenttype, we have something with content type tag.

Again, it has guid, name, group,description.

name of the content type in our example is "SoftwareContentType"

Under FieldRefs tag, we are placing the field name GUIDs to map the fields with content type

<ContentType ID="0x0100F132E371DCCF4A8E9D08D47E54214C32" 

               Name="SoftwareContentType" 

               Group="Custom Content Types" 

               Description="My Content Type">

    <FieldRefs>

      <FieldRef ID="{53A51AF9-70D2-4731-A815-B038A56CFC3D}" />

      <FieldRef ID="{A4D15F6B-0922-44C4-951A-27B461F5019F}" />

      <FieldRef ID="{287F71C5-026D-42B2-9FB8-5DB35A69ACF3}" />     

      <FieldRef ID="{86BFF556-D9B5-45CE-8187-E523DEB6F5A5}" />

    </FieldRefs>

  </ContentType>

Create List Instance

Now we need to create List Instance

TemplateType: 100 //means it is custom list

FeatureID: This fixed feature ID is for custom list.. 

FeatureId="00bfea71-de22-43b2-a848-c05709900100".

Now the CustomSchema: schema.xml is the link between the content type and list instance.

In our example "SoftwareContentType" is the content type name.

Lets go to Schema.xml file.

<ListInstance 

    CustomSchema="schema.xml"

    FeatureId="00bfea71-de22-43b2-a848-c05709900100"

    Title="MicrosoftSoftware"    

    Description="Microsoft software"

    TemplateType="100" 

    Url="Lists/MicrosoftSoftware" 

    >

    

  </ListInstance>

Schema.XML:

https://tejasadventure.blogspot.com/2021/07/spfx-provisioning-schemaxml.html

Under List tag, metadata, content type where content type reference ID is place where contenttype ref ID provided. which is nothing but content type ID from elements.xml file.

In view fields tag, we are providing field names for the view. Also it is optional, not mandatory to keep all the fields.

<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="0x0100F132E371DCCF4A8E9D08D47E54214C32" />

    </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="SoftwareName" />

          <FieldRef Name="SoftwareVendor" />

          <FieldRef Name="SoftwareVersion" />         

          <FieldRef Name="SoftwareDescription" />

        </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>

How to provision

In order to provision, we need to go config folder-> package-solution.json file.

In this file, 

We can observe Solution Name, ID, Version etc attributes.

We need to insert features attribute with array list of features.

After IsDomainIsolated attribute we can add the features attribute

"features": [{

      "title":"Provision Assets",

      "description": "Provision Assets",

      "id":"cab9963d-1be6-4832-95fc-3e40ef7c729c",

      "version": "2.0.0.0",

      "assets": {

        "elementManifests": [

          "elements.xml",

          "elements-v2.xml"

        ],

        "elementFiles": [

          "schema.xml"

        ]

      }

    }],

Here id can GUID which we can insert through ctrl shift p -> insert GUID->choose 2nd one.

Now deploy your App in to App Catalog

Bundle your app and make it package solution and deploy it.

You can refer below how to do it.

https://tejasadventure.blogspot.com/2019/09/sharepoint-framework-spfx-deploy-in.html

https://tejasadventure.blogspot.com/2019/09/how-to-deploy-spfx-webpart-in-to.html

Out Put:

Now Go to Site Contents - > Add this App - >

Now Go to Site Columns

Choose the custom group CustomDemoGroup, you can find the columns has created.

We can also observe List, columns, content types has created. Screenshots below.