using JSOM for List creation and adding fields

Question

I am using JSOM to create list and add fields to it

                createList("List Name");
                setTimeout(function () { addFieldToList("List Name", "<Field  Type='Text' Name='Link' StaticName='Link' DisplayName='Link' />"); }, 3000);
                setTimeout(function () { addFieldToList("List Name", "<Field  Type='Number' Name='DisplayOrder' StaticName='DisplayOrder' DisplayName = 'DisplayOrder' /> "); }, 4000);
                setTimeout(function () { addFieldToList("List Name", "<Field  Type='Choice' DisplayName='IsActive' Name='IsActive' StaticName='IsActive' Format = 'Dropdown' > <Default>Yes</Default><CHOICES>    <CHOICE>Yes</CHOICE>    <CHOICE>No</CHOICE></CHOICES></Field>"); }, 5000);
                setTimeout(function () { addFieldToList("List Name", "<Field  Type='Choice' DisplayName='NewTab' Name='NewTab' StaticName='NewTab' Format = 'Dropdown' > <Default>No</Default><CHOICES>    <CHOICE>Yes</CHOICE>    <CHOICE>No</CHOICE></CHOICES></Field>"); }, 6000);
                setTimeout(function () { createListItem("List Name", "Overview"); }, 7000);
                setTimeout(function () { createListItem("List Name", "Policies"); }, 7500);
                setTimeout(function () { createListItem("List Name", "Mangement"); }, 8000);

This is not working consistently. Many times, this works successfully, but sometimes it is not able to create all the fields

function addFieldToList(listname, fieldxml) {
    var siteUrl = _spPageContextInfo.webAbsoluteUrl;
    var clientContext = new SP.ClientContext(siteUrl);
    $(".col-ms-4.one").show().html("adding fields..");
    var oList = clientContext.get_web().get_lists().getByTitle(listname);
    this.oField = oList.get_fields().addFieldAsXml(
        fieldxml,
        true,
        SP.AddFieldOptions.defaultValue
    );


    clientContext.load(oField);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, function () {
            var result = oField.get_title() + ' added.';
            console.log(result);
        }),
        Function.createDelegate(this, function () { console.log("not able to add fields") })
    );
}

The problem is, this runs without any issues sometimes and its not creating fields sometimes. Any insight on making it work consistently would be appreciated

Answer 1

Get rid of this and Function.createDelegate.

Use your code as below:

function addFieldToList(listname, fieldxml) {
    var siteUrl = _spPageContextInfo.webAbsoluteUrl;
    var clientContext = new SP.ClientContext(siteUrl);
    $(".col-ms-4.one").show().html("adding fields..");
    var oList = clientContext.get_web().get_lists().getByTitle(listname);
    var oField = oList.get_fields().addFieldAsXml(fieldxml,true,SP.AddFieldOptions.defaultValue);

    clientContext.load(oField);
    clientContext.executeQueryAsync(function() {
           var result = oField.get_title() + ' added.';
           console.log(result);
        },function(){ 
            console.log("not able to add fields") 
        });
}

Also, timeout is a really bad way to get things done. You should use promises to make it a smoother.

Dummy code would be somewhat as :

$.when(addFieldToList("List Name", "<Field  Type='Text' Name='Link' StaticName='Link' DisplayName='Link' />")) 
.done(function (data) {   
  addFieldToList("List Name", "<Field  Type='Number' Name='DisplayOrder' StaticName='DisplayOrder' DisplayName = 'DisplayOrder' /> ").done(function(){
    addFieldToList("List Name", "<Field  Type='Choice' DisplayName='IsActive' Name='IsActive' StaticName='IsActive' Format = 'Dropdown' > <Default>Yes</Default><CHOICES>    <CHOICE>Yes</CHOICE>    <CHOICE>No</CHOICE></CHOICES></Field>").done(function(){
        //do something here
    })
  })
}) 
.fail(function (sender, args) { 
  // To do something 
}); 

Using Promises with JSOM

Answer 2

Hi just in case anybody else is looking for this, there is an other way to do it:

function addFieldToList(listName){

     var siteUrl = _spPageContextInfo.webAbsoluteUrl;
     var clientContext = new SP.ClientContext(siteUrl);

     // Get the web
     var web = clientContext.get_web();

     var oList = web.get_lists().getByTitle(listName);

     var oFields = oList.get_fields();

     var firstField = oFields.addFieldAsXml("<Field  Type='Text' Name='Link' StaticName='Link' DisplayName='Link' />", true, SP.AddFieldOptions.addFieldToDefaultView);
     firstField.set_description("The first field to add");
     firstField.update();

     var secondField = oFields.addFieldAsXml("<Field  Type='Number' Name='DisplayOrder' StaticName='DisplayOrder' DisplayName = 'DisplayOrder'", true, SP.AddFieldOptions.addFieldToDefaultView);
     secondField.set_description("The second field to add");
     secondField.update();    

     // Execute the query to the server.
    clientContext.executeQueryAsync(onsuccess, onfailed);
}

function onsuccess(data){
    alert('fields created');
}
function onsuccess(data){
   alert('error while creating fields');
}