Provisioning SharePoint Site Columns Using SPFx Solution

Let us look at provisioning SharePoint site columns (fields) using SharePoint Framework components.

Site Columns can be created in multiple ways. Here, we are looking at adding site columns using definition file (XML) with SPFx solution.

In the following sample, let us try to create different types of fields using SPFx project.

Adding Fields

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

To add the site column, add the site column definition file to assets folder (asset folder to be created under root SharePoint folder) under the SPFx project. Refer to my previous post for more details.

The below XML shows the definition for creating a custom filed (columns). The definition contains three different fields (text, number and user) to be created. The feature IDs of each and every field is unique, which can be generated using Visual Studio tools. Copy the below piece of xml content.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Field ID="{C73155F8-745A-47F7-893E-FC2C9363E69F}"
            Name="SPFxTextCol"
            DisplayName="SPFxTextCol"
            Type="Text"
            Required="FALSE"
            Group="SPFxCustomColumns" />

    <Field ID="{1E65DB1C-DE2B-4A14-8CA6-8BFB6CDBD943}"
            Name="SPFxNumberCol"
            DisplayName="SPFxNumberCol"
            Type="Number"
            Required="FALSE"
            Group="SPFxCustomColumns" />

    <Field ID="{B3D8C888-B3D1-4A73-9617-61F746B9457C}"
            Name="SPFxUserCol"
            DisplayName="SPFxUserCol"
            Type="User"
            Required="FALSE"
            Group="SPFxCustomColumns" />

</Elements>

Then, the feature is created for all the fields. The site columns definition file should be mapped to the feature. The package-solution.json file under config folder contains a feature mapping definition. Add the feature title, description, feature id, version and the assets. The assets include the files to be included in the feature.

The following snippet shows the solution JSON along with feature details and package path.

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

Note

The feature id / column ID is a GUID generated using visual studio generate GUID tool.  

 

Package, Deploy & Test

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 the SharePoint site (Office 365 site) using app catalog site.

The feature can be activated or deactivated from the features page. The site columns will be present under the columns page (/_layouts/15/mngfield.aspx).

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

• Developing Web Parts Using SharePoint Framework - Part Three 

Thus, you have learned adding/provisioning SharePoint list using SharePoint Framework solutions.