Filtered config options based on variable value

Jun 19, 2012 at 3:50 PM

Hi Matt.  I'm trying to implement your library into the solution I posted to SPServices' discussion board and I'm wondering how you can filter your CAML segments based on if another variable contains X.  I'm sure I'm overlooking a javascript rule so any advice is welcome.  

$(document).ready(function() {

// go button functionality
$("#calFilterGo").click(function(){
var boxesChecked = $("input:checkbox:checked");
// setup local array variable
var boxesValues=[];
boxesChecked.each(function(index){
boxesValues[index]=boxesChecked[index].value;
});
// generate CAML using roboCAML sending array along with it
generateCAML(boxesValues);
});

});

function generateCAML(boxesValues) {
alert("into CAML builder");
calFilterVar = (
roboCAML.Query({
listName: "CEEP-CoporateCalendar",
closeCaml: "SPServices",
OrderBy: {
EventDate: true
},
config: [
{
filter: "&&",
op: ">=",
staticName: "EventDate",
value: [Today]
},
if ($(boxesValues).contains("Company")){
{
filter: "||",
op: "=",
staticName: "CorpCalCategory",
value: "Company"
},
}
{
filter: "||",
op: "=",
staticName: "CorpCalCategory",
value: "Volunteer Opportunities"
},
{
filter: "||",
op: "=",
staticName: "CorpCalCategory",
value: "Customer"
},
{
filter: "||",
op: "=",
staticName: "CorpCalCategory",
value: "MAP"
},
{
filter: "||",
op: "=",
staticName: "CorpCalCategory",
value: "WAP"
},
{
filter: "||",
op: "=",
staticName: "CorpCalCategory",
value: "TEAM"
}
]
})
);
// clear previous items before loading new function
$("#filteredCalendarView").empty();
// load new function with correct caml variable
getFilteredCalendar(calFilterVar);
}

The variable is derived from some script generating some HTML checkboxes like so:

function AddFilterAreaHTML(){	
	// find the element with the ID below and append the following to its tag
	$("#CalFilter").append( "<h3 class='CalFilterHead'>Corporate Calendar</h3>"+
							"<input type='checkbox' name='CompanyFilter' id='CompCB' value='Company' checked='checked'/> Company<br/>" +
							"<input type='checkbox' name='VolunteerFilter' id='VolCB' value='Volunteer Opportunities' checked='checked'/> Volunteer Opportunities<br/>" +
							"<input type='checkbox' name='CustomerFilter' id='CustCB' value='Customer' checked='checked'/> Customer <br/>" +
							"<input type='checkbox' name='MAPFilter' id='MAPCB' value='MAP' checked='checked'/> MAP<br/>" +
							"<input type='checkbox' name='WAPFilter' id='WAPCB' value='WAP' checked='checked'/> WAP<br/>" +
							"<input type='checkbox' name='TEAMFilter' id=TEAMCB' value='TEAM' checked='checked'/> TEAM<br/>"+
							"<a class='GlobalButton3_GY' href='#' id='calFilterGo'><span>Go</span></a>"
	);
}

Coordinator
Jun 19, 2012 at 6:47 PM

When creating something like this, I like to create my object initially instead of calling the function and passing the object as a parameter.  This will allow you more flexibility with the "config" portion.  An example of that would be:

 

if ($(boxesValues).contains("Company")){
	config.push({
		filter: "||",
		op: "=",
		staticName: "CorpCalCategory",
		value: "Company"
	});
}

With that said, I've updated your code and have totally *NOT* tested it.  It should give you a good example of how to use this library in a dynamic way:

//Polyfill in case toISOString doesn't exist

//You may have to tweak this function to produce the correct result
//I've not tested this at all...
if ( !Date.prototype.toISOString ) {
	Date.prototype.toISOString = function ( d ) {
		function pad( n ) {
			return n < 10 ? 
				'0'+n : 
				n
			;
		}
		return d.getUTCFullYear()+'-'
			+ pad(d.getUTCMonth()+1)+'-'
			+ pad(d.getUTCDate())+'T'
			+ pad(d.getUTCHours())+':'
			+ pad(d.getUTCMinutes())+':'
			+ pad(d.getUTCSeconds())+'Z'
		;
	}
}

$(document).ready(function() {
	var config = [],
		camlOpts = {
			listName: "CEEP-CoporateCalendar",
			closeCaml: "SPServices",
			OrderBy: {
				EventDate: true
			}
		},
		currDate = new Date()
	;
	// go button functionality
	$("#calFilterGo").click(function(){
		var boxesChecked = $("input:checkbox:checked");
		// setup local array variable
		var boxesValues=[];
		boxesChecked.each(function(index){
			boxesValues[index]=boxesChecked[index].value;
		});
		
		//Build up config options
		config.push({
			filter: "&&",
			op: ">=",
			staticName: "EventDate",
			value: currDate.toISOString()
		});

		if ( $(boxesValues).contains("Company") ) {
			config.push({
				filter: "||",
				op: "=",
				staticName: "CorpCalCategory",
				value: "Company"
			});
		}
		
		config.push({
				filter: "||",
				op: "=",
				staticName: "CorpCalCategory",
				value: "Volunteer Opportunities"
			},
			{
				filter: "||",
				op: "=",
				staticName: "CorpCalCategory",
				value: "Customer"
			},
			{
				filter: "||",
				op: "=",
				staticName: "CorpCalCategory",
				value: "MAP"
			},
			{
				filter: "||",
				op: "=",
				staticName: "CorpCalCategory",
				value: "WAP"
			},
			{
				filter: "||",
				op: "=",
				staticName: "CorpCalCategory",
				value: "TEAM"
			}
		);
		
		//Stuff config array into camlOpts
		camlOpts.config = config;
		
		// generate CAML using roboCAML sending array along with it
		generateCAML(camlOpts);
	});
});

function generateCAML(camlOpts) {
	alert("into CAML builder");
	calFilterVar = roboCAML.Query( camlOpts );
	// clear previous items before loading new function
	$("#filteredCalendarView").empty();
	// load new function with correct caml variable
	getFilteredCalendar(calFilterVar);
}

When starting out with code, it's much easier to start small and then add complexities.  It may be very helpful for you to try and get the CAML to generate first, then add the dynamic portion into your script.

Let me know how it goes and if you have specific questions about the syntax.

Cheers,

Matt