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:
Image may be NSFW.
Clik here to view.
‘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;
- Search Documents in one or more libraries (same type)
- Select documents from those libraries
- Stitch selected documents and convert to single PDF file.
- 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:
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Then, set display text if no matching items are found.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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)
Image may be NSFW.
Clik here to view.
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]
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
