Project Description
jPoint is an open source javascript API and script deployment framework for Sharepoint. It leverages the speed and agility of jQuery to manipulate Sharepoint forms and pages, communicate to Sharepoint webservices, and to build jPart plugins. Read more to discover what jParts are.

jPoint version 0.8 has been released and it is now in BETA.

To get started, all you need to do is include the following on a SharePoint page: <script src=//sharejpoint.googlecode.com/files/jPointLoader.js ></script>
The jPointLoader.js loads the two files that are required, which are jQuery.js and jPoint.js. For help on referencing scripts in Sharepoint, see Documentation

Scripting Maturity Models

Easiest to understand: This is the traditional model showing how to load jQuery and jPoint individually from the public versions of the files, which are hosted on Google's servers.
<script type="text/javascript" src="//jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="//sharejpoint.googlecode.com/files/jPoint.min.js" ></script>
<script type="text/javascript">Your Does-Useful-Stuff-Script that references jQuery, $, jPoint, and jP objects </script>
Quickest: If you are in a hurry to get started, use this model of referencing the public version of jPointLoader to load jQuery and jPoint from Google's servers.
<script src="//sharejpoint.googlecode.com/files/jPointLoader.js"></script>
<script> Your Does-Useful-Stuff-Script that references jQuery, $, jPoint, and jP objects </script>
Best: This answers the question, "How do I deploy jPoint in an enterprise SharePoint environment?" The answer is to reference the private vesion of jPointLoader that you have downloaded from Codeplex and copied over to your local SharePoint server with your code wrapped in a jPart file.
<script src="/servername/CentralScriptLibrary/jPointLoader.js"></script>
<script src="/servername/CentralScriptLibrary/jPart-Does-Useful-Stuff-Script.js"></script>

Simple Example

To execute this example, go to a Form page (i.e. /lists/tasks/NewForm.aspx) and paste the following code snippet into a new Content Editor Web Part Form Web Part.
For help on adding the CEWP or Form Web Part to a form page, see Documentation. Hint: use toolpaneview=2 to edit the page.
//Here is a simple example of how *easy* it is to change the Title field of 
//a Form to "Hello and Bye World" and then of course, hiding it.

//Load in jQuery & jPoint dynamically. jPointLoader does not load script again if it's already been loaded on the page.
<script type="text/javascript" src="//sharejpoint.googlecode.com/files/jPointLoader.js"></script>

<script type="text/javascript">					
    $(document).ready( function () /*run script after DOM is ready */ {
        jP.Form.readForm().Title.val('Hello and Bye World').hide();
    });
</script>
More information and examples are available at http://www.sharejPoint.com. You can copy one of the example scripts on http://www.sharejPoint.com/examples or copy the example script and paste into a CEWP (it is better to use a Form Web Part if you ever plan on using SharePoint 2010) on your own SharePoint page. If you want to use jPoint as a solution to centrally manage your scripts in your Sharepoint environment, then we encourage you to download the latest jPoint-xx.zip file and upload the files into a document library readable by all users. You need to then modify the jPointLoader.js file jQueryPath variable to reference your local versions of jQuery and jPoint (default settings load the files from Google's Content Distribution Network). See the comments in the jPointLoader.js file to view the details.

Video

Here is an introduction video to jPoint that shows how to use a jPart solution (think jQuery plugin merged with a Web Part) that someone else has developed. (By the way, that someone could be you.)


Core

jPoint API screenshot

Form

jPoint.Form API Screenshot

  • Form is what differentiates jPoint from the other sharepoint javascript libraries. Form is able to manipulate Form fields in Firefox and Chrome, not just IE, and on custom pages with Form webparts not just Form pages (NewForm.aspx, DispForm.aspx, and EditForm.aspx). We do not require you to know a Field's tagname or type and we do not use the find comment tags method b/c that only works on IE Form pages. We provide a simple getter and setter function that works just like jQuery's val(). See the second screenshot below called jPoint.Form.Item API Screenshot.

jPoint.Form.Item API screenshot

  • This uses Title as the example Item or Field/Column. Here you will see the powerful val() statement.


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
To experiment with the val() function, click on any field's TryIt on this example page

http://www.sharejpoint.com/examples/Lists/jPInspector/NewForm.aspx. Log in with username: demouser and password: sharejPoint!
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

jPoint.Form.Schema API screenshot

  • This uses a Form that has a Title and a Choice Field.
  • The Schema object is useful to determine the fields of a Form's internal name versus display name.
  • The Schema object is also useful to determine the default value and whether or not the field is required.

List

Below are two jPoint.Lists API screenshots.

  • This uses the HIDEFORMFIELDS list that was called using jPoint.Lists.setSPObject(); The Lists web service can be used for a solution that reads a form that needs to know the Form.Schema in order to do an autosave only when required fields are filled in, for example..
  • This uses the FEEDBACKEXAMPLE list that was called using jPoint.Lists.setSPObject() using a CAML query and pulling only certain fields to view. That is why you see the ViewFields variable and the FEEDBACKEXAMPLE is only using the ID and comments for its solution.

Webparts

jPoint.Webparts API Screenshot

  • Below is what makes jPoint so easy to develop scripts and to deploy solutions as jParts. Webparts gives the ability to save a user's preferences with a simple page refresh. No need for user to modify the code!


Check out the examples over at http://www.sharejPoint.com to understand the power and flexibility of jPoint.

Last edited Jan 21, 2011 at 5:56 PM by willhlaw, version 79