Latest Posts

Power Platform Interview Questions

Azure Tutorials for Beginners

Create List Column in SharePoint using JSOM

The example in this topic show how to use JSOM to Create List Column in SharePoint

You can use Content Editor or Script Editor web part on your site, put Html and JSOM (Java Script Object Model) code and that's it. You can perform any action supported by JSOM APIs

How to execute JSOM code in SharePoint?

Note: This is just a sample, you can go ahead with your implementation.
Open your Site. Create a webpart page.
Put a Content Editor Web part and a Script Editor Web part on it.

Webpart page content editor and scipt editor

I have added below Html in Content Editor webpart. You can replace MainFunction with your actual method name.
<button onclick="MainFunction();" type="button">Click me</button>
And below references in Script Editor Webpart. You can keep jQuery reference as per your need. ScriptFile.js is a JavaScript file where you can keep below function i.e. your actual logic.
<script src="https://code.jquery.com/jquery-2.2.4.js" type="text/javascript"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script src="https://MyServer/sites/SiteCollection/style library/js/ScriptFile.js"></script>
Once you are done with setting your page, click on the button and your method should get executed.

function CreateListColumn() {
// You can optionally specify the Site URL here to get the context
// If you don't specify the URL, the method will get the context of the current site
// var clientContext = new SP.ClientContext("http://MyServer/sites/SiteCollection");
var clientContext = new SP.ClientContext();
var olistCollection = clientContext.get_web().get_lists();
var oList = olistCollection.getByTitle("List Name");
var oFields = oList.get_fields();
// It is very important that we don't specify any space in field internal name.
// If you want the method to consider your internal name and NOT the display name, you need to specify "AddFieldOptions.AddFieldInternalNameHint" as an option in below line of code
//// AddFieldOptions ////
// 1. defaultValue - specify that a new field added to the list must also be added to the default content type in the site collection.
// 2. addToDefaultContentType - specify that a new field added to the list must also be added to the default content type in the site collection.
// 3. addToNoContentType - specify that a new field must not be added to any other content type.
// 4. addToAllContentTypes - specify that a new field that is added to the specified list must also be added to all content types in the site collection.
// 5. addFieldInternalNameHint - specify adding an internal field name hint for the purpose of avoiding possible database locking or field renaming operations.
// 6. addFieldToDefaultView - specify that a new field that is added to the specified list must also be added to the default list view.
// 7. addFieldCheckDisplayName - specify to confirm that no other field has the same display name.
// Type - Text
var plainTextField = oFields.addFieldAsXml('<Field Type="Text" DisplayName="Text Column 1" Name="Text Column 1" Required="False" />', true, SP.AddFieldOptions.addToDefaultContentType);
plainTextField.set_description("This is text column");
plainTextField.update();
// Type - Note - Multi line
var plainNoteField = oFields.addFieldAsXml('<Field Type="Note" DisplayName="Note Column 1" Name="NoteColumn1" Required="False" RichText="False" NumLines="6" AppendOnly="True"/>', true, SP.AddFieldOptions.addToDefaultContentType);
plainNoteField.set_description("This is Note column");
plainNoteField.update();
// Type - Note - Multi line - Rich Text
var NotehtmlField = oFields.addFieldAsXml('<Field Type="Note" DisplayName="Note Column 2" Name="NoteColumn2" Required="False" RichText="TRUE" NumLines="10" AppendOnly="True"/>', true, SP.AddFieldOptions.addToDefaultContentType);
NotehtmlField.set_description("Rich Text Multi line field");
NotehtmlField.update();
// Type - Note - Multi line - Enhanced Rich Text
var NoteFullhtmlField = oFields.addFieldAsXml('<Field Type="Note" DisplayName="Note Column 3" Name="NoteColumn3" Required="False" RichText="TRUE" RichTextMode="FullHtml" NumLines="15" AppendOnly="True"/>', true, SP.AddFieldOptions.addToDefaultContentType);
NoteFullhtmlField.set_description("Enhanced Multi line field");
NoteFullhtmlField.update();
// Type - Boolean
var BooleanField = oFields.addFieldAsXml('<Field Type="Boolean" DisplayName="BooleanColumn" Name="BooleanColumn" Required="False" ><Default>0</Default></Field>', true, SP.AddFieldOptions.addToDefaultContentType);
BooleanField.set_description("Boolean field");
BooleanField.update();
// Type - Image
var imageField = oFields.addFieldAsXml('<Field Type="URL" DisplayName="ImageColumn" Name="Image Column" Required="False" Format="Image"></Field>', true, SP.AddFieldOptions.addToDefaultContentType);
imageField.set_description("Image field");
imageField.update();
// Type - HyperLink
var HyperLinkField = oFields.addFieldAsXml('<Field Type="URL" DisplayName="HyperLinkColumn" Name="HyperLink Column" Required="False" Format="Hyperlink"></Field>', true, SP.AddFieldOptions.addToDefaultContentType);
HyperLinkField.set_description("HyperLink field");
HyperLinkField.update();
// Type - Number
var NumberField = oFields.addFieldAsXml('<Field Type="Number" DisplayName="Number Column" Name="Number Column" Required="False" ></Field>', true, SP.AddFieldOptions.addToDefaultContentType);
NumberField.set_description("Number field");
NumberField.update();
// Type - User
var NumberField = oFields.addFieldAsXml('<Field Type="User" DisplayName="User Column" Name="User Column" Required="False" Format="Hyperlink"></Field>', true, SP.AddFieldOptions.addToDefaultContentType);
NumberField.set_description("User field");
NumberField.update();
// Execute the query to the server.
clientContext.executeQueryAsync(onsuccess, onfailed);
}
function onsuccess() {
console.log('Success');
}
function onfailed(sender, args) {
console.log('Failed' + args.get_message() + '\n' + args.get_stackTrace());
}

Similar examples using different APIs:

Thank you for reading this article. This code was tested in SharePoint 2013

We value your Feedback:

Page URL:

Name:

Name is a mandatory field

Email:

Email is a mandatory field
Email format is not corrent

Suggestion:

Suggestion is a mandatory field

Code SharePoint

Categories