Video: Create a jQuery instant filter with SharePoint lists

17 May
2012

I’ve just recorded a screencast version of my post about how to create a jQuery instant filter for SharePoint 2010 lists. Enjoy! (The code featured in the video is pasted below)

http://youtu.be/ewoiJFJH9ig

jQuery.expr[':'].Contains = function(a,i,m){return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};

$(document).ready(function(){

	var webPartID = $("#WebPartWPQ2");

	$(webPartID).prepend('<div style="padding: 2px; border: 1px solid rgb(204, 204, 204); margin: 5px auto 0pt; background: #ccc; display: block;"><h3 style="text-align: center;margin:2px;">Instant search: <input type="text" class="search" style="padding: 5px;"/></h3></div>');

		$("input.search").change(function() {
			var txt = $("input.search").val();
			if (txt) {
				$(webPartID).find("td:not(:Contains("+txt+"))").parent("tr.ms-itmhover").hide();
				$(webPartID).find("td:Contains("+txt+")").parent("tr.ms-itmhover").show();
			} else {
				$(webPartID).find("td").parent("tr.ms-itmhover").show();
			}
		}).keyup(function(){$(this).change();
	})
});
7 Comments

Screencast: Creating a Search Scope in SharePoint 2010

24 Feb
2012

In response to my post a while back on creating a search scope in SharePoint 2010, and as a follow-up to my post on Microsoft’s Get the Point blog, here is a screencast on the basics of how to create a custom search scope:

jQuery and SharePoint 2010: the Basics

10 Feb
2012

SharePoint out-of-the-box is functional, but fairly lacking when it comes to really wanting to extract and beautify your data. This is where jQuery comes in. It’s light, easy to implement, and actually hooks up with a bunch of SharePoint services when you have the right plugins. Consider this a basic intro to what you can do in jQuery and SharePoint. It’s really the tip of the iceberg, so keep exploring!

Setup jQuery for SharePoint

First things first, let’s make sure we’re properly setup. If you are using SharePoint behind a secure server (as part of an intranet possibly), then you’ll probably want to load up a local copy of the jQuery script instead of grabbing it from jquery.com each time the page loads. So grab the latest build from jquery.com and dump it in “Style Library/scripts/jquery.js”.

Next, go to your master page and put the following script (depending on where your file is) anywhere within the HEAD section:

 <script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>

And that’s it! Now every time a page loads, you’re pulling in all of jQuery’s power. Minified, the file is only about 31kb, so (considering everything else SharePoint is loading) this isn’t that much of a burden. But you can also just load the jQuery script in page layouts, or even within individual pages.

Now that you’ve got jQuery loaded, it might be in your best interest to create another .js file that holds all of your custom scripts. You can choose to do scripts on a per page or page layout basis as well, but this keeps things more organized. So create a “myscripts.js” file in “Style Library/scripts” (the same folder we put jQuery.js in). And don’t forget to reference it in your master page, right under the jquery code. So now the above code is amended to read:

 <script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>
 <script type="text/javascript" src="/Style Library/scripts/myscripts.js"></script>

Now that we’ve got everything loaded, what can we do?

What can you do with jQuery and SharePoint?

Here are just a few things:

Markup your body content and make it interactive

I use this for something like an FAQ section. We’ll put every question in an H4 tag with a class of “question” and every answer in a span with a class of “answer” directly after the h4. That’s all we have to do to our HTML source in the page. Then in our custom scripts file (above) we add the following jQuery code:

$(document).ready(function(){ 
 $("span.answer").slideUp(); // hides all of the answers
 $("h4.question").click(function(){ // when you click an h4
   $(this).next("span.answer").slideToggle('fast') //the answer slides down
 })
});

Keep in mind you may want to add some CSS that make the h4 seem more like a link (cursor:pointer, etc.) so people know they should click.

Make an “instant” search/filter box


Check out this post about how to create this. You can create a filter, and then append it to any list across your site.

Create a slideshow of content from a picture library


I’ve written a separate post with precise instructions about how to do this, but here’s the general idea:

  1. Create a picture library
  2. Make a new page
  3. Put a CQWP in the page, and wrap it in some divs with specific classes
  4. Use the tinycarousel plugin to convert that Content Query WebPart into a slideshow/carousel
  5. Style with CSS

Create tabs (not the jQuery UI kind)

Check out this post on creating tabs using jQuery, but without using the jQuery UI. It’s a bit easier with the UI plugin, but again, the idea is:

  1. Create the tabs in HTML
  2. Create each panel in HTML
  3. Add the jQuery
  4. Style it with CSS

Use SPServices to really hook into SharePoint with jQuery

I’ve started writing what is turning into a small series on using jQuery with SPServices. Some of the things you can do:
Rollup items from multiple lists
Rollup from multiple lists and put the results in a new list
Rollup articles across a site collection

4 Comments

Guest authoring: Search Scopes for End Users

10 Feb
2012

I wrote an article recently for the Microsoft SharePoint End-User Content Team’s site “Get the Point”.

It’s a follow-up to my article on creating search scopes, and you can check it out here: Search Scopes for End Users in SharePoint 2010

Create a Search Scope for a Sharepoint 2010 List or Library

18 Nov
2011

Screencast tutorial (notes below):

This tutorial explains how to create a search scope for a SharePoint 2010 list or library. As a side note, you may be interested to read how to create a jQuery instant filter for a list or CQWP.

Step 1: Go to Site Actions > Site Settings (make sure you’re in the root site), and click “Search scopes”.

Search Scope Settings

Step 2: Click “New Scope” to create a new scope to load in a sub-page of the site.
New Search Scope

Step 3: Nothing really needs to be set on this screen except the title. If you want this to be a default scope that shows in the normal scope dropdown, make sure and select the “Search Dropdown” box. Otherwise, everything can be set in your custom page.
Edit Search Scope Settings
Step 4: In the next screen you’ll see your newly created scope under “Unused Scopes”. There are no rules attached to this scope yet, so let’s go create some. Click “Add rules”.
Add rules to SharePoint Search Scope
If you want this search scope to query a specific list (for instance, I wanted it to troll through the “newlist” list), enter the address of the list in the “folder” textbox. Also, if you check “require” it will designate that only this list will be searched.
Search Scope rule settings
I’m not exactly sure how often the scopes update, but it seems to be about every 15 minutes. I assume it depends on how your server is setup.

Step 5: Next, create a new page. In this page, add some webparts. Add the following 3 webparts:

  • Search Box
  • Search Core Results
  • Search Paging


Search Box
When you add the search box webpart, the only thing I would change is the page which displays the result. I want to display the results on this page, not on the typical search page. So I just put the address of the page I’m on. That way it will send the search results to this page’s results webpart.

Search Core Results
Here is where you need to input the scope. Edit the webpart and look for the “location properties” section. Under “Scope” type the name of your scope (human readable is fine).

Click OK, reload the page, do a search, and now the search results should only show items in your list! Tada!

If you liked this article, check out how to create a jQuery instant filter.

39 Comments