Provisioning SharePoint Content Types Using SPFx Solution

Introduction

Let us look at provisioning SharePoint site content types, using SharePoint Framework components.

In the previous post, you would have seen provisioning fields, using SPFx components.

Site content type can be created manually, programmatically or using Visual Studio project. Here, let us look at adding site content type, using definition file (XML) with SPFx solution. The content type contains collection of fields, which are used to create records in SharePoint.

In this sample, let us try to create a simple SharePoint content type, which contains few fields, using SPFx project.

Adding content types

Create a SharePoint framework project by running the command, using the existing project.

Add the site content type definition file to assets folder (asset folder to be created under root SharePoint folder) under SPFx project. Refer to my post for more details.

XML given below shows the definition for creating a content type. The definition contains a content type with two different fields. FieldRef contains the fields created or already existing fields on the site. The definition for new field can also be listed here, using field tag. The feature IDs of each and every field is unique, which can be generated, using Visual Studio tools. Copy the piece of XML content given below.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Field ID="{3582AD5E-5D8B-4DE1-BEDF-57557EA84262}"
            Name="SPFxCustomUser1"
            DisplayName="SPFxCustomUser1"
            Type="User"
            Required="FALSE"
            Group="SPFxCustomColumns" />
    <ContentType ID="0x010076E63D35613E4802AF332A0F8DDE6759"
            Name="SPFxCT1"
            Group="SPFxCTs"
            Description="spfx content type1">
        <FieldRefs>
            <FieldRef ID="{C73155F8-745A-47F7-893E-FC2C9363E69F}" />
            <FieldRef ID="{3582AD5E-5D8B-4DE1-BEDF-57557EA84262}" />
        </FieldRefs>
    </ContentType>
</Elements>

Now, the content type is mapped to the feature in the project. The content type definition file (elements.xml) should be mapped to the feature. The package-solution.json file under config folder contains feature mapping definition. Add the feature title, description, feature id, version and the assets.

Note that the feature id is GUID generated, using Visual Studio generate GUID tool.

The snippet given below shows the solution JSON along with the feature details and package path. JSON contains the feature with the definition file.

{
  "solution": {
    "name": "spassetspfxsolution-client-side-solution",
    "id": "fc3ce3bf-07c7-4029-bbcc-21e440d37658",
    "version": "1.0.0.2",
    "features": [{
      "title": "spassets-solution",
      "description": "spassets-solution",
      "id": "d5499ce4-ba83-40b8-a3ce-c0f4bf9b5595",
      "version": "1.0.0.2",
      "assets": {
        "elementManifests": [
          "elements.xml"
        ]
      }
    }]
  },
  "paths": {
    "zippedPackage": "solution/spassetspfxsolution.sppkg"
  }
}

Deploy/ Run

Bundle the solution and upload the bundle files to CDN path. Update 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. The site content types will be present under the content type page (/_layouts/15/mngctype.aspx).

The article given below shows the detailed steps for bundling, packaging and deploying.

• Developing Web Parts Using SharePoint Framework - Part Three 

The snapshot given below shows the content type with the fields created, using the approach given above.

 

Summary

Thus you have learned about adding/ provisioning SharePoint content types, using SharePoint Framework solutions.