jSPoint - JavaScript Library for SharePoint

Project Description
JavaScript for SharePoint (jSPoint) is a library that help SharePoint developers to create rich,dynamic, & powerfull pages for SharePoint sites.

Certified for WSS3 & MOSS2007.

Tested with IE, Firefox, & Chrome.


News

• 22.03.2012

New release : v0.2.1

Bug Fix : Field name with latin caracters

• 13.02.2011

New release : v0.2.0

New classes : jSPoint.ajax, jSPoint.spUser, jSPoint.spList
New methods : jSPoint.spFieldUser.autoComplete(), jSPoint.spFieldLookup.cascadingFilter()

Demo

Launch in another window

Launch in another window

Install
jSPoint need jQuery (>= 1.4.2) & jQueryUI (>= 1.8.9) libraries to work properly.

Upload scripts on your SharePoint Site and include them in your html source page.

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="script/jSPoint-0.1.0.min.js"></script>

Example
You want to create a SharePoint list to collect interests of your users.

Your want to collect interests not listed in your MultiChoiceField. So, you create a TextField for collect them.

Let's see how you can make your Form interactive.

• Javascript code

$(document).ready(function() {
	// Create Field objects
	var interests = new jSPoint.spFieldMultiChoice("Interests");
	var otherInterest = new jSPoint.spFieldText("Other Interests");
	
	// Initial state of otherInterest
	otherInterest.show(false);
	otherInterest.getInput().attr("style", "background-color: red;");
	
	// Handle updated value of interests & show otherInterest if 'Other' checked
	interests.onValueUpdated(function() {
		var regExOther = new RegExp("Other");
						
		if (regExOther.exec(interests.getFieldValue()) != null) {
			otherInterest.show(true);
		}
		else {
			otherInterest.show(false);
		}
	});
	
	// Handle updated value of otherInterest & change background color
	otherInterest.onValueUpdated(function() {
		if (otherInterest.getFieldValue().length === 0) {
			otherInterest.getInput().attr("style", "background-color: red;");
		}
		else {
			otherInterest.getInput().attr("style", "background-color: white;");
		}
	});
});

• Result

Launch in another window