jump to navigation

Best way to speed up Javascript (specifically jQuery) load times November 12, 2012

Posted by willhlaw in Javascript, jQuery, Web 2.0.
Tags: , , ,
1 comment so far


The obvious way is to use a popular CDN, short for Content Delivery Network, such as Google’s. Dave Ward explains the reasons very well in his article, “3 reasons why you should let Google host jQuery for you” and his three main points are:

  1. Decreased Latency – CDN allows the download to occur from the closest server to the user.
  2. Increased Parallelism – The local web server can be serving up content while the other connection is pulling from Google.
  3. Better Caching – Since so many other sites are using Google’s CDN, the user may already have the jQuery or javascript file in their cache.

However, there is a caveat. What if the connection to Google goes down? Can your site survive without jQuery? It should, if you developed the site with a responsive design and progressive enhancement.

The answer is to fall back to a local copy (code sample below).

  1. Write a script tag that refers to Google’s CDN.
  2. Then in the next script fragment, check to see if the jQuery or some public variable from the javascript file exists.
  3. If the object does not exist, then dynamically write another script to the page that refers to the local file.
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>

I learned this concise technique while watching a Twitter Bootstrap 101 tutorial (kudos to David Cochran for the great videos) that referred to this best practice that appears to have come from the HTML5 Boiler Plate project.

By the way, the numbers (from Pingdom) support Google as being most likely the best CDN to use.

CDN performance numbers

Client Side AJAX Applications in SharePoint 2010 – Live Blogging at SUGDC April 9, 2010

Posted by willhlaw in jQuery, SharePoint.
Tags: , , , , ,
add a comment


I am listening to Lee Richardson at SharePoint User Group DC (SUGDC) Reston, VA.  I apologize in advance for the terse code examples and potential incoherent notes.  I am trying to capture everything on the fly and have only touched up a few concepts and added my opinion in the conclusion.  To see this subject in greater depth, visit Lee’s blog.

With client side scripting, there is no compiling, no syntax checking, no type checking.  There is no LINQ, no ADO.NET.  So why would we use it?

Two technologies will be discussed:

  1. WCF Data Services came from ADO.NET Services and previously, Astoria.  OData is a specification that a podcaster, Scott Hanselman, mentioned in connection with SharePoint 2010.
  2. ASP.NET AJAX Templates.

WCF Data Services is an API in SharePoint that allows you to use RSS / Atom and JSON.  It is not just a pure data access layer, it also adheres to the security model built in and returns proper HTTP specification error codes.  It also has validation built-in.  There is also a uniqueness constraint in SharePoint 2010 that will double-check when inserting a new item and return an error code if an item already exists with the same value that was marked for uniqueness (Something that databases have been doing for years).

Polling the crowd on who has used ASP.NET AJAX framework and would not use it on their next project.  5 people raised their hands.  5 people kept their hands up.  An UpdatePanel in SharePoint has just been too difficult over the years, it sends the entire ViewState to the server on each request, and updating the framework as it matures with SharePoint has been painful.

Templating is part of ASP.NET AJAX 4.  It is still in BETA.  Best way to describe it is by describing what it is not.  What would you use if you were to return 100 items from the server and display in a table and page.  I commented, “jPoint and the flexigrid jQuery plugin.”  A few people turned around and said, “Are you the jPoint guy?”  Lee didn’t hear the jPoint comment, but he smiled, and said, “Yes, jQuery.  You could do that.”

Enough talking and he jumps into the demo.  He first shows a response on a webpage and describes the data that we are looking at.  Opens Visual Studio and comments that, “it is not an out of the box, unfortunately”.  An Administrator needs to turn on a feature after installing the WCF Data Services.  A new project is started in Visual Studio.  In SharePoint 2010 and Visual Studio 2010, SharePoint project templates come out of the box.  That’s cool and several people in the crowd acknowledged seeing other demos, but no one admitted to having hands on experience.

Several files are referenced are pasted in from Clipboard, SharePoint basic js files, ADONET, jQuery, and jQuery-ui.  In the code, you typically see three different approaches.  Declarative, imperative, and the jQuery approach.  Everything tonight that is shown will be the imperative approach.  On the web, you always see declarative (using xmlns, it looks nice, but it is too magical).

There are two data types, DataContext knows how to talk to OData services and WCF Data Services.  A Subtype is the AdoNetContext knows how to talk to WCF Data Services.

Then, he starts to explain the code.  $create is a shortcut to create things.



autofetch: true,

dataProvider: dataContext,

fetchOperation: …



<div class=”sys-template”)

<div> { {Title }} </div>  //this is a one way binding, like a read view.


Just in time compiling sometimes takes a while even though nothing changes.  Not sure why this happens.  The items were pulled and displayed in a list.  A background style was applied and some other script was pasted into the ASPX page in Visual Studio, and the userStories showed up as index cards on a corkboard background image.

Now to drag and drop the index cards onto the corkboard and create a master view so when you click on a userStory from the list, it will pop up on the corkboard.  He moved it around on the corkboard because he applied jQuery-ui draggable to the userStories div.  But after a page refresh, the index cards moved back to their original place.  So, custom columns X and Y were added to the userStories which were Tasks contents that can be synched with Outlook.  These new columns are to keep track of the screen coordinates so upon display, they will remain in place.

sys:style=”{{…can use sys to identify a template syntax in an attribute.  Inside the function call, string concatenation can be used.  First, though, the sys namespace needed to be defined xmlns:sys = “Javascript:sys”.  The sys templating allows the class style to be dynamically set from the item’s X and Y values.  Pretty neat.  Normally, you would have to compute these values in javascript and could not do it inline with your HTML.

After dragging and dropping, the new X value is assigned inside the jQuery dropped routine.

Sys.Observer.setValue(obj, “X”, newX) updates the DOM and prepares the object to be saved back to the server.

Fiddler is opened so that we can see exactly what is going on.  The .svc call is returning a $batch.  The dataview keeps track of what JSON objects are being changed and only sends those to the server.  That is pretty efficient.

<div> { {Title }} </div>  //this is a one way binding, like a read view.

<div> { binding X } </div> //this is a two way binding.

Note: if you use this binding in a <input type=”text”> HTML element, it will automatically update the JSON objects and the DOM so you do not need to type the Sys.Observer line above.

Now we are going to work on the Master Detail view and add an edit button to the Detail view.  Here live binding is used.


<img sys.bind=…/>

Clicking on the edit img of a userStory Task, the object becomes “selected” so the binding knows when the edit input box is typed in and it automagically updates the DOM so you see the read only version of the userStory Task in the background change.  Pretty neat!

To conclude, you will need to learn a new syntax, but writing inline code in your HTML to generate styles from properties of fetched SharePoint items and live bind objects between the DOM and in-memory JSON objects is very powerful.  Also, the ASP.NET AJAX 4 is able to only send the data for items that have changed back to the server.  That is smart bulk loading.  Lee was adamant that he was not a javascript developer, but I thought he did a great job at putting together his demo and modifying his code on the fly during the demo.  I am not sure how difficult it will be to deploy WCF Data Services on a SharePoint server, but I would recommend users who are not strong in javascript to look into this technology.  If you are already strong in javascript, then there will be less benefit at leveraging this new, but powerful technology from Microsoft.

Thanks, Lee, for a great presentation.  Well done.

Lee Richardson’s Twitter ID: @lprichar

Lee Richardson’s blog: http://rapidapplicationdevelopment.blogspot.com/


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


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)
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)

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;

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.

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).


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

[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.”


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]








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

Trailing commas problem in IE prototypes October 27, 2009

Posted by willhlaw in Debugging.
Tags: , , , ,
add a comment

If I knew about this when I first got started with jQuery and the jPoint Project last year, it would have saved me some hours off my life. When writing prototypes in Javascript, do not include a comma after the last function.

Screenshot is from this post by fritz-onion.

SharePoint Designer 2010 – Building Composite Apps: From SPC09 Las Vegas October 21, 2009

Posted by willhlaw in jQuery, SharePoint, Sharepoint Designer, SPC09.
Tags: , , , , ,
1 comment so far

I am here at the SharePoint Conference 2010 (SPC09) at Las Vegas. There were not a plethora of interesting sessions this afternoon, so I stuck to what I have been good at; live blogging on SharePoint Designer 2010. See my other blog posts:

Here are the interesting points from the session.

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

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”>





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

<script type=”text/javascript”>


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



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”>


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




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 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.