Zieglers

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

Search Contacts Web Part

Posted by zieglers on March 1, 2009

chair-contacts

For almost all implementations of SharePoint, search is a very crucial part. Most of search features come OOTB, and you need to customize it only if are not satisfied with a generic use scenario. No need to mention that first you need to crawl the content, of course.

Since all above sounds good, there are also sort of requirements that you lead to perform search against list items in your site collection. Most of the time you need to type all the word and perform a search to find what you are looking for. In such scenarios, wildcard search is becoming a challange as well.

In this post, I’ll try to show you a very straight-forward search implementation using CAML, JavaScript and Content Editor Web Part. We’ll first create a Contacts list. Then, customize a DataFormWebPart so that its data source will be responsible from our CAML queries.  Finally, using a Content Editor Web Part and JavaScript, we’ll perform search against FirstName, LastName, FullName, and Company fields.

Let’s start…

  • 1. Create Contacts list

 1_createcontactslist

  • 2. Add sample contacts.

 2_addcontacts

  • 3. Using SharePoint Designer, create a blank aspx page and name it “Results.aspx“.

 3_addnewpage

  • 4. From Data Source Library, drag and drop Contacts list to the form of the page you just created.

 4_addcontactstopage

  • 5. This will insert a DataFormWebPart into form of Results.aspx. Now, we need to edit columns so that First Name, Last Name, Full Name and Company is included.

 5_editcolumns

  • 6. Also, let’s change the layout to “two-column repeating form with border

 6_changelayout

  • 7. At the end of Results.aspx html code add the following script.

<SharePoint:CssLink runat=”server”/>

        <SharePoint:ScriptLink language=”javascript” name=”core.js” Defer=”true” runat=”server”/>

        <script type=”text/javascript”>

        function FrameGoToLink(elm) {

                        if (elm.href==null) return;

                        var targetUrl=elm.href;

                        var ch=elm.href.indexOf(“?”) >=0 ? “&” : “?”;

                        var srcUrl=ch+”Source=”+window.top.location;

                        var targetUrl=elm.href+srcUrl;

                        window.top.location = targetUrl;

        }

        </script>

 

  • 8. Add CAML Query details. Also, don’t forget to update contacts list id in the following code with contacts list id of the site you create.

a. Add Data Sources

<DataSources>

<SharePoint:SPDataSource runat=”server” DataSourceMode=”List” SelectCommand=”&lt;View&gt;&lt;Query&gt;{_1}{SearchQS}{_2}{SearchQS}{_3}{SearchQS}{_4}{SearchQS}{_5}&lt;OrderBy&gt;&lt;FieldRef Name=’Title’/&gt;&lt;FieldRef Name=’FirstName’/&gt;&lt;/OrderBy&gt;&lt;/Query&gt;&lt;/View&gt;” UseInternalName=”True” ID=”Contacts1″><SelectParameters><WebPartPages:DataFormParameter ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}” Name=”ListID”></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”SearchQS” PropertyName=”ParameterValues” DefaultValue=”r” Name=”SearchQS”></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_1″ PropertyName=”ParameterValues” DefaultValue=”&lt;Where&gt;&lt;Or&gt;&lt;Or&gt;&lt;Or&gt;&lt;BeginsWith&gt;&lt;FieldRef Name=’Title’/&gt;&lt;Value Type=’Text’&gt;” Name=”_1″></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_2″ PropertyName=”ParameterValues” DefaultValue=”&lt;/Value&gt;&lt;/BeginsWith&gt;&lt;BeginsWith&gt;&lt;FieldRef Name=’FirstName’/&gt;&lt;Value Type=’Text’&gt;” Name=”_2″></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_3″ PropertyName=”ParameterValues” DefaultValue=”&lt;/Value&gt;&lt;/BeginsWith&gt;&lt;/Or&gt;&lt;BeginsWith&gt;&lt;FieldRef Name=’Company’/&gt;&lt;Value Type=’Text’&gt;” Name=”_3″></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_4″ PropertyName=”ParameterValues” DefaultValue=”&lt;/Value&gt;&lt;/BeginsWith&gt;&lt;/Or&gt;&lt;BeginsWith&gt;&lt;FieldRef Name=’FullName’/&gt;&lt;Value Type=’Text’&gt;” Name=”_4″></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey=”_5″ PropertyName=”ParameterValues” DefaultValue=”&lt;/Value&gt;&lt;/BeginsWith&gt;&lt;/Or&gt;&lt;/Where&gt;” Name=”_5″></WebPartPages:DataFormParameter>

                                    </SelectParameters><UpdateParameters><WebPartPages:DataFormParameter ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}” Name=”ListID”></WebPartPages:DataFormParameter>

                                    </UpdateParameters><InsertParameters><WebPartPages:DataFormParameter ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}” Name=”ListID”></WebPartPages:DataFormParameter>

                                    </InsertParameters><DeleteParameters><WebPartPages:DataFormParameter ParameterKey=”ListID” PropertyName=”ParameterValues” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}” Name=”ListID”></WebPartPages:DataFormParameter>

                                    </DeleteParameters>

            </SharePoint:SPDataSource>

