Isn't it funny sometimes how resolutions to problems just randomly hit you days later? That happened to me yesterday. Bamboo Solutions has a powerful search product called List Search Simple Web Part (also note it has a sister Web Part called List Search Advanced Web Part) where unlike the complex search capabilities of MOSS 2007, or even the search capabilities of WSS v3, you can easily define a specific list and set of columns to search on.
After configuring the Web Part, the user will see a straightforward simple search interface. Notice that the controls for each criteria change automatically based on the type of column selected.
Another option with List Search Simple Web Part is the ability to allow users to search across all columns based on a single string. This is particularly useful if you want to search all columns for a specific subject, as each column criteria has an "OR" operand similar to SharePoint search box. This option in the Web Part Tool Pane is called Include Key Word Search.
The interface updates slightly for the end user as shown below:
As mentioned above, Search in All Columns for is very similar to SharePoint search but with one glaring difference: We can scope it easily to a single list or library where SharePoint's search requires complex modifications to the results grid. As a result, customers are attracted to the List Search Simple Web Part but become disappointed with the fact that they cannot have just Search in All Columns for displayed, since by design we require at least one column to be selected also.
Well fear not, I had an epiphany last night and have a solution! With the List Search Simple Web Part, to provide the most amount of flexibility possible, Bamboo allows the ability to modify the layout and CSS of the Web Part display. In the following solution I will explain how you will select one column and then hide that column from view using Display:None and wala, only the Search in All Columns for is displayed. In this example I am connecting to a Task list in my site:
The resulting search interface is:
Now we will open the Web Part Tool Pane again and change Select Style from Default to Custom and click Source Edit:
A window will appear with HTML text layout. The first step is to delete all of the text as shown as it is just a sample layout and will not be used. If you are familiar with HTML, this is equivalent to the snippet of code found in the <body> tags. Here you build out the layout and include any text you want in the view. The only difference is that you use predefined Controls to display either field controls (text box, date, drop down menus), column Labels *optional*, and search action controls (Search button, Reset button, Print button and Search All Columns).
When you insert one of the controls into your HTML page, you will notice the control is defined with a special label, for example Search Button control is [@Control:BtnSearch]. Also, like a standard HTML page, you can include CSS classes, either on the page by inserting CssClass="[ClassName]" in the appropriate locations, or on a specific control itself by defining it in the control's text. For example, if you want to introduce CSS on the Search button, it would look like [@Control:BtnSearch CssClass="test"] where the class name is test.
Now that I have provided a very high level introduction to modifying the Source, here is the text you want to place in the window shown above:
<table>
<tr>
<td>
[@Field:Title CssClass="HideControl"]
</td>
</tr>
<tr>
<td>
Search in All Columns for:
</td>
<td>
[@Control:TxtKeywords]
<td>
</tr>
<tr>
<td>
[@Control:BtnSearch]
</td>
<td>
[@Control:BtnReset]
</td>
</tr>
</table>
Notice the highlighted text in the above code. This is the column I included in my Search Configuration. This could be different for you, so you might have to update this line. Click Save to the window when you have completed that change. Next, click on CSS Edit button in the Web Part Properties Tool Pane:
In this window, various fixed CSS classes can be updated, but we are going to focus on actually adding a new CSS class. Insert the following text into the provided CSS file:
.HideControl
{display:None}
Click Save, then click Apply, and then OK to the Web Part Tool Pane. Notice that the view has changed to now display only the Search in All Columns for as shown below. Note: if you do not see the update, try a hard refresh (i.e., hold CTRL then hit F5).
Happy Customizing!
Posted
Oct 08 2008, 08:14 AM
by
Jeff Kozloff
As Senior Product Manager at Bamboo Solutions, Jeff brings over 12 years of Bamboo experience to the Product Management Team. Overseeing Web Part and Components Division of the Bamboo Solutions product portfolio (over 40 products), Jeff defines product roadmap, works closely with Sales and Support to improve product stability, and the marketing team for promotion of products through Bamboo Storefront and mailings.