jump to navigation

SPSDC and jPoint Presentation Wrap-up including How to pre-populate SharePoint form fields from URL parameters with just 3 lines of code. December 9, 2009

Posted by willhlaw in jPoint, jQuery, SharePoint, SPSDC.
Tags: , , , , , ,
trackback

SharePointSatDC

It started off a cold and rainy morning on 12/5/09 for the SharePoint Saturday DC conference.  I had a car full of about 7 bags of donated clothes for the events clothing drive thanks to the Harris, Lawrence, and Wallenhorst families.  The clothes were dropped off after my 8:30-9:40 session and by that time, there was a nice white blanket on the ground and snowing heavily!  I hope the clothes from the event will provide warmth to several cold persons sometime soon.

I kicked off my presentation with a “Taste of jPoint” video to wake up the audience and grab their attention.  Tell me what what you think of the video.  Ken from the jPoint team created it from some program on his new laptop.  If you are prompted, username is demouser and password is sharejPoint!

The presentation, entitled “jPoint: jQuery Based Library for Creating Web 2.0 Apps in SharePoint” had 4 parts.

  1. Web 2.0 App: Demo
  2. jPoint: Unleashed
  3. jParts: Plug and Play Web Parts
  4. jParts: Live Demo

For the Web 2.0 App Demo, I gave a quick background and showed while describing another jPoint team member’s pre-recorded demo.

I then talked through parts 2 and 3 with just a couple of on-the-fly questions from the audience.

For the jParts: Live Demo, I was pretty confident I could do it live without trouble, as long as the website connection worked, since I had run through similar steps when I created a screencast earlier.  Well, I was a little bit wrong.  There were, of course, a few glitches, but I was able to smooth them out.  In one case, I touted how Firefox with Firebug is such a useful tool for client-side developing on SharePoint.  A few seconds later, I had to switch to IE so that I could inspect the contents of a form [editor] web part.

Nevertheless, I was able to demonstrate live, how to add the GoogleChartsAPI jPart from the Web Parts Gallery.  Then, I demonstrated how to take the new jPart_Template.js and paste in 3 lines of code and a function called querySt to read query string parameters to create a jPart to pre-populate a SharePoint form page with values from URL parameters.  Those 3 lines of code are:

$.each(jP.Form.readForm().Items, function(idx,formjQueryItem){
if(querySt(formjQueryItem.Name) != null)
jP.Form[formjQueryItem.Name].val(querySt(formjQueryItem.Name));
Let’s go over it quickly.

The first line uses jQuery’s $.each function which iterates through the form items and uses an anonymous callback function with two parameters. idx for the index and formjQueryItem which represents the Form item object (in other words, the cell that contains the Title, Assigned To, or Priority field.

jP.Form.readForm() is called which reads the page’s html to extract the SharePoint columns or “fields”.  readForm() returns a Form item object so that you can daisy chain this into one line to get the items, jP.Form.readForm().Items.

The next line checks to see if the current name of the field (i.e. Title, Assigned To, or Priority), matches an existing URL parameter.  If it does, then the last line is executed.  The last line uses the powerful .val() function.  To reference a particular field in jPoint, the array notation, jP.Form[“field name”] can be used or the dot notation, jP.Form.fieldname can be used.  When using the dot notation, it is not recommended to use a field that has special characters or a whitespace.  In jPoint you can, you just need to remove those before using it (i.e. Assigned To becomes AssignedTo).  So back to the last line.

jP.Form[formjQueryItem.Name] gives you a reference to the field item object.  Passing a parameter to the .val() function acts like a setter.  No parameters acts like a getter, just like jQuery’s val() function.  Thus, passing the value of the URL parameter to the field item’s val function sets it.  Thus, you can pre-populate any form field.

To run the code, remember, you need to have both jQuery and jPoint loaded on the page.  Below is the entire script.

<script type=”text/javascript”
src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”&gt;</script><script type=”text/javascript”
src=”http://sharejpoint.googlecode.com/files/jPoint-latest-expanded.js”&gt;</script><script type=”text/javascript”>
$(document).ready(function() { //Wait page to load and then apply webpart logic
$.each(jP.Form.readForm().Items, function (idx, formjQueryItem) {


if(querySt(formjQueryItem.Name) != null)
jP.Form[formjQueryItem.Name].val(querySt(formjQueryItem.Name));

});
});
function querySt(ji)


{
hu = window.location.search.substring(1);
gy = hu.split(“&”);
for (i=0;i<gy.length;i++)
{
ft = gy[i].split(“=”);
if (ft[0].toUpperCase() == ji.toUpperCase()) //Fixed query so it is case insensitive
{
return unescape(ft[1]);
}
}
return null;
}
</script>

So, when I was finished with the live demo, I was at the 50 minutes mark.  I had ten more minutes before the 10 minutes Q & A.  After asking the audience, we decided more examples would be good.  Rather than going off script and risk the few embarrassing glitches of the live demo, I explained a few of the jPart examples on the http://sharejPoint.com/examples website.  I showed off the chatterbox solution as a pure client-side jPart.  After that, I discussed the Bing Maps API and the story behind it.

After ten minutes of that, it was finally ready for the Q & A.  Oh, and before the Q & A was over, my laptop died.  The camstudio session that I was recording…gone!  Oh no.

There were a few interesting questions like, “If I use jPoint in the enterprise, who is going to support it and for how long”.  I answered “With jPoint being a good platform for developing scripts for 2007 that work when upgraded to 2010, it’s going to be around for a while.  Plus, it is open source.  You can look at the comments in the code and maintain it yourself.  I really think that this project has legs and the more people I talk to, the more excitement and enthusiasm is generated and the word spreads”.

One audience member summarized the session, “It was not as clear at first, but the demos at the end really helped to make it more clear.”  I think there are lot of advanced concepts with jPoint, especially jParts and the deployment framework.  There is a lot of documentation to be done.  At the very end of Q & A, a bunch of audience members came up to talk to me one and one.  One member was extremely excited about learning jPoint and has offered to contribute to the project, particularly in the documentation area.  It is always great to bring on new volunteers to the project.

Since I had a wedding all the way down in Raleigh, I had to leave right after Q & A.  At 8:00am it was raining.  At 9:45am it was snowing.  This was not going to be a fun trip.  Well, after making it to the wedding on time, we found out that we were actually late, because the wedding started EARLY!  Who does that?

I want to conclude with a big thank you to Dan Usher and Dux Sy Raymond and the other organizers for helping to make this event happen.  And thanks again to everyone who contributed clothes!

If you want to take a look at the slide deck, I have converted it into a PDF and made it available here.

Advertisements

Comments»

1. David Patrick - December 10, 2009

I was in attendance at this session at SPSDC and you did a great job! (Sorry to hear that you were late for the early wedding.) Thanks for presenting!

willhlaw - December 10, 2009

Thanks! Glad you enjoyed the session. Have you had a chance to checkout jPoint? I am sorry I missed the rest of the conference. I heard there were many great sessions.

-Will


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: