Create Auto-Incrementing Code Numbers (Part 3)

Having created the required Request Number and lookup lists, and added a custom form that will create the new request number items, we are now ready to begin writing our code.

RequestNumbers.js

Our code will be added to the Request Number list’s new item form by attaching a JavaScript include file to a Content Editor web part. To do this, create a document library named Scripts and upload the jQuery and SP Services libraries to it. Make sure the versions of jQuery and SPServices are compatible with each other by reading the Important notes section on the SPServices page. Create a text file and name it RequestNumber.js. At the top of the file, add references to the jQuery and SP Services libraries and a main script tag with the jQuery document ready function.





Create a custom New Item Form

Within the document ready function, start off by declaring the global variables:

//Declare variables
var $AptCode; //value of Airport Code field
var $DptCode; //value of Department Code field
var $DptCodeName; //value of Department Code field
var AptChar; //value of Airport Code used as first trio of characters of Request Number
var DeptChar; //value of Department Code used as second trio of characters of Request Number
var ReqNoBeginsWith;  //combination of AptChar and DeptChar. Used to find the next available Request Number with that particular combination.
var ReqNumCharNoPad;  //value of next available number for the selected AptChar + DeptChar combination without padding
var ReqNumChar; //Five-digit value of next available number for the selected AptChar + DeptChar combination after padding (leading 0s)

Construct the Airport Code drop-down control

Now write a function which uses SPServices to read all of the items in the AirportCodes list. The data needed to construct each option of the drop-down control is contained in the “DisplayName” and “AirportCode” columns. The value of DisplayName will be used as the selectable airport name in the drop-down and AirportCode will be the actual value of the option passed on by the control:

//Creates a new drop-down list of Airport Codes by querying (with SP Services) the Airport Codes lookup column
function AptCodeSelect() {
//Caml query to filter for all items in Airport Code lookup field
var myCAML = "";
//Use SP Services GetListItems to retrieve the values filtered by the Caml query above
$().SPServices({ 
operation: "GetListItems", 
	CAMLQuery: myCAML,
	async: false,
	listName: "Airport Codes",
	completefunc: function (xData, Status) { 
	$(xData.responseXML).SPFilterNode("z:row").each(function() {
		//alert("xData = " + xData.responseText); //Uncomment to debug
		//jQuery: Build an option tag with each pair of DisplayName and AirportCode
var optionHtml = "";
		// jQuery: Add the option tag to the select tag
		$("select#AptCodeSelect").append(optionHtml);
	});
}
})};
//Call the function to create the drop-down list		
AptCodeSelect();

Construct the Department Code drop-down control

Ditto for the Department control. The value of “DepartmentName” serves as the selectable department name in the drop-down and DepartmentCode will be the value of the option posted by the control:

//Creates a new drop-down list of Department Codes by querying (with SP Services) the Department lookup column
function DptCodeSelect() {
//Caml query to filter for all items in Department lookup field
var myCAML = "";
//Use SP Services GetListItems to retrieve the values filtered by the Caml query above
$().SPServices({ 
	operation: "GetListItems", 
	CAMLQuery: myCAML,
	async: false,
	listName: "Departments",
	completefunc: function (xData, Status) { 
	$(xData.responseXML).SPFilterNode("z:row").each(function() {
		//alert("xData = " + xData.responseText); //Uncomment to debug
		//Build an option tag with each pair of DepartmentCode and DepartmentName
var optionHtml = "";
		//Add the option tag to the select tag
		$("select#DptCodeSelect").append(optionHtml);
		});
} 
})};
//Call the function to create the drow-down list		
DptCodeSelect();

Find the next available code number.

Our request number will begin with a code composed of six letters, three of which correspond to the Airport Code selected by the user in the Airport drop-down control and the other three corresponding to the selected option in the Department control, separated by a comma. These will be followed by the next available number for that particular combination of Airport Code and Department. The first time a request number with a unique letter code is created, the 5-digit number 00001 will be appended to the letter code, e.g. YXX-DEV-00001. The function below determines the next available number by finding all request codes that match the user’s selection of airport code and department (“YXX-DEV”), and counts them in order to determine the next available number.

//Finds the value of the next available number for the selected AptChar + DeptChar combination. The variable ReqNoBeginsWith is composed of AptChar + DeptChar separated by a hyphen.
function ReqNum(ReqNoBeginsWith) {
	//CAML Query filters Request Number with value of ReqNoBeginsWith
var myCAML = "" + ReqNoBeginsWith + "";

	var k = 0; //Counter set to 0
	$().SPServices({ 
		operation: "GetListItems", 
		CAMLQuery: myCAML,
		async: false, 
		listName: "Request Number",
		completefunc: function (xData, Status) { 
			//alert("xData = " + xData.responseText); //Uncomment to debug 
			$(xData.responseXML).SPFilterNode("z:row").each(function() {
				k += 1; //increment the counter by 1 for each matching element					
			});
		} 
	});
//Increment the final count "k" by 1 to find the next available number
	var myNewK = k + 1;
	alert("myNewK=" + myNewK)
	return myNewK;
};

Add leading zeros to the number

The following function uses recursion to pad the next available number with leading zeros. The “max” variable sets the number of digits desired, which in our case will be set to five.

//Adds leading zeros to the next available number to make it a 5-digit number (variable max). Uses Javascript recursion.
function pad (str, max) {
return str.length < max ? pad("0" + str, max) : str;
}

We now have the functions that will generate the three parts of our Request Number: the three letter Airport Code, the three-letter Department Code, and the five-digit next available number. In our next post we will be writing the functions that read the user input in the drop-down controls and tie the three parts of the Request Number together.

March 26, 2013