SharePoint online: Add Columns or Fields to SharePoint List or Document Library using JavaScript Object Model (jsom)

Create column using jsomb sharepoint 2013 list

In this SharePoint jsom tutorial, we will discuss, how to add fields or columns to a SharePoint list using JSOM (javascript client object model) in SharePoint online.

Here we will add columns to a custom list using jsom in SharePoint online (Download PDF for FREE). We will provide 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 custom list.

SharePoint deveopment training course

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.

HTML File (HTML code for the input controls used to create column):

Here we have taken two text boxes one dropdownlist and a submit button. Here I have hardcorded 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:


<!DOCTYPE HTML>
<HTML>
<head>
<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>
</head>
<body>
<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>
</body>
</html>
Creating columns in Sharepoint using jsom
Creating columns in Sharepoint using jsom

.JS File (Creating columns in List from User inputs)

We have taken a custom list and its name as “department” where the columns will be added. Here we will take the inputs from the user like type of Column, Display Name and description. We will retrive 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();
});
});
functionretrievecolumnsTemplate(){
varcoldisplayname=$(“#txtcolDisplayNmae”).val();
vartemplate=$(‘#ddlcolumnstype :selected’).val();
varcoldescription=$(“#txtcolDescr”).val();
varclientContext=newSP.ClientContext.get_current();
varoWebsite=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’ )
{
varsinglelinetext=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’)
{
varnumberField=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));
}
functiononQuerySucceeded(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.
Create column using jsomb sharepoint 2013 list
Create column using jsomb sharepoint 2013 list

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

Hope this article helps to add a column to a list using jsom (JavaScript Object Model) in SharePoint Online. Same way we can add columns to lists or document libraries in SharePoint 2016 or SharePoint 2013.
Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

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

envelope
envelope