Create columns in SharePoint Online list using JavaScript Object Model (jsom)

In this SharePoint jsom tutorial, we will discuss, how to create fields or columns in a SharePoint list using JSOM (javascript client object model) in SharePoint Online. The same jsom code we can use to create columns in SharePoint 2013/2016 list also.

Create columns in SharePoint Online list using JavaScript

Here we will add columns to a custom list using jsom in SharePoint Online. Here we will design an HTML form, where we will provide options to the user an input form to enter column name, data type and description and a submit button.

Once the user fills the details like column name, data type, and description and clicks on Submit, the column will be created or added to the SharePoint custom list.

So we have added an HTML form and added the input controls like dropdown list, textbox, and a button etc. And we will have a js file which will have the jsom code to create the column.

Here we have taken two text boxes one drop-down list and a submit button. Here I have hardcoded the dropdown values as the column types as Single line, multi-line, and number type. Have taken a <p> tag to display the success message. Below is HTML code:

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Bihusdevelopment2/creatingcolumns.js"></script>

<table>
<tr>
<td>
Display Name
</td>
<tdcolspan="4">
<inputtype="text"id="txtcolDisplayNmae">
</td>
</tr>
<tr>
<td>
columnsType
</td>
<tdcolspan="4">
<selectid="ddlcolumnstype">
<option>Single line</option>
<option>multi line</option>
<option>number</option>
</select>
</td>
</tr>
<tr>
<td>
Description
</td>
<tdcolspan="4">
<textarearows="4"cols="22"id="txtcolDescr"></textarea>
</td>
</tr>
<tr>
<tdcolspan="3">
</td>
<td>
<tdcolspan="4">
<inputtype="button"value="AddColumns"id="btncreatecol"></input>
</td>
</tr>
</table>

<p id="psuccess" align="center"></p>

I have created a custom list as “department” where the columns will be added.

Here we will take the inputs from the user like a type of Column, Display Name and description. We will retrieve all those inputs and bind using JSOM to create desired columns. Below is JSOM code to create Columns.

$(document).ready(function () {
$("#btncreatecol").click(function(){
retrievecolumnsTemplate();
});
});
function retrievecolumnsTemplate(){
var coldisplayname=$("#txtcolDisplayNmae").val();
var template=$('#ddlcolumnstype :selected').val();
var coldescription=$("#txtcolDescr").val();
var clientContext=newSP.ClientContext.get_current();
var oWebsite=clientContext.get_web();
oList = clientContext.get_web().get_lists().getByTitle('department');
varfldCollection=oList.get_fields();
if ( template=='multi line'){
varrichTextField=clientContext.castTo(
fldCollection.addFieldAsXml('<Field Type="Note" DisplayName=\"NewField\" Name="NewField" Required="False" NumLines="12" RichText="TRUE" AppendOnly="TRUE" />', true, SP.AddFieldOptions.addToDefaultContentType),SP.FieldMultiLineText);
richTextField.set_description(coldescription);
richTextField.set_title(coldisplayname);
richTextField.update();
}
elseif(template=='Single line' )
{
var singlelinetext=clientContext.castTo(
fldCollection.addFieldAsXml('<Field Type="Text" DisplayName=\"NewField\" Name="NewField" />', true,SP.AddFieldOptions.addToDefaultContentType),SP.FieldText);
singlelinetext.set_title(coldisplayname);
singlelinetext.set_description(coldescription);
singlelinetext.update();
}
elseif(template=='number')
{
var numberField=clientContext.castTo(
fldCollection.addFieldAsXml('<Field Type="Number" DisplayName=\"NewField\" Name="NewField" Required="False" />', true, SP.AddFieldOptions.addToDefaultContentType),SP.FieldNumber) ;
numberField.set_title(coldisplayname);
numberField.set_description(coldescription);
numberField.update();
}
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
alert("column added");
    }
function onQueryFailed(sender, args) {
alert('Error: '+args.get_message() +'\n'+args.get_stackTrace());
}

As you can see in the below image Display Name, Column Type and description are provided and when we click on Add Column button a popup is displayed as Column is added.

To verify, open the custom list and you can see the columns has been added to the list like below:

You may like following SharePoint jsom tutorials:

Hope this article helps to add a column to a SharePoint list using jsom (JavaScript Object Model) in SharePoint Online. The same way we can add columns to lists or document libraries in SharePoint 2016 or SharePoint 2013.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

Bibhu Dutta Bhanja

  • […] Online: Add Columns or Fields to SharePoint List or Document Library using JavaScript Object Model […]

  • >