</DataSources>

b. Add Parameter Bindings

Note that below, we define our CAML query WHERE clause.

<ParameterBindings>

                                    <ParameterBinding Name=”dvt_apos” Location=”Postback;Connection”/>

                                    <ParameterBinding Name=”UserID” Location=”CAMLVariable” DefaultValue=”CurrentUserName”/>

                                    <ParameterBinding Name=”Today” Location=”CAMLVariable” DefaultValue=”CurrentDate”/>

                                    <ParameterBinding Name=”ListID” Location=”None” DefaultValue=”{1E662208-F914-45B8-BC2B-A4FB2BA594BC}”/>

                                    <ParameterBinding Name=”SearchQS” Location=”QueryString(Search)” DefaultValue=”r”/>

                                    <ParameterBinding Name=”_1″ Location=”QueryString(ReturnAll)” DefaultValue=”<Where><Or><Or><Or><BeginsWith><FieldRef Name=’Title’/><Value Type=’Text’>”/>

                                    <ParameterBinding Name=”_2″ Location=”QueryString(ReturnAll)” DefaultValue=”</Value></BeginsWith><BeginsWith><FieldRef Name=’FirstName’/><Value Type=’Text’>”/>

                                    <ParameterBinding Name=”_3″ Location=”QueryString(ReturnAll)” DefaultValue=”</Value></BeginsWith></Or><BeginsWith><FieldRef Name=’Company’/><Value Type=’Text’>”/>

                                    <ParameterBinding Name=”_4″ Location=”QueryString(ReturnAll)” DefaultValue=”</Value></BeginsWith></Or><BeginsWith><FieldRef Name=’FullName’/><Value Type=’Text’>”/>

                                    <ParameterBinding Name=”_5″ Location=”QueryString(ReturnAll)” DefaultValue=”</Value></BeginsWith></Or></Where>”/>

            </ParameterBindings>

 

  • 9. Then, save page as “Results.aspx“.

 8_saveas

  • 10. Go to home page and add a Content Editor Web Part.

 9_addcewp

  • 11. Edit CEWP properties and add the following to its Source Editor.

<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?Search=” + text;

                                        }

                        </script>

    <div class=”ms-listdescription”>Use the text field below to search for contacts by First Name, Last Name, Full Name, or Company.</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>

 10_sourceeditor

  • 12. That’s all. Now you can test. Go to homepage and type something in search textbox. You’ll realize that results will be updated as you type.

 11_results1

 12_results2

zieglers

Advertisements

3 Responses to “Search Contacts Web Part”

  1. mrjoshd said

    I have implemented this on 2 different servers and have an issue I can’t seem to figure out.

    Any time one of the columns has something that begins with the letter “r” it shows up in results.aspx whenever no query is submitted to search.

    Example. I have the name Reuben Stewart in my contacts list. When I load the CEWP without anything being in the search bar I immediately see this result as compared to a blank screen. I add a new contact, working at Raben Tire. Now that contact shows up also before even searching in results.aspx.

    Any thoughts/help as to why this is happening and how to get around it?

  2. Hmm, Check This out, Yahoo Web Search…

    […]Search Contacts Web Part « Zieglers[…]…

  3. tesdoglover said

    I followed all the steps but i keep getting 404 NOT FOUND

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

 
%d bloggers like this: