Zieglers

Just little about C#, .NET, SQL Server, SharePoint and SAP

Document Library Search Web Part

Posted by zieglers on September 8, 2009

In this post, I’ll try to show how to develop a web part which you can use to search document library contents by their field values. The advantage of this web part is that results will be displayed as you type in search box. Since AJAX configuration for SharePoint is not straigh-forward, I chose to use some simple JavaScript functions instead.

By the end of the implementation, we are expecting to see a screen as follows:

Search Documents in Library

‘Add’ button is just an optional button in case you’d like to add searched documents into a gridview or something for further processing.

My next post will actually combine Search Document Library wp with Select and Stitch functionality, using which you can;

  1. Search Documents in one or more libraries (same type)
  2. Select documents from those libraries
  3. Stitch selected documents and convert to single PDF file.
  4. Send stitched pdf file to Records Center.

Enough intro so far, let’s get started!

Document Library Search  web part functionality can be divided into two parts: Just-in-Time Search functionality and Display Results functionality.

Although in the screenshot above it’s not obvious, actually results are displayed in an IFrame, whose source is our Results.aspx page. In order to give JIT effect, we’ll use javascript which will force Results.aspx in IFrame to display results each time user types something. This javascript along with search box can be hosted in a content editor web part.

For displaying results we’ll use filtered dataview webpart. This is going to be parameter based filtering. Each time user types something, that search criteria is going to be new filter parameter for dataview wp data source.

So, we can summarize use case as follows:

  • User types in search criteria.
  • JavaScript code calls results page with new filter parameter.
  • Results page displays filtered results.

CEWP for Search Box, JavaScipt and IFrame

One of my previous posts can give you an idea re this part of the implementation. I’m providing link here just in case (subsection 10 & 11): http://zieglers.wordpress.com/search-contacts-web-part/

Idea is the same. Now add a new CEWP to any page you want and provide following source:

<div style=”height:400px;”>
<script type=”text/javascript”>
 var timeout = -1;
 function searchChange(textbox) {
  var text = textbox.value;
  if (timeout != -1) clearTimeout(timeout);
  timeout = setTimeout(“commitSearch(‘” + text + “‘)”, 400);
 }
 
 function commitSearch(text) {
  var frame = document.getElementById(“contactFrame”);
                if (text == “”) frame.src = “Results.aspx?ReturnAll=Yes”;
                else frame.src = “Results.aspx?s=” + text;
 }
</script>
<div>Use the text field below to search library contents by Title.</div>
 <input type=”text” style=”border:1px gray solid;” id=”contactSearch” name=”contactSearch” onkeyup=”searchChange(this);”/><br/>
 <iframe id=”contactFrame” style=”width:100%; height: 100%; margin-bottom:-30px; padding-bottom:30px;” src=”Results.aspx?ReturnAll=Yes” scrolling=”auto” frameborder=”no” >
 </iframe>
</div>

 After doing so, you should be seeing smth as below:

Search CEWP

So far so good… Now we have CEWP to host search box and results iframe. Let’s move on to 2nd part of the implementation, which is filtered dataview web part hosted in Results.aspx and displayed in iframe.

Results page implementation

As I also mentioned above, since this part is similar to the implementation I posted for search contacts web part (subsection 3 to 9): http://zieglers.wordpress.com/search-contacts-web-part/ , you can take a look at it to have a general idea.

However, for this implementation we need more flexibility, such as binding dataview wp to ListName instead of ListId. First we create an empty aspx file under root web.

Create new aspx in SharePoint Designer

Next, we open up Data Source Library and drag&drop the document library which you want to perform search against. (In design mode of Untitled_1.aspx). I use Documents library for this demo.

Drag drop Documents Library

Then, edit columns using Common Data View Tasks and add columns you want to be displayed in search results. I only have name, title, and modified columns for this demonstration.

Edit Columns

Then, set display text if no matching items are found.

Set Display Text

Finally, save you aspx file as Results.aspx.

Ok, so far let’s see what we have: Results.aspx page which is actually hosting a dataview web part for Documents library. No filter applied yet! So, it displays every document in Documents library now.

All Documents Displayed

Our next step would be modifying this data view so that it displays results based on a filter parameter passed by user’s search box entry. Also we need to bind it to ListName instead of ListId, so that you don’t need to update ListId in Results.aspx each and every time you create a new document library.

Create filter parameter

In order to add a parameter for filtering, go to Common Data View Tasks > Parameter, and create a new parameter (Name: SearchParam, Parameter Source: QueryString, Query String Variable: s)

 SNAG-0009

Create filter for DataFormWebPart

Now we need to create filter based on parameter we just created. As for this demo, i’ll show how to create filter for Title column. In case you need, you can add more filters in a similar way. Again go to Common Data View Tasks > Filter:

Add a new filter criteria with following values:

Field Name: Title

Comparison: Contains

Value: [SearchParam]

Filter Title

After doing so, you can see applied filter in Common Data View Tasks pane. Also, don’t forget to save your changes to Results.aspx.

Filter Set

That’s it!!! Now let’s go back to our CEWP and test it. I uploaded a test file, named TestDoc.doc and its title is My Test Document. As seen below, as i type ‘my’ in search box, my test document is displayed in search results.

One thing to note is that we used ‘Contains’ in our filter criteria clause. So, our search is more flexible. You can search based on any occurence of a search text.

Test Results

Give it a try and you’ll see that it’s very easy to implement, yet it has big potential of usage in different scenarios. In the next post, i’ll try to show how to bind this to a repeater control and have a document selection list based on search results.

zieglers

About these ads

3 Responses to “Document Library Search Web Part”

  1. [...] Document Library Search Web Part [...]

  2. [...] subsite, and i’m attempting to founded up research on many checklist internet factors (as in http://zieglers.wordpress.com/2009/09/08/document-library-search-web-part/). I’ve been in a placement to accomplish every little thing extensive on that weblog article [...]

  3. What if you have multiple parameters that needs to be passed to the iframe? how would you execute that?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 56 other followers

%d bloggers like this: