Clever Geek Handbook

SHAREPOINT 2013: How can I update a site column with array content using javascript CSOM?

I am relatively new to Sharepoint 2013, I am trying to update the content of the site column with the content of the array, I can get and render the content of the column of my site, the user can change and save the required part, and the changes will be saved to the array, now I need to update the content of the site column with the content of the array but for some reason I can't do it, any suggestion / example? This is my code so far to get, render the site column and store the mofication in my array.

<body>
        <select id="dropdown" name="dropdown" onchange="optSelect()">
            <option value="EngineType_Cylinders">EngineType_Cylinders</option>
            <option value="EngineType_EngineCycle">EngineType_EngineCycle</option>
            <option value="EngineType_EngineFamily">EngineType_EngineFamily</option>
            <option value="EngineType_Euro">EngineType_Euro</option>
            <option value="EngineType_FamilyEvolution">EngineType_FamilyEvolution</option>
            <option value="EngineType_GasEmissionLevel">EngineType_GasEmissionLevel</option>
            <option value="EngineType_Power">EngineType_Power</option>
            <option value="EngineType_PowerSupply">EngineType_PowerSupply</option>
            <option value="EngineType_Use">EngineType_Use</option>
        </select><br />

        <textarea id="textareadisplay" rows="25" cols="23"></textarea><br />
        <input type ="button" value="Update values" onclick="addItemsToColumns()" />
    </body>

My Javascript

$(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(Function.createDelegate(this, function () {
       var select = document.getElementById('dropdown').value;
        console.log(select);
        getSiteColumns(select);

    }), 'SP.js');
});

var fieldChoice;
var choices;
var addFields = [];
var slc;
var clientContext;

function optSelect() {
    slc = document.getElementById('dropdown').value;
    getSiteColumns(slc);
}

function getSiteColumns(selection) {
   clientContext = SP.ClientContext.get_current();
    if (clientContext != undefined && clientContext != null) {

        var web = clientContext.get_web();

        fieldChoice = clientContext.castTo(web.get_availableFields().getByTitle(selection), SP.FieldChoice);

        clientContext.load(this.fieldChoice);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.OnLoadSuccess), Function.createDelegate(this, this.OnLoadFailed));
    }
}

function OnLoadSuccess(sender, args) {
    choices = fieldChoice.get_choices();
    var textarea = document.getElementById("textareadisplay");
    textarea.value = choices.join("\n");

}

function OnLoadFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function addItemsToColumns() {
    clientC = SP.ClientContext.get_current();
    var arrayForUpdate = $('#textareadisplay').val().split('\n');
    fieldChoice.set_item(, arrayForUpdate);
    fieldChoice.update();
    clientContext.executeQueryAsync(function () { }, function () { });


}

function OnUpdateSuccess(sender, args) {
    var newchoices = fieldChoice.get_choices();

}

My problem is the addItemsToColumns () function, please help! Thanks in advance.

+3


source to share


1 answer


Modified example

The following modified example should do the trick:

SP.SOD.executeFunc('SP.js', 'SP.ClientContext', function() {
     var fieldName = $('#dropdown').find(":selected").text();   //get selected column
     populateValues(fieldName);
});


function populateValues(fieldName)
{
    getFieldChoice(fieldName,
      function(field){
           var values = field.get_choices();             
           $("textarea#textareadisplay").val(values.join("\n"));
      },
      function(sender,args){
         console.log(args.get_message());  //handle errors..
      });
}



function addItemsToColumns() {
    var fieldName = $('#dropdown').find(":selected").text();   //get selected column
    var values = $('textarea#textareadisplay').val().split('\n');
    updateFieldChoice(fieldName,values,
       function(field){
         console.log(String.format('{0} field has been updated',fieldName)); 
      },
      function(sender,args){
         console.log(args.get_message());  //handle errors..
      });
}



//SharePoint specific function for getting choice column 
function getFieldChoice(fieldTitle,success,failure) {
    var ctx = SP.ClientContext.get_current();
    var web = ctx.get_web();
    var fieldChoice = ctx.castTo(web.get_fields().getByTitle(fieldTitle), SP.FieldChoice);
    ctx.load(fieldChoice);
    ctx.executeQueryAsync(
         function(){
            success(fieldChoice)
         },
         failure);
}

//SharePoint specific function for updating choice column
function updateFieldChoice(fieldTitle,choiceValues,success,failure) {
    var ctx = SP.ClientContext.get_current();
    var web = ctx.get_web();
    var fieldChoice = ctx.castTo(web.get_fields().getByTitle(fieldTitle), SP.FieldChoice);
    fieldChoice.set_choices(choiceValues);
    fieldChoice.update();
    ctx.executeQueryAsync(
         function(){
            success(fieldChoice)
         },
         failure);
}


Some recommendations

  • Prefers SP.SOD.executeFunc

    more SP.SOD.executeOrDelayUntilScriptLoaded

    since it supports loading demand scenarios
  • Avoid global variables
+1


source






More articles:


All Articles