Create Site Column In SharePoint From OOB And JSOM

In this article, I would like to share the steps to create a site column and the code to create the site column in SharePoint using JSOM. Most of us know how to create a column in a SharePoint list. If we create a field as a site column, we can reuse the column in multiple lists when we need the same data type and column.

SharePoint Columns

• SharePoint list is used to categorize and group the columns and track the information in lists and libraries
• Multiple data types can be used in a column, such as a single line of text, multi-line of text, person or group, number, dropdown list, etc.

Steps to create a site column

Follow the below-listed steps to create a site column.

Step 1. Open the SharePoint site on your browser.

Step 2. Then, go to the "Site Settings" page by clicking the gear icon on the site.

Step 3. On the Site Settings page, you can see site columns under the “Web Designer Galleries” category as shown below.

Step 4. Then, we can create the column on the site columns page.

Step 5. Click the “Create” button to create a new site column as shown below.

Step 6. On the "Create Column" page, provide the field name and select the type in the “Name and Type” category, as shown below.

Step 7. Then, select the group and additional column settings and click the “OK” button to create a new field.

Finally, you can see the site field in the Custom column group.

Here is the code to create a site column using the JavaScript Object Model.

$(document).ready(function() {
    createSiteField();
});

function createSiteField() {
    var context = new SP.ClientContext.get_current();
    var web = context.get_web();
    var fields = web.get_fields();
    var fldSchema = '<Field Type="Text" \
                        Name="sampleColumn" \
                        DisplayName="Test SiteColumn" \
                        Required="TRUE" \
                        Group="Gowtham Columns" />';
    fields.addFieldAsXml(fldSchema);
    context.executeQueryAsync(Success, Fail);
}

function Success() {
    alert('SiteColumn is created successfully');
}

function Fail() {
    alert('site column Creation Failed');
}

Summary

In this article, we have explored how to create a site column in SharePoint using UI and using JavaScript object model.