Skip to content

Instantly share code, notes, and snippets.

@joerodgers
Last active February 26, 2022 05:30
Show Gist options
  • Save joerodgers/95f65cf0ce68b71bab4511b1d1f2438e to your computer and use it in GitHub Desktop.
Save joerodgers/95f65cf0ce68b71bab4511b1d1f2438e to your computer and use it in GitHub Desktop.
JSOM code that will populate a dropdown box with field values from a SharePoint List.
<script type="text/javascript">
var updateQueryString = null;
$(document).ready(function() {
// customize these variables
var _dropDownId = "applicationNames"; // this must match the ID of the select element placed on the wiki page (<select id="applicationNames">></select>)
var _listTitle = "Applications"; // title of the list that stores the items to display in the list
var _displayFieldInternalName = "App_x0020_Name"; // this the internal name of the field that stores the values to display in the dropdown
var _valueFieldInternalName = "lookup"; // this the internal name of the field that stores the values to display in the dropdown
var _queryStringKey = "application"; // query string key value, this must match the web part filter config
// should not have to change anything below this point
var _listItems = null;
var _select = $('<select>');
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', onSharePointReady);
function populateApplicationList(sender, args)
{
var listItem;
var enumerator = _listItems.getEnumerator();
var valueField;
var displayField;
// clear all options
$("#" + _dropDownId).empty()
// add default option
// $("<option value=''>Select an Application</option>").appendTo("#" + _dropDownId)
// add each application
while ( enumerator.moveNext() )
{
listItem = enumerator.get_current();
displayField = listItem.get_item(_displayFieldInternalName).get_description(); // use the description form the URL field
valueField = listItem.get_item(_valueFieldInternalName); // this field value could be null
if( valueField != null)
{
// pull the value from the lookup field
valueField = valueField.get_lookupValue();
}
else
{
// sometimes the lookup field is empty, so fall back to display field value
valueField = displayField;
}
$("<option value='" + valueField + "'>"+ displayField + "</option>").appendTo("#" + _dropDownId)
}
}
function logErrorMessage(sender, args)
{
console.error("EXCEPTION QUERYING LIST ITEMS: " + args.get_message());
}
function onSharePointReady()
{
var context = SP.ClientContext.get_current();
var listId = _spPageContextInfo.pageListId;
var list = context.get_web().get_lists().getByTitle(_listTitle);
var caml = new SP.CamlQuery();
caml.set_viewXml("<View><Query><OrderBy><FieldRef Name='" + _displayFieldInternalName + "' Ascending='True' /></OrderBy></Query><ViewFields><FieldRef Name='" + _displayFieldInternalName + "' /><FieldRef Name='" + _valueFieldInternalName + "' /></ViewFields><QueryOptions /></View>");
_listItems = list.getItems(caml);
context.load(_listItems);
context.executeQueryAsync(populateApplicationList, logErrorMessage);
}
updateQueryString = function (){
var queryStringValuePairs = {};
if( $( "#" + _dropDownId + " option:selected" ).index() > 0)
{
$.each(document.location.search.substr(1).split('&'),function(c,q){
var i = q.split('=');
if( i[0].length > 0)
{
queryStringValuePairs[i[0].toString()] = i[1].toString();
}
});
queryStringValuePairs[_queryStringKey] = $( "#" + _dropDownId + " option:selected" ).val().toLowerCase();
var newUrl = document.location.href.split('?')[0]
newUrl = newUrl + "?" + $.param(queryStringValuePairs)
window.location.href = newUrl;
}
}
// add onChange event to drop down, SharePoint may strip out the javascript
$( "#" + _dropDownId ).on( "change", function () {
updateQueryString();
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment