Fail Forward Fast

SharePoint Cross Site Lookup Columns with jQuery

Ever want to use a lookup column in SharePoint to lookup data in a list, but that list resides in a different site collection or site than the one you're in? Well – out of box this isn't possible, but with the help of jQuery and an event handler, it certainly is possible!

The basic idea behind the solution is to use a text column instead of a lookup column, and as the user starts typing in the text column, a Web Service request will fire to the remote site via jQuery to retrieve a list of "Lookup Values" to present to the user in an Auto-Suggest box.

For example – say you have a site with a list in it that contains a list of Projects. Then, in another site that contains Project Documents, you want to associate a particular document with a Project ID from that other site.

All you have to do is start typing the project name in the ProjectID column for that document and the Auto-Suggest box will populate with suggestions based on your search term.

Then when you click an item in the Auto-Suggest box, it will put the Project ID into the Project ID column.

Pretty slick huh? There is one more important aspect of the solution however. As you can tell, a user could easily type in something that is not a valid project ID – so I also included an event handler that executes after the user hits OK. This event handler queries the lookup column list for the value that was typed, and if it is not found, it presents an error to the user that they didn't type a valid ID.

To Download my Visual Studio Project

http://blog.philwicklund.com/CrossSiteLookups.zip

 

Installation Instructions

Download project and open the LookupProjectID.js file under TEMPLATE\Layouts\Happenings. Edit the following fields to point to the SharePoint list you want to lookup data from:

var urlToWeb = "http://localhost:82";

var listName = "Project List";

var lookupValue = "Title";

 

In the same file, edit the callingColumnName to specify what text field in your edit form(s) is performing the lookup (this is how the Auto suggest box knows where to position itself):

 

var callingColumnName = "ProjectID";

 

Under the EventHandlers folder in the visual studio project, open the ConfirmLegitProjectID.cs event handler. Edit the following values to point to the SharePoint list you want to lookup data from:

 

public override void ItemUpdating(SPItemEventProperties properties)

{

// EDIT THIS!

string lookupListName = "Project List";

string lookupSiteURL = "http://localhost:82";

string lookupWebURL = "";

 

In the same file, edit the callingColumnName to specify what text field in your edit form(s) is performing the lookup:

string callingColumnName = "ProjectID";

Build the Visual Studio Project (this spits out a wsp solution file at c:\wsp). Add the solution to SharePoint (stsadm -o addsolution). Deploy the solution via central admin (or -o deploysolution). Activate the feature on the site(s) you want to lookup the data:

 

DONE!

 

Credits

 

I have to give credit to Timothy Groves for providing the jQuery Auto-Suggest box, as well asJan Tielens for his write-up on jQuery and web service calls.

Cheers!

 

Phil

Consume Reusable Content outside of Page Content field Controls

Ever want to use some reusable content, but you don't have one of those handy Page Content field controls to consume it with? Well that was my situation because I was in a publishing site, but I was on a generic web part page with no page content field controls. Dang! However, I knew I didn't want to maintain the same HTML in two places, so I had to come up with a work around. Also, I didn't want to recreate the page with a new template.

 

The solution I came up with involves creating a view on the Reusable content list and using jQuery to hide the toolbar. See below for the steps:

 

Step 1: Create a View on the Reusable Content List

 

On the reusable content list, create a new standard view. Deselect all the columns except the Reusable HTML column:

 

 

Next, set a filter to show ONLY the piece of reusable content you want to consume:

 

 

This will create a view that only shows one piece of reusable content and only one column:

 

 

Step 2: Drop the List View Web Part on the Page

 

Now – drop a List View Web Part on the page where you want the reusable content, and change its view to point to your newly created view:

 

 

 

Also – make sure to turn off the toolbar and set the Chrome Type to be "None":

 

 

Step 3: Leverage jQuery to Hide that Annoying Column Header!!!

 

After you hit Ok you'll see your reusable content on the page and it's not in a Page Content field control:

 

 

The only problem is when you exit edit mode; you'll see that darn column header!! Well, to get rid of that, stick a Content Editor Web Part on the page and drop some jQuery in there to remove it:

 

 

Here's the jQuery I pasted in my Content Editor Web Part:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(".ms-vh2-nograd").hide();
</script>

 

Neat trick huh? Essentially, all the jQuery is doing is hiding all objects that bare the class of "ms-vh2-nograd". Since that class is only used on reusable content List View Web Part's columns, it's safe to go ahead and hide them.

 

DONE!

 

Phil

An Introduction to jQuery for SharePoint Developers

I couple days ago I was in Atlanta and gave a presentation at the SharePoint Saturday event there on how to build the next generation of SharePoint web parts by using jQuery and Silverlight. I must say that I thought this Atlanta event was INCREDIBLY successful, and I talked with several attendees who were thoroughly satisfied, and even excited, about being there. What's more is I believe my presentation went well, to which I'm very thankful. I promised my students that I would blog about my presentation so they could reference the techniques I discussed at a later date – hence this post (and a second post in a day or two on the Silverlight half).

 

Click the slide to the left if you wish to download my PowerPoint slides.

 

The first half of the presentation covered how to leverage jQuery in your SharePoint sites. For any jQuery beginner, I felt it would be important to discuss what jQuery is, how to use it (Syntax), and how to leverage a plugin. Keep reading, as this post will walkthrough those introductory concepts.

 

 

 

 

What is jQuery, and why use it in my SharePoint Sites?

I'm not sure if it is the most appropriate term to describe jQuery with, but "Easy Javascript" seems to fit the bill to me. Essentially jQuery is a Javascript library/API that lets you be able to do with one line of code, what would take ten or even worse, one hundred lines of javascript. Not only does it simplify your javascript code, but jQuery faster, lighter (only 55 KB!), and more widely supported (tier 1 and 2 browsers) than javascript. What's more is whether or not you like it, jQuery IS your future. It's being prepackaged in Visual Studio 2010 with intellesense and everything! If you're not on 2010 yet, no worries because 2008 has a hot fix that installs the intellesense.

To download jQuery, go here: http://docs.jquery.com/Downloading_jQuery

While all that is fun and all – it pales in comparison to the great user community behind it. The VAST community of jQuery developers has freely released HUNDREDS of plugins that can easily be consumed by your ASP.NET and SharePoint sites.

Because of this – jQuery fits my bill of the "next generation of SharePoint web parts", because tomorrow's web parts will be built by someone else, be consumed by non-developer folks, and are HIGHLY USABLE and GRAPHICALLY CHARMING. You'll be surprised by jQuery – in fact some of the plugins are so rich you'd expect to find Silverlight or Flash powering them.

Check out some of my favorite plugins here:

 

http://plugins.jquery.com

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html

 

After the Syntax demonstration, a walkthrough of the famous Lightbox plugin will be given.

How to Program jQuery – What is the Syntax?

When learning jQuery, the place to start is with selectors. Selectors give you the ability to select one or many DOM objects without directly calling the DOM, and then you can perform some action on that object(s). Look at these examples:

$("#someId")
This will select any object on the page that has the ID of "someId"

$(":text")
This will select ALL the text boxes (<input type="text" />) on the page

$(".someClass")
This will select ALL the object given the "someClass" class (class="someClass")

$("#sometable tr:even")
This will search for an object with an ID of "sometable", and will select all the tr objects therein. An example of this would be to select all the even rows within a table.

In addition to selecting objects, you can animate objects by using jQuery events. The following are some events you can use to animate your pages:

 

• click
• focus
• show
• hide
• slideDown
• slideUp
• fadeIn
• fadeout

See this example:

$(".philsClass").show("slow", someFunction)

This example selects all the objects on the page that have a class of "philsClass", and then runs the show event on those objects. If those objects are hidden they will now display. What's more is that you can optionally pass two parameters. The first is the speed, and the second is a callback method you can use to run some code when the object is finished is displaying.

What's worth noting is the "show" event is a combination of the "slideDown" event and the "fadeIn" event when this speed parameter is passed. Without the speed paremter there will be no transitional effect. The fadeIn event changes opacity gradually from 0% to 100%, while the slideDown event gradually makes the object vertically taller until it is it's intended size. Calling a show() with no parameters is similar to setting the display on a div to block, where the display will immediately change.

 

By using fades and slides, you can bring transitional effects into your pages, WITHOUT server side code! Now that's cool.

 As an FYI, a great jQuery book I will not hesitate to recommend is jQuery in Action by Bear Bibeault and Yehuda Katz. It's written very well.

  The LightBox – A jQuery Plugin

 

Like I said, one of the most powerful features of jQuery is the community behind it. LightBox is a sleek plugin that renders a modal diaglog and a picture viewer therein. Notice the screen shot to the left. This plugin has an AJAX feel with no post backs, and lets you scroll through pictures.

 

Each plugin works a bit different as far as how to use them. To install this plugin, simply download it and upload the files into a document library. Once there, you can use a content editor web part to drop source on the page that renders the plugin.

 

 

 

 

<div id="gallery">
    <a href="code/photos/image1.jpg" title="Image1">
        <img src="/atltest/code/photos/thumb_image1.jpg" width="72" height="72" alt="" />

    </a>
    <a href="code/photos/image2.jpg" title="Image2">
        <img src="/atltest/code/photos/thumb_image2.jpg" width="72" height="72" alt="" />
    </a>
</div>

<script type="text/javascript" src="/atltest/code/js/jquery.js"></script>
<script type="text/javascript" src="/atltest/code/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
</script>

 

Notice how easy this is to use. There's a DIV with some links in it. A link's HREF points to a big image, and within the link there's an image tag that points to the thumbnail version. Later you'll see some script tags pointing to the jQeury API as well as the lightbox plugin, followed by a function that executes as the page loads. The function gets all the objects on the page with an ID of "gallery", call calls the lightBox() method on them. That's IT!

To download the lightbox, go here: http://leandrovieira.com/projects/jquery/lightbox/

Integrating into SharePoint

The most straight forward way to integrate jQuery into SharePoint is to upload the API into a document library or stick it in the LAYOUTS directory on the web front ends. Whichever way you take, from there it is easy to put jQuery code on the page by simply using the content editor web part.

Notice this simple example:

 The jQuery in this example does a select on all the text boxes on the page and changes their background color to be yellow. Here are the contents of the content editor:

 <script type="text/javascript" src="code/jquery-1.3.2.min.js"></script>

<input type="text" />

<script type="text/javascript">
$(":text").css("background-color", "yellow");
</script>

 It's not the most thrilling example, but it serves to demonstrate the concept. Notice the "code" in the URL for the jQuery API file. That's the name of the document library I place the API in, as you'll also notice that library is on the quick launch. You'll want to change this URL to reflect where you placed your API.

 My next post will be about how to spice up your web parts with Silverlight – so Stay tuned!

 Phil

Tricking the Content Editor Web Part Width to 100% with WPSC

One big pain that I continually run into with web parts is when you want two web parts side by side. The problem is when Web Part Zones that have a horizontal alignment, they always SCRUNCH the web parts together. This is fine if the web parts have their own predefined width, but is sucks for text. The content editor web part is especially susceptible to ugliness when in horizontally aligned zones:

 

 

Well, I found a neat way to tell the content editor web part to set its parent table cell's width to be 100%. The trick is to grab the parent table cell's ID and run some javascript in the content editor to set the width.

 

When you view the page source, you'll see the web part resides in a DIV, and always resides in a table cell that has a unique ID:

 

 

You'll see in the id, it's unique because of the trailing number at the end. Turns out that "4" is the fourth web part on the page and therefore 4 is stuck at the end of the ID. The MSOZoneCell_WebPartWPQ is constant, so you can use that in all your web parts regardless of ID. To programmatically get the ID of the current web part, all we need to do is stick in the _WPQ_ token in our script. The _WPQ_ token comes with the Web Part Page Services Component which is available for client side scripting on all your SharePoint sites.

 

Take a look at the code I entered at the end of my content editor:

 

 

By adding the document.getElementByID javascript statement, and passing the table cell ID with the _WPQ_ web part token, we can get at that object and are able to set its width to 100%.

 

Here's a much better presentation with two web parts side by side:

 

 

Good luck!

 

Phil

All my OK Buttons in SharePoint are throwing javascript errors!

All of a sudden all my ok buttons in all my SharePoint sites started throwing javascript errors whenever they were clicked. For example, if I was in a SharePoint list and I wanted to add a new list item, it would break when I clicked ok.

 

I dug into the issue deeper by enabling javascript debugging in my IE browser, and noticed it was throwing an "Object Expected" javascript error:

 

 

Well, it didn't help any to debug it, but after wasting a few hours I figured out what was causing the problem. It turns out that I had added a script tag into the head of my master page. Nothing crazy about that, or so you'd think, but for some reason it needed to be well formed:

 

Breaks all the OK Buttons: <script type="text/javascript" src="/_layouts/ custom/custom.js" />

 

The Fix: <script type="text/javascript" src="/_layouts/custom/custom.js"></script>

 

I was blown away when I realized this was the problem. Maybe there were some javascript 101 topics I failed to learn in college or something… (either that or SharePoint 101)

 

Phil