Hello everyone, in this article we are going to look at the script to update the Choice Options in a SharePoint list. Here, I’m going to use SPServices to retrieve all the SharePoint Lists in that site and to get the Choice Columns in those Lists.
For example, If you want to edit any Choice Column in a List, then you need to go to that List -> List Settings -> click on that ‘Choice Column’ -> edit the ‘Options’ -> click on ‘OK’. This is how we do just like the below screenshot
Let’s say if you have more number of SharePoint Lists and there’s more number of Choice columns in those Lists. In this case it will be tedious process if you want to edit some of the Choice field and it will be time consuming. To overcome this, I’ve developed a script to retrieve all the SharePoint lists, Choice column in those lists in a single page and from there you can Insert, Delete, and Update the choices available for that dropdown.
HTML tags used for the above page is given below, Please make sure that you are using SharePoint page where ‘sp.js’ will be loaded.
——————X—————X——————
<script type="text/javascript" src="../SiteAssets/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../SiteAssets/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" src="../SiteAssets/Lists_Choice.js"></script>
<div class="container">
<h2>Choice Column Update</h2>
This section is for PMO admins to update the Options in Choice columns
<br/><br/>
<table class="table1" width="100%">
<tr>
<td><lable>Select the SharePoint List </lable> </td>
<td><select id="ddlLists"></select></td>
</tr>
<tr>
<td width="30%"><lable>Select the Dropdown Column from the above Selected List</lable></td>
<td><select id="ddlChoice"></select></td>
</tr>
<tr>
<td><label>Options available for the above Selected Dropdown Column</label></td>
<td><textarea title="Drop Down Values" ID="txtDD" data-validate="required;textbox"></textarea>
<br/>Type each choice on a separate line</td>
</tr>
<tr>
<td></td>
<td> <input type="button" id="Button1" onclick="ExecuteOrDelayUntilScriptLoaded(UpdateChoices, 'sp.js');" title="Click to Update" value="Update" style="float: none !important" />
<input type="button" id="btnrefresh" onclick="javascript: location.reload(true);" title="Click to Refresh" value="Refresh" style="float: none !important" />
</td>
<td></td>
</tr>
</table>
</div>——————X—————X——————
Please make sure that jquery.SPServices-2014.02.min.js and jquery-1.10.2.js files are referred in the page. Add the below script in the Lists_Choice.js file,
——————X—————X——————
(function () {
$(document).ready(function () {
$("title").html("Choice Column Update");
$('#ddlLists').append("<option value=''>" + "--Select List--" + "</option>");
$('#ddlChoice').append("<option value=''>" + "--Select Choice--" + "</option>");
GetAllLists();
GetAllChoice();
ChoiceValues();
});
} ());
//To get all the Lists in the SharePoint site using SPServices and append the values to <select id="ddlLists"> tag
function GetAllLists() {
$().SPServices({
operation: "GetListCollection",
completefunc: function( xData, Status ) {
if (Status == "success") {
$( xData.responseXML ).find("Lists > List").each(function() {
var $node = $(this);
//If you want only specific Lists, then make use of this "IF" and specify the List name
if( ["Custom",
"Phone",
].indexOf($node.attr("Title")) >= 0) {
appendField = $("#ddlLists");
$(appendField).append("<option value='" + $node.attr("Title") + "'>" + $node.attr("Title") + "</option>");
}
});
}
}
});
}
//To get all the Choice columns based on the selected List using SPServices and append the values to <select id="ddlChoice"> tag
function GetAllChoice() {
$('#ddlLists').change(function() {
var listName = $(this).val();
$('#ddlChoice').empty();
$('#txtDD').empty();
$('#ddlChoice').append("<option value=''>" + "--Select Choice--" + "</option>");
$().SPServices({
operation: "GetList",
listName: listName,
completefunc: function (xData, Status) {
$(xData.responseXML).find("Fields > Field").each(function() {
if($(this).attr("Type") === "Choice") {
$('#ddlChoice').append("<option value='" + $(this).attr("DisplayName") + "'>" + $(this).attr("DisplayName") + "</option>");
}
});
}
});
});
}
//Append the Choice values in a <textbox id="txtDD"> Textbox based on the selected choice
function ChoiceValues() {
$('#ddlChoice').change(function() {
var listName = $('#ddlLists :selected').val();
var choiceName = $(this).val();
$('#txtDD').empty();
$().SPServices({
operation: "GetList",
listName: listName,
completefunc: function (xData, Status) {
$(xData.responseXML).find("Field[DisplayName='" + choiceName +"'] CHOICE").each(function() {
$('#txtDD').append($(this).text() + "n");
});
}
});
});
}
//Updating the Choice value using JS Client Object Model
function UpdateChoices() {
var listName = $('#ddlLists :selected').val() || "";
var choiceName = $('#ddlChoice :selected').val() || "";
var newOptions = $('#txtDD').val() || "";
if(listName != "" && choiceName != "" && newOptions != "") {
var newOptionsArray = [];
var lines = newOptions.split(/n/);
for (var i=0; i < lines.length; i++) {
//Avoiding empty lines
if (/S/.test(lines[i])) {
newOptionsArray.push($.trim(lines[i]));
}
}
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var cldList = web.get_lists().getByTitle(listName);
var categoryField = cldList.get_fields().getByInternalNameOrTitle(choiceName);
var categoryChoiceField = context.castTo(categoryField, SP.FieldChoice);
context.load(categoryChoiceField);
context.executeQueryAsync(function () {
categoryChoiceField.set_choices(newOptionsArray);
categoryChoiceField.updateAndPushChanges();
context.executeQueryAsync(function () {
alert(choiceName + ' choice column updated successfully.');
},
function () {
alert('Error in updating the choice column');
});
}, function () {
alert('Error in updating the choice column');
});
}
else {
alert('Please select the list and choice');
}
}——————X—————X——————
Now I can easily update any dropdown options available in the SharePoint lists.
After click on Update it will update the Dropdown options in that list.
I hope this article will be helpful for the readers who needs to Insert, Delete and Update dropdown choice columns quickly and easily. Thank you for reading.
Happy Coding
Ahamed
Leave a comment