This is a process of getting a drop down values from a SharePoint list. This is the beginning of the Cascade drop down process but just for

12/8/2016 - 10:25 PM

This is a process of getting a drop down values from a SharePoint list. This is the beginning of the Cascade drop down process but just for

This is a process of getting a drop down values from a SharePoint list. This is the beginning of the Cascade drop down process but just for one drop down.

JS SP Dropdown1.js

//Three dropdowns with a SharePoint backend and a table and row creation

function init()
{
	
			//Page loades and the incrementor is created
			var $containterDiv = $('#inspectionContainer');
			Incrementor.createIncrSpan($containterDiv);
			var incrementorSpan = $('#incrementor');
			//the initial table is created
			var dataTable = Table.createTable($containterDiv);
			//first cascade row is created
			CascadeRow.init(incrementorSpan,dataTable);
            //a shipyard is selected, the cranes appear and a label is added that says "select a crane"
            //a crane is selected, the systems appear and a label is added that says "Select a system"
            //a system is selected, the discracies appear
            //a button is clicked and a new row is created
            //when a new row is create the incrementer is incremented
            //when a new row is created an initial dropdown is created
}

var CascadeRow = (function (){
	//jQuery is required
	var dropDownDiv;
	var listName = 'CraneInspectionLookup';
	var rowNum;
	
	//this gets the incrementor span and the data table
	var init = function($incrementorSpan,datatable){	
		var incrementorValue = $incrementorSpan.attr('incrementor');
		//the first shipyard dropdown is created
		var tr = datatable.insertRow();
		tr.setAttribute('incrementor',incrementorValue);
		var td = tr.insertCell();
		td.id = 'ShipyardCell' + incrementorValue;		
		createDropDown('Shipyard' + incrementorValue,td,false);
		var $dropDown = $('#Shipyard' + incrementorValue);
		var camlParent = '<View><Query><OrderBy><FieldRef Name=\'Shipyard\' Ascending=\'TRUE\'/></OrderBy></Query></View>';
		getDropDownData($dropDown,camlParent, 'Shipyard');
		createShipyardChangeEvent($dropDown);
		Table.createCell(tr,'Select a shipyard','CraneNumberCell' + incrementorValue);
	};
	var createDropDown = function(dropDownID,containingDiv, disable){
		//create the select
		var selectList = document.createElement('select');
		selectList.id = dropDownID;
		//add the option
		var option = document.createElement('option');
		option.setAttribute('value','Select');
		var t = document.createTextNode("Select");
		option.appendChild(t);
		selectList.appendChild(option);
		//add to the parent div
		if(disable){
			selectList.disabled = true;
		}
		//containingDiv.append(selectList);
		containingDiv.appendChild(selectList);
	};
	
	var getDropDownData = function($dropDown,queryText,fieldName){
		getSPData(false,queryText).then(
            function (listItems) {
                var listItemEnumerator = listItems.getEnumerator();
                while (listItemEnumerator.moveNext()) {
                    var listItem = listItemEnumerator.get_current();
                    var listItemText = listItem.get_item(fieldName);
                    if(!selectContains($dropDown,listItemText)){
	                    var option = document.createElement('option');
	                    option.setAttribute('value',listItemText);
	                    var t = document.createTextNode(listItemText);
	                    option.appendChild(t);
	                    $dropDown.append(option);
                    }
                }
            },
            function (sender, args) {
                alert('An error occured while retrieving list items:' + args.get_message());
            }
        );
	};
	
	var getSPData = function(allItems,queryText){
		//allItems = true or false.
		//use of $.Deferred in the executeQueryAsync delegate allows the consumer of this method to write 'syncronous like' code
		var deferred = $.Deferred();
		var clientContext = new SP.ClientContext.get_current();
		var list = clientContext.get_web().get_lists().getByTitle(listName);
		var camlQuery;
		if(allItems)
		{
			camlQuery = SP.CamlQuery.createAllItemsQuery();
		}
		else
		{
			camlQuery = new SP.CamlQuery();
			camlQuery.set_viewXml(queryText);
		}
		var items = list.getItems(camlQuery);
		clientContext.load(items);
		clientContext.executeQueryAsync(
			Function.createDelegate(this,
				function () { deferred.resolve(items); }),
			Function.createDelegate(this,
				function (sender, args) { deferred.reject(sender, args); }));

		return deferred.promise();
	};
	
	var createShipyardChangeEvent = function(dropDown){
		dropDown.change(function(e){
			var value = e.currentTarget.value;
			//clear the default text
			var tdCurrent = e.currentTarget.parentElement;
			//create the dropdown
			var tr = tdCurrent.parentElement;
			var incrementor = tr.getAttribute('incrementor');
			var td = tr.cells.namedItem('CraneNumberCell' + incrementor);
			td.innerHTML='';
			createDropDown('CraneNumber' + incrementor,td,false);
			var $dropDown = $('#CraneNumber' + incrementor);
			//fill the dropdown
			var queryText = '<View><Query><OrderBy><FieldRef Name=\'CraneNumber\'/ Ascending=\'TRUE\'/></OrderBy><Where>' +
					'<Eq><FieldRef Name=\'Shipyard\'/><Value Type=\'Text\'>' + value + '</Value></Eq></Where></Query></View>';
			getDropDownData($dropDown,queryText,'CraneNumber');
			createCraneNumberChangeEvent($dropDown);
			Table.createCell(tr,'Select a crane number','CraneSystemCell' + incrementor);
		});//end change event
	};
	
	var createCraneNumberChangeEvent = function(dropDown){
		dropDown.change(function(e){
			var value = e.currentTarget.value;
			//clear the default text
			var tdCurrent = e.currentTarget.parentElement;
			//create the dropdown
			var tr = tdCurrent.parentElement;
			var incrementor = tr.getAttribute('incrementor');
			var td = tr.cells.namedItem('CraneSystemCell' + incrementor);
			td.innerHTML='';
			var tdShipyard = tr.cells.namedItem('ShipyardCell' + incrementor);
			var tdShipyardValue = tdShipyard.childNodes[0].value;
			createDropDown('CraneSystem' + incrementor,td,false);
			var $dropDown = $('#CraneSystem' + incrementor);
			//fill the dropdown
			var queryText = '<View><Query><OrderBy><FieldRef Name=\'CraneSystem\'/ Ascending=\'TRUE\'/></OrderBy><Where><And>' +
					'<Eq><FieldRef Name=\'Shipyard\'/><Value Type=\'Text\'>' + tdShipyardValue + '</Value></Eq>' + 
					'<Eq><FieldRef Name=\'CraneNumber\'/><Value Type=\'Text\'>' + value + '</Value></Eq>' + 
		        	'</And></Where></Query></View>';
			getDropDownData($dropDown,queryText,'CraneSystem');
			createCraneSystemChangeEvent($dropDown);
			Table.createCell(tr,'Select a crane system','CraneDiscrepancyCell' + incrementor);
		});//end change event
	};
	
	var createCraneSystemChangeEvent = function(dropDown){
		dropDown.change(function(e){
			var value = e.currentTarget.value;//this is the system cell
			//clear the default text
			var tdCurrent = e.currentTarget.parentElement;
			//create the dropdown
			var tr = tdCurrent.parentElement;
			var incrementor = tr.getAttribute('incrementor');
			var td = tr.cells.namedItem('CraneDiscrepancyCell' + incrementor);
			td.innerHTML='&nbsp;';
			var tdShipyard = tr.cells.namedItem('ShipyardCell' + incrementor);
			var tdShipyardValue = tdShipyard.childNodes[0].value;
			var tdCraneNumber = tr.cells.namedItem('CraneNumberCell' + incrementor);
			var test = tdCraneNumber.childNodes[0];
			var tdCraneNumberValue = tdCraneNumber.childNodes[0].value;

			createDropDown('CraneDiscrepancy' + incrementor,td,false);
			var $dropDown = $('#CraneDiscrepancy' + incrementor);
			//fill the dropdown
			var queryText = '<View><Query><OrderBy><FieldRef Name=\'CraneDiscrepancy\'/ Ascending=\'TRUE\'/></OrderBy><Where><And>' +
					'<Eq><FieldRef Name=\'Shipyard\'/><Value Type=\'Text\'>' + tdShipyardValue + '</Value></Eq>' + 
					'<Eq><FieldRef Name=\'CraneNumber\'/><Value Type=\'Text\'>' + tdCraneNumberValue + '</Value></Eq></And>' + 
					'<And><Eq><FieldRef Name=\'CraneSystem\'/><Value Type=\'Text\'>' + value + '</Value></Eq></And>' +
		        	'</Where></Query></View>';
			getDropDownData($dropDown,queryText,'CraneDiscrepancy');
			//createCraneSystemChangeEvent($dropDown);
			//Table.createCell(tr,'Select a crane system','CraneDiscrepancyCell' + incrementor);
		});//end change event
	};
	
	var selectContains = function($selectElement,value) {
		var options = $selectElement.find('OPTION');
    	for ( var i = 0, l = options.length; i < l; i++ ) {
        	if (options[i].value == value) {
            	return true;
        	}
    	}
    	return false;
	};

	//changeDropDown(value){
	
	//};
	
	return{
		init:init
	};
})();//end cascade

var Incrementor = (function (){
	var createSpan = function($divRef){
		var span = document.createElement('span');
		span.setAttribute('incrementor',0);
		span.setAttribute('id','incrementor');
		$divRef.append(span);
	};
	
	var testSpan = function(test){
		alert(test);
	};

	return {
    //publicMethod: function () {
      //testSpan('in the private function');
    //}
    publicMethod:testSpan,
    createIncrSpan:createSpan
  };
})();


var Table = (function(){
	var createTable = function($divRef){
        tbl  = document.createElement('table');
    	tbl.style.width  = '100px';
    	tbl.style.border = '1px solid black';
    	tbl.setAttribute('id','dataTable');


		var trHeader = tbl.insertRow();
		createCell(trHeader,'Shipyard','headerShipyard');
		createCell(trHeader,'Crane Number','headerCraneNumber');
	    createCell(trHeader,'Crane System','headerCraneSystem');
	    createCell(trHeader,'Crane Discrepancy','headerCraneDiscrepancy');
	    
	    //var trFirstRow = tbl.insertRow();
		//createCell(trFirstRow,'Shipyard');
		//createCell(trFirstRow,'Crane Number');
	    //createCell(trFirstRow,'Crane System');
	    //createCell(trFirstRow,'Crane Discrepancy');

	    $divRef.append(tbl);
	    return(tbl);
   	}//end create table
	
	function createCell(row, celltext, id)
	{
		var tdh3 = row.insertCell();
		tdh3.appendChild(document.createTextNode(celltext));
	    tdh3.style.border = '1px solid black';
	    tdh3.id = id;
	    
	}//end createRow
	
	return{
		createTable:createTable,
		createCell:createCell
	};
})();

JS SP Dropdown.js

var CascadeType = (function (){
	//jQuery is required
	var dropDownDiv;
	var listName = 'Monitor Log Data';
	
	var init = function(){
		//alert('here');
		dropDownDiv = $('#CascadeDropDowns');
		dropDownParentDiv = dropDownDiv.find("#parentDiv");
		dropDownChildDiv = dropDownDiv.find("#childDiv");
		var listName = 'Monitor Log Lookups';
		createDropDown('parentDropDown',dropDownParentDiv,false);
		createDropDown('childDropDown',dropDownChildDiv,true);
		var camlParent = '<View><Query><OrderBy><FieldRef Name=\'Category\' Ascending=\'TRUE\'/></OrderBy><Where><Eq><FieldRef Name=\'Category\'/>' + 
		        '<Value Type=\'Text\'>Briefing</Value></Eq></Where></Query></View>';
		//var dd = dropDownParentDiv.find('#parentDropDown');
		getDropDownData(dropDownParentDiv.find('#parentDropDown'),camlParent);
		createParentChangeEvent(dropDownParentDiv.find('#parentDropDown'));
	};
	var createDropDown = function(dropDownID,containingDiv, disable){
		//create the select
		var selectList = document.createElement('select');
		selectList.id = dropDownID;
		//add the option
		var option = document.createElement('option');
		option.setAttribute('value','Select');
		var t = document.createTextNode("Select");
		option.appendChild(t);
		selectList.appendChild(option);
		//add to the parent div
		if(disable){
			selectList.disabled = true;
		}
		containingDiv.append(selectList);
	};
	
	var getDropDownData = function(dropDown,queryText){
		getSPData(false,queryText).then(
            function (listItems) {
                var listItemEnumerator = listItems.getEnumerator();
                while (listItemEnumerator.moveNext()) {
                    var listItem = listItemEnumerator.get_current();
                    var listItemText = listItem.get_item("Category");
                    if(!selectContains(dropDown,listItemText)){
	                    var option = document.createElement('option');
	                    option.setAttribute('value',listItemText);
	                    var t = document.createTextNode(listItemText);
	                    option.appendChild(t);
	                    dropDown.append(option);
                    }
                }
            },
            function (sender, args) {
                alert('An error occured while retrieving list items:' + args.get_message());
            }
        );
	};
	
	var getSPData = function(allItems,queryText){
		//allItems = true or false.
		//use of $.Deferred in the executeQueryAsync delegate allows the consumer of this method to write 'syncronous like' code
		var deferred = $.Deferred();
		var clientContext = new SP.ClientContext.get_current();
		var list = clientContext.get_web().get_lists().getByTitle(listName);
		var camlQuery;
		if(allItems)
		{
			camlQuery = SP.CamlQuery.createAllItemsQuery();
		}
		else
		{
			camlQuery = new SP.CamlQuery();
			camlQuery.set_viewXml(queryText);
		}
		var items = list.getItems(camlQuery);
		clientContext.load(items);
		clientContext.executeQueryAsync(
			Function.createDelegate(this,
				function () { deferred.resolve(items); }),
			Function.createDelegate(this,
				function (sender, args) { deferred.reject(sender, args); }));

		return deferred.promise();
	};
	
	var createParentChangeEvent = function(dropDown){
		dropDown.change(function(e){
			var value = e.srcElement.value;
			alert(value);
			/*var queryText = var caml = 	'<View><Query><OrderBy><FieldRef Name=\'Category\'/ Ascending=\'TRUE\'/></OrderBy><Where><And>' +
					'<Eq><FieldRef Name=\'Category\'/><Value Type=\'Text\'>Shift</Value></Eq>' + 
					'<Eq><FieldRef Name=\'' + dropDownData.childFieldName + '\'/><Value Type=\'Text\'>' + dropDownData.itemKey + '</Value></Eq>' + 
		        	'</And></Where></Query></View>';
			getSPData(false,queryText).then(
            function (listItems) {
                var listItemEnumerator = listItems.getEnumerator();
                while (listItemEnumerator.moveNext()) {
                    var listItem = listItemEnumerator.get_current();
                    var attribute = '<li class="ui-state-default">' + listItem.get_item("AttributeText") + '</li>';
                    $('#attributes').append(attribute);
                }
            },
            function (sender, args) {
                alert('An error occured while retrieving list items:' + args.get_message());
            }
        );*/
		});
	};
	
	var selectContains = function(selectElement,value) {
		var options = selectElement.find('OPTION');
    	for ( var i = 0, l = options.length; i < l; i++ ) {
        	if (options[i].value == value) {
            	return true;
        	}
    	}
    	return false;
	}

	/*changeDropDown(value){
	
	}*/
	
	return{
		init:init
	};
})();//end cascade

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

This is a process of getting a drop down values from a SharePoint list. This is the beginning of the Cascade drop down process but just for