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: , , , , , ,
2 comments

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

A slide from my SPSDC jPoint Presentation December 2, 2009

Posted by willhlaw in jPoint, SPSDC.
Tags: , , ,
add a comment

See my previous post, I will be speaking on SharePoint Saturday to promote and support TWO good causes.

Below is one of the slides I am working on that explains how jPoint is changing the game for developing JavaScript solutions for SharePoint. Although not explained on the slide, a jPart is a jPoint “plugin” that can be deployed to SharePoint as a web part as a script inside a Content Editor Web Part (actually, a Form [Editor] Web Part is a better choice since Microsoft is eliminating the ability to include <script> tags in the new CEWP in SharePoint 2010 – I will write a post on this later).

image

I will be speaking on SharePoint Saturday to promote and support TWO good causes November 19, 2009

Posted by willhlaw in Gov 2.0, jPoint, sharejPoint, SharePoint, SPSDC, Web 2.0.
Tags: , , , , , ,
4 comments

[Update] – Schedule of presentations has been posted.  My session is from 8:30 – 9:30am and bio page is here.

On Dec. 5, the SharePoint Saturday for DC (#SPSDC) event will be hosted at the Microsoft Technology Center.  The call for speakers were for non SharePoint 2010 content and specifically, for solutions that addressed relevant business needs for the Washington, DC area.  In other words (more or less), this means “Who wants to talk about solutions useful for the Government?”  I was interested and could have repeated one of my previous SharePoint presentations about reporting airplane incident/accident events within SharePoint or about categorizing your data to plan for various degrees of high availability in SharePoint.  Both are certainly relevant to the government.  However, after Dux Raymond Sy checked out the jPoint project, he encouraged me to submit a speaker form to discuss it.  It is not directly related to the government, per se, but it will allow both the public and private sectors to improve the effectiveness of their SharePoint deployments.  Here is the list of speakers (I am at the bottom).

Thus, I made the title of my presentation “jPoint: A jQuery Based Library for creating Web 2.0 Apps in SharePoint”.  I have the description of the talk at the bottom of this post.  At the presentation, I hope that some of the jPoint contributors, like Ken, Samir, and Luke, will be present so you can meet some of the incredible talent that is helping to create a client side API in JavaScript for SharePoint and jump starting the effort to build solutions on top of the API – see the neat examples at http://sharejPoint.com/examples. Now on to promoting the good causes.

salvationArmyGood Cause #1

SharePoint Saturday will be promoting a Clothing Drive.  Warm clothes will be especially helpful for the needy in the coming Winter months.  I love when hard work can be directed towards a good cause, such as national safety, the disadvantaged, and of course, charity. Below is an excerpt from http://www.sharepointsaturday.org/dc/default.aspx.

#SPSDC Clothing Drive

Thursday, October 29, 2009

If you are planning to attend SharePoint Saturday DC on December 5, 2009, make sure you bring clothing that are new or in good condition to be donated to local charities like Salvation Army.

Clothing-donation needs include: school clothes, coats and other cold-weather accessories, professional clothing for employment interviews, and shoes, which wear out quickly and must be replaced often, especially among growing children.


Clothing donations to qualified charitable organizations are tax deductible.
For tax deduction purposes, The Salvation Army publish guidelines for the valuation of donated items, including clothing and shoes.

Let’s show the true meaning of connecting and collaborating. As Karuana Gatimu (one of the great SharePoint community leaders today) says “Sharing is the Point!”

Good Cause #2

The second good cause I will be promoting is jPoint.  Why?  It is simple.  It is free and saves time.  It is arguably not as important as the clothing drive, in the short term.  But bear with me.  I have a long term vision in mind.  jPoint is a free, open source project that will make developers lives easier and give SharePoint site administrators the ability to deploy customizations and “Web 2.0” mashups or composite applications without having to write code or touch the server.  I want to do my part in the community to create and spread the adoption of cost saving, valued added tools that increase the end user experience.  Increasing the end user experience will increase adoption and that will not only set the stage for increasing user productivity, but should also increase the efficiency of business processes and make everyone better off.  What do you think?  Checkout my talk at SharePoint Saturday or get involved with the project at http://jPoint.codeplex.com.  And similar to Kauruana’s quote above, jPoint’s motto is: “Share jPoint. It’s open source.”

card01_back

Description of the SharePoint Saturday presentation – “jPoint: A jQuery Based Library for creating Web 2.0 Apps in SharePoint

Have you ever wanted to hide certain fields in a SharePoint list form that were “For Office Use Only?” Or to create a chat/IM tool or AJAX enable a list, but did not have rights to deploy a custom solution on the server? Or to use drag and drop functionality on a SharePoint page? Many developers have turned to jQuery client-side scripts to solve these issues. Many solutions take to much time to get off the ground and they break when used in other browsers. And what about your current client-side scripts when you upgrade to SharePoint 2010? Will they work? These problems are being solved by the FREE open source community project called jPoint. It is hosted on codeplex at http://jPoint.codeplex.com. jPoint is a data access layer for SharePoint to make it easier for developers to work with form fields and communicate with the SharePoint web services. It also provides a deployment framework so developers can create jPart “plugins” that site Administrators can drop on their pages to create Web 2.0 mashups.

This presentation will comprise of three segments:

1: Demo of a real life Web 2.0 App in SharePoint

2: Explanation of jParts and how Site Admins can configure them

3: Deep dive into jPoint library and API  (time permitting)

This session level is ranked intermediate and for Special Interest.  Leave me a comment if you are interested in the demo videos or any post-presentation material.  Thanks.

jPoint version 0.7 Released – Objectifies SharePoint Web Services and more November 12, 2009

Posted by willhlaw in jPoint, SharePoint, Web Services.
Tags: , , , ,
add a comment

[cross-posted on The jPoint Blog at http://sharejPoint.com/blog]

image

 

 

 

 

 

 

Here is the link to the jPoint version 0.7 Release on Codeplex. jPoint is the jQuery based library that makes building javascript solutions a lot easier by abstracting a lot of the low-level SharePoint intricacies such as cross browser compatibility, manipulating the HTML mess in Forms, and in particular, the nuances of the different SharePoint web services.  In the previous releases, jPoint required the application developer to iterate through the data returned from the web service as jQueryData, which was XML returned from the jQuery AJAX call. In this 0.7 release, you can now reference the data as an Items object.  Let’s say you want to get the last message from a chat list (assuming the default view has messages ordered by descending ID).  You would be able to write:

jP.Lists.setSPObject(siteURL, “chat”); //adds chat list (as Uppercase) to the Lists object

jP.Lists[“CHAT”].getSPView(); //adds the items from the default view to the Lists.CHAT object

var chatMessage = jP.Lists[“CHAT”].Items[0].message;

Below are the rest of the highlights of the 0.7 release.

Major jPoint.Lists Object Updates:

When using getSPItem, getSPItemsWithQuery, getSPView, getSPViewCollection, getPictures, updateItem, addItem, and deleteItem,
jPoint.Lists["<listname>"] will have the following objects populated depending on current context

  • ListName – name of last list used
  • FieldCount – count of fields
  • ItemCount – count of items
  • Items – array of item object [{fld11:val11,fld12:val12,…},{fld21:val21,fld22:val22,…},…]
    • fields are based on xml response and might not be uniform across rows, so check before use
  • xmlDoc – xml document response from webservice call
  • JQueryData – row data as jQuery object
  • total – count of rs:\\data nodes if exist
  • nextPage – key for paging if rs:\\data exist

Improved Public Functions:

  • jP.Form.readForm() – identification of form fields for dispform.aspx
  • jP.Form.<FieldName>.val() – reading of value from fields with no input element to support dispform.aspx
  • jP.strip(str) – remove special hex encoded characters
  • jP.Lists[<ListName>].getSPListFields() – save additional information into list object
  • jP.Lists[<ListName>].udpateItem(itemid) – process response data to save information into list object
  • jP.Lists[<ListName>].getSPItem, getSPItemsWithQuery, getSPView, getSPViewCollection, getPictures – Return list object

Improved Private Functions:

  • getSPItemData(listObj) – use processResponseData to save information
  • getSPItems(listObj, rowLimit) – use processResponseData to save information
  • getSPViewItems(listObj) – get default view dynamically
  • buildModifyContent(listName, data) – handling when data[i].ID is not null

Newly Added Public Functions:

  • deleteItem(id) – delete SPList item
  • getSPViewCollection() – populate jPoint object with list view collection
  • filterItems(filterField, filterValue) – filter the list items where filterField contains filterValue
  • getItemsFieldData(fieldNames) – extract a subset of Items for specified fields

Newly Added Private Functions:

  • processResonseData(listObj, data) – populate jPoint.Lists.{listname} and jPoint.Lists with list information to process list web service all uniformly
  • saveListObjects(listObj, responseData) – populate jPoint.Lists.{listname} and jPoint.Lists with list information
  • getResultItems(respData) – convert response data into array of item objects
  • getColumns(items) – get complete list of columns from items array
  • buildDeleteContent(listName, id) – construct xml body for deleting SPItem from a specified list

My first YouTube video is an intro to jPoint October 18, 2009

Posted by willhlaw in jPoint, jQuery, sharejPoint, SharePoint.
Tags: , , , , , , , , , ,
2 comments

The sharejPoint blog, managed by The jPoint Project, has a post over at http://bit.ly/blog_jPoint_YouTube and the video is at http://bit.ly/3C3bab. The video has me introducing jPoint and going through a quick demonstration.


(Video Screenshot is an image hyperlinked to YouTube video)

This video says it is 9:33 long, but the intro and demo really only lasts until 5:59. The rest of the video is a silent intro that I added in order to re-upload the video with enough of a checksum difference for YouYube not to reject it as a duplicate. The first video that was created did not have the correct zoom points at places. The silent part which is a couple of minutes at the end is not necessarily a waste of time. It shows the jPInspector example which shows the power of jPoint.Form. This acts as a preview of the next video. So, how did I do for my first video screencast? What can I do to improve the next one?

Kung-fu jQuery Solution to Bill Simser’s Post on Changing the Home tab in Multipage Meeting Workspaces October 14, 2009

Posted by willhlaw in jPoint, jQuery.
Tags: , , , , ,
4 comments

Bill Simser posted a blog article two days ago that I wanted to reply to. The title was “Changing the Home tab in Multipage Meeting Workspaces with jQuery”. However, when I posted my comment, it did not show up. I know that sometimes, it takes a while. I waited, reposted my comments in Chrome rather than in IE7 and waited some more. But after an entire day and Bill tweeeting he did not see any comments, I am resorting to responding with a blog post.

Thus, here is a re-hash of the problem Bill was trying to solve. On a Multipage meeting workspace, you can change the name of each meeting tab except for the “Home” one. Bill came up with a jQuery solution for changing the “Home” to “Zombieland”, or whatever you wish. However, he needed two separate script solutions on the “Home” page and the other pages because the structure of the tab changed whenever it was the current selected page (no link is necessary to click on the tab that you are already on).

Here were Bill’s two solutions.

To change the Home Page tab name we’ll need two Content Editor Web Parts (CEWP). One when the Home tab is active and one when it’s not. Using jQuery we simply find the tab and change the text. Seriously it’s this easy:

<script type=”text/javascript”>

$(document).ready(function(){

$(‘.ms-tabselected:contains(“Home”)’).text(“Zombieland”);

});

</script>

And here’s the code when the tab is inactive (it has a different classname):

<script type=”text/javascript”>

$(document).ready(function(){

$(‘.ms-tabinactive:contains(“Home”) a’).text(“Zombieland”);

});

</script>

And here is Bill’s problem:

I thought I would be smart and use the className^=”ms-tab” wildcard so it would work on any page but the content changes if the page is active. Even with the class selector when the page is active, there’s no hyperlink to the page (which makes sense) so no ‘a’ selector to find. When the tab isn’t active it’s there. My JavaScript kung-fu prevents me from figuring out something that works for both situations but feel free to post a snippet in the comments and I’ll update the post.

This is my answer to Bill and it would have been a comment on his blog but for some reason, my 4 attempts to comment did not work. (Don’t worry, I tried everything, including just writing about the first part of the solution and leaving out the whole configurable script part.)

[metadata would have looked something like this] Monday, October 12, 2009 3:55 PM by willhlaw

Okay, I am not sure if you need your code on one line, but the following ninja code should work.

<script type=”text/javascript”>

$(document).ready(function(){

var homeTab = $(“span .ms-tabinactive, .ms-tabselected”).find(“:contains(‘Home’)”);

homeTab.html(homeTab.html().replace(“Home”,”ZombieLand”));

});

</script>

Basically, I use find to search the children. And so as not to affect the structure, I do a string replace.

I created a quick configurable script using jPoint so a user with edit page permissions can change the new tab name from “Zombieland” to something else. It uses the jPoint configuration model, so if you are familiar with it, it should be simple. If you are not, just drop the script onto a content editor webpart and you will see a yellow config screen with an edit button.  Click that edit button to change the NewTabName from “Zombieland” to anything else. After the page refreshes, you’ll see your changes. No need for power users to mess with code.

Here is the configurable script with the script tags replaced with [script] to make sure it will appear:

<script type=”text/javascript”>

var myjLocalOptions={NewTabName:’ZombieLand’};

</script>

<script type=”text/javascript” src=”//sharejpoint.googlecode.com/files/jPart-0.4-template-expanded.js“></script>

<script src=”/src/jPoint_dev/webparts/jPart.replaceMeetingHomeTab.js”></script>

Here are the pictures to help explain the configurable script for Changing the Home Tab of a Multipage Meeting Workspace.

A close up.

When you click the Edit button, you will see the following configuration screen for the script webpart.

A close-up.

So now, without having to be a developer, a power user or site admin could change the name of the “Home” tab to ZombieFire.

Click Update and you will see the changes.

.

jPoint will be how I will start giving back to the Sharepoint Community October 13, 2009

Posted by willhlaw in Gov 2.0, jPoint.
Tags: , , , , ,
1 comment so far

I have been working with SharePoint for 5 years in the Federal space in Washington, DC. I have never blogged publicly or gotten involved in social networking online due to the sensitive nature of my work and the environment. Instead, I just soaked in and absorbed all of the excellent blog articles and comment threads. Essentially I was a leach; taking but never giving.

Over the years, I would have loved to have shared my discoveries in Sharepoint Designer, or Infopath, or even how to obtain SSP (single shared password) with FBA using a primary and secondary LDAP (secondary is Sharepoint’s AD and my expertise in this area is thanks to Chris Mathers and the fine people over at Planet Technologies. And now it has been almost 3 years since a federal client demonized a fellow developer for requesting help on writing on an Adobe forum asking about how to create PDFs with PL/SQL.

I feel it is time to get out of my shell.

I am going to start talking about any worthwhile discoveries or interesting finds I come across. In the short term, you are probably going to hear me talk a lot about the open source project that I am helping to create and grow. It is called jPoint and it is hosted on Codeplex at http://jPoint.codeplex.com. Extra documentation and examples are also found on the same site as this blog at http://www.sharejPoint.com. Over a year ago, actually, let me look it up, yes, here it is. I saw that jQuery was going to be the javascript library of choice for my Sharepoint development team. I was excited to see a few months later my choice sort of validated by Microsoft. My team and I have written many compelling scripts since and the solutions continue to build on top each other.

jPoint is going to be true blue open source. Free as in freedom. I do not have a company behind this project. Well, not yet. I am thinking about creating a non-profit (possibly called sharejPoint.org) to manage the project, expenses, and to be able to accept donations. I would eventually like to take a similar route to jQuery and allow the Software Freedom Conservancy to own the project and ensure protection, 501(c)(3) status, and its longevity. I would like to consolidate a lot of the “in the wild” scripts and all of the developer talent out there in order to concentrate on creating a de facto client side javascript library for Sharepoint. I know. I know. This will be tough. Impossible. “Good luck, kid”, I hear you saying. Well, I am going to give it a shot. I have energy, brains, and a love for Sharepoint. I also have a tremendously talented team that I have worked with for several years that are also dedicated to the project. And if my two buddies created the widget company, Clearspring, I figure I can start an open source project that delivers free solutions to end users without the pain of server installs, licenses, or the need to have a developer deploy or configure.

Yes, jPoint has a novel way to deploy script solutions so that a power user (a user with Manage Lists permissions), can change the configuration of the script through a wizard. Here is a very simple example. The jPoint team has taken the Chatterbox solution that required AJAX.NET and a server deployment and jPoint-ified it. The jPartChatBox is a purely client-side solution using the jPoint library (which also leverages jQuery). To see the example live, click here. But you will have to login to submit your own chat and to see the yellow edit screen. The login credentials are listed on the Home page and the Examples page.

And here is the configuration “wizard” that you see after clicking the Edit button.

All a power user needs to do is make some changes, for instance, change the List that the ChatBox points to and click Update. The page refreshes and the new changes are in effect. And by the way, if you are thinking that this yellow edit view and configuration wizard looks awful and has a long way to go to match Bamboo Solution’s or Coraswork’s wizards, here is the catch. jPoint is an API and a deployment framework. For now, it is up to each individual or third party developer to make their configuration wizard look pretty. And of course, through time and once we solidify the core and hopefully attract more contributors, we can certainly integrate the best practices for setting up the configuration wizard and bring that into the core. Similar to how jQuery has pulled in certain critical plugins into its core.

Well, that is it for now. I encourage everyone who wants to get involved write me a comment or follow me on twitter @willhlaw. If you are not interested in jPoint, stick around. I will have some good posts that are not jPoint related.