1.877.226.2662

Document Category: List Search Simple

List Search

List Search

ListSearch.pngPerform Powerful Searches and Get More Targeted, Relevant Results with List Search

List Search Simple and List Search Advanced enable users to easily create customizable search interfaces which they can use to perform powerful queries. Users will benefit from the ability to simplify complex searches while still achieving advanced functionality beyond the search capabilities of out-of-the-box SharePoint.

Whether you are looking to provide the option to control which columns are displayed in your search results or sort and filter results and print them directly from your site, our List Search Web Parts have the powerful capabilities you need to maximize search our SharePoint. List Search Simple and List Search Advanced can be purchased separately or bundled together to further enhance search on SharePoint.

List Search – Simple

When you configure this Web Part for users, you provide them with the ability to perform focused searches on list columns by using the preconfigured search criteria. Users can additionally search all columns within a list, select default values in search fields, and print the search results or export them to Excel. Additional properties include the ability to:

  • Select which list you want to search and the specific fields from the list that you want to search with.
  • Indicate that the search is always an And search or an OR search.
  • Select which List view you want to use to display the search results.
  • Select whether you keep the search criteria on the same page with the search results.
  • Allow users to select default values in search fields.
  • Allow users to print the search results.
  • Allow users to perform a key word search in all list columns.
  • Translate the Web Part user interface to French, Spanish, German or English, or customize the translation to a language of your choice.
  • Customize the look and feel of the Web Part user interface by modifying the HTML source code and Web Part CSS.

List Search – Advanced

Allow end users more control over their search options with our Web Part. The end user can select the list to search and the list view for displaying search results, use Boolean operators to narrow the information in the search results, and group search criteria. In addition, users can search within List Rollup data view, created by a Bamboo List Rollup Web Part. Additional properties include the ability to:

Specify a set of lists to be available for the user to select from for searching.
Keep the search criteria on the same page with the search results.
Allow users to print the search results.
Disable lookup fields to control Web Part performance.
Translate the Web Part user interface to French, Spanish, German or English, or customize the translation to a language of your choice.

I see more results than I expect

I see more results than I expect

Issue

You went to the search page to search for Tasks, entered xxx in the Task Name box and clicked Search. The results you see list Tasks that don’t have xxx in the name. Why is that?

more results than expected.png

Resolution

auto-fill1.pngOften users don’t notice that some criteria is configured by default when the search page appears. They enter their criteria and click Search. Since they didn’t specifically enter other criteria, they are surprised when they seem to get more results than they expected.

In the example shown in the search screen shot above, the Priority and Task Status columns are auto-filled with the default value. In addition, the Search Criteria Joining Operator is set to OR. Thus, the result set includes tasks that have “xxx” in the Task Name, or Priority set to “(2) Normal”, or Task Status set to “Not Started”.

Highlights of List Search Advanced

Highlights of List Search Advanced

ListSearch.pngIf you need to search one or more lists, List Search Advanced helps you yield maximum search results. Bamboo Solutions offers two search web parts and both present a simple, straightforward search interface for a single list without confusing field lists. Our web parts allow users to modify the scope of the search and also allow for AND/OR operator functions, providing functionality beyond the basic search capabilities of SharePoint.

List Search Advanced allows end users more control over their search options. The end user can select the list to search, and the list view for displaying search results. Users can use Boolean operators to narrow the information in the search results, as well as grouping their search criteria.

You can configure List Search Advanced to:

  • Specify a set of lists to be available for the user to select from for searching
  • Search within a List Rollup data view, created by a List Rollup (sold separately)
  • Allow AND as well as OR operators to be included in the search criteria
  • Allow criteria to be grouped to control the order of the search operation
  • Force users to type in text when a Lookup field is selected rather than select from a drop-down list that may contain too much data
  • Search within a List Rollup data view, created by a Bamboo List Rollup Web Part
  • List Search Advanced provides you with the flexibility to easily create an advanced search interface to allow end users to perform a complex query on a large list such as Issues or Tasks using all available fields with Boolean operators and grouping

Highlights of List Search Simple

Highlights of List Search Simple

ListSearch.pngIf you need to search a single list, List Search Simple helps you yield maximum search results. Bamboo Solutions offers two search web parts and both present a simple, straightforward search interface for a single list without confusing field lists. Our web parts allow users to modify the scope of the search and also allow for AND/OR operator functions, providing functionality beyond the basic search capabilities of SharePoint.

List Search Simple allows end users more control over their search options. The end user can choose to enter search criteria for any displayed column or if not sure which column to search in, can search in across all columns in a single list.

When you configure this Web Part for users, you provide them with the ability to perform focused searches on list columns by using the preconfigured search criteria. Users can additionally search all columns within a list, select default values in search fields, and print the search results or export them to Excel. Additional properties include the ability to:

  • Select which list you want to search and the specific fields from the list that you want to search with.
  • Indicate that the search is always an And search or an OR search.
  • Select which List view you want to use to display the search results.
  • Select whether you keep the search criteria on the same page with the search results.
  • Allow users to select default values in search fields.
  • Allow users to print the search results.
  • Allow users to perform a key word search in all list columns.
  • Translate the Web Part user interface to French, Spanish, German or English, or customize the translation to a language of your choice.
  • Customize the look and feel of the Web Part user interface by modifying the HTML source code and Web Part CSS

Filtering Search Results with Column Headers as Filter Values

Filtering Search Results with Column Headers as Filter Values

Return to Working With Search Results

If the option to Enable filtering from column headers is checked in the Search Results Configuration, you will be able to filter the search results.

Icon-WarningIMPORTANT: As with SharePoint List Views, some column types (i.e., Multiple Lines of Text) cannot be sorted or filtered.

search results with filter menu with spotlight.pngOn the column that you want to filter with, hover over the column header with your cursor to access a menu. Choose to filter from this menu.

To clear the filter, select Clear Filter from… from the column header menu. This is similar to the method used to filter a SharePoint list view.

Example of Customized Styles in Search Criteria

Example of Customized Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying several styles in Search Criteria

The table below shows an example of a modification to the Search Criteria Styles while keeping the default layout. Changes were made to all the TextBox classes.

Default Custom

Default simple search styles.png

The default values of the classes changed for the custom display are shown below.

.TextBoxSearchKeyWord
{
min-width:350px;
}
.TextBoxControls
{
min-width:350px;
}
.MultiTextAreaControls
{
min-height:50px;
min-width:350px;
}
.TextBoxControlsCurrency
{
width:135px;
}
.TextBoxControlsNumber
{
width:135px;
}
.TextBoxControlsDateTime
{
width:135px;
}

result with colorful text boxes.png

The changes made to the CSS for the above display were the addition of the background-color parameters shown below:

.TextBoxSearchKeyWord
{
min-width:350px;
background-color: #FFFF00 !important;
}
.TextBoxControls
{
min-width:350px;
background-color: #FF00FF !important;
}
.MultiTextAreaControls
{
min-height:75px;
min-width:350px;
background-color: #C0C0C0 !important;
}
.TextBoxControlsCurrency
{
background-color: #00FF00 !important;
width:100px;
}
.TextBoxControlsNumber
{
width:100px;
background-color: #0000FF !important;
}
.TextBoxControlsDateTime
{
width:100px !important;
background-color: #FF0000 !important;
}

colorkey with class names.pngColor Key:

Customize Search Criteria Styles

Customize Search Criteria Styles

Overview of List Search Criteria Customization

Modifying the default Styles of the Search Criteria

It is possible to modify the Layout of the search criteria and also the Styles used. You can keep the default layout and just change the styles. Styles are stored in a Cascading Style Sheet (CSS) file. If you are interested in changing the Layout, please see
Customize Search Criteria Layout.

click to modify styles.pngOn the Look and Feel Settings page accessed from the Preferences section of the Web Part Settings, click Modify CSS to access the style sheet for this instance of the web part.

Icon-Tip It’s a good idea to save contents of the default style sheet to your local PC before making any changes. Once you make changes, there isn’t a reset button.

For specific information about the different types of search criteria you may want to style, see the sample search below.
default simple search UI with nums.png

  1. Column Labels
  2. Text Box Controls
  3. Choice & Lookup Columns
  4. Multi-line Text Controls
  5. Date Columns
  6. Person or Group Columns
  7. Number Columns
  8. Currency Columns
  9. Search in all columns for Control
  10. Buttons

    icon-video1 Check this video

To modify the overall style of the default search criteria table (i.e., borders, padding, background color), see Customize the Overall Style for the Search Criteria.

To see some examples, check these:
Example of Customized Styles in Search Criteria

Video:Change the Style of the Search Results in Simple Search Web Part

Customize Search In All Columns Text Box Display Style in Search Criteria

Customize Search In All Columns Text Box Display Style in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Style for Search in all columns Text Box

The .TextBoxSearchKeyWord class is used for styling the box where search criteria for searching in all columns is entered. The default setting for the TextBoxSearchKeyWord is

.TextBoxSearchKeyWord
{
min-width:350px;
}

The default display looks like the box to the right of the Task Name: label shown below. Priority is a choice type column and is shown for comparison.

search in all columns for1.png

The table below shows examples of common changes possible to the Text Box. Examples not included may also be possible.

Change Example
To make the control longer so users can more easily enter lots of text, change the min-width to something larger than 350px

Change to:

.TextBoxControls
{
min-width:550px;
}

The result looks like this:

search in all columns for - longer.png

Customize Search Results Styles

Customize Search Results Styles

Overview of the Simple Search Configuration Tool Pane

Modifying the default Styles for Search Results

click to modify styles.pngOn the Look and Feel Settings page accessed from the Preferences section of the Web Part Settings, click Modify CSS to access the style sheet for this instance of the web part.

Icon-Tip Save the default style sheet to your local PC before making any changes.

Default Search Results display styles are shown below. They do not inherit the styles of the site, so it may be necessary to modify the styles in your implementation.

default search results with nums.png

Different classes are associated with each area of the results display:

Class Default

.ResultTableStyle

This class defines the general style of the results table.

 
.ResultTableStyle
{
border-style:none ;
width:100% ;
height:auto ;
}
1

.ResultTableHeaderStyle

This class controls the style for Header row of the results list.

 
.ResultTableHeaderStyle
{
width:auto ;
height:auto ;
}
2

.ResultAlternatingItemStyle

This class controls the style for the even numbered rows in the results list.

 
.ResultAlternatingItemStyle
{
 background: none repeat scroll 0 0 #F2F2F2 !important;
}
.ResultAlternatingItemStyle a
{
color:#0072BC !important;
}
3

.ResultNormalItemStyle

This class controls the style for the odd numbered rows in the results list. These rows have a white background by default.

 
.ResultNormalItemStyle
{
}
.ResultNormalItemStyle td a
{
color:#0072BC !important;
}
4

.ResultTableFooterStyle

This class controls the style for the footer row of the results list. This is the row that shows that page navigation.

 
.ResultTableFooterStyle
{
}

The table below shows examples of common changes possible for Search Results. Additional examples may also be possible.

Change Example
Change the color scheme from blue to green.

icon-video1 Check this Video

Make these changes:

.ResultTableHeaderStyle
{
background: none repeat scroll 0 0 #CCE698!important;
font-weight: bold !important;
width:auto ;
height:auto ;
}
.ResultAlternatingItemStyle
{
 background: none repeat scroll 0 0 #D6EBAD!important;
}
.ResultAlternatingItemStyle a
{
}
.ResultNormalItemStyle
{
 background: none repeat scroll 0 0 #EAF5D6!important;
}
.ResultNormalItemStyle td a
{
}
.ResultTableFooterStyle
{
background: none repeat scroll 0 0 #CCE698!important;
}
.ResultTableStyle
{
border-style:none ;
width:80% ;
height:auto ;
}

The result looks like this:

results formatted.png

Icon-Tip Check this video to see a change being made.

Customize Text Box Display Styles in Search Criteria

Customize Text Box Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Text Boxes

The .TextBoxControls class is used for the box where search criteria for columns of type single line of text is entered. The default setting for the TextBoxControls is

.TextBoxControls
{
min-width:350px;
}

The default display looks like the box to the right of the Task Name: label shown below. Priority is a choice type column and is shown for comparison.

text box length before1.png

The table below shows examples of common changes possible to the Text Box. Examples not included may also be possible.

Change Example
To make the control longer so users can more easily enter lots of text, change the min-width to something larger than 350px

Change to:

.TextBoxControls
{
min-width:550px;
}

The result looks like this:

text box length after2.png

NOTE: This control impacts just columns of type single line of text. Notice that the length of the Priority column selection has not changed. Priority is a choice type column.
To change the background color of the control, add a background-color property.

Change to:

.TextBoxControls
{
min-width:550px;
background-color: #CCE698 !important;
}

The result looks like this:

background color2.png

NOTE: If you don’t add !important, the color will not appear.
Change the display of the Label. The label is the text that appears to the left of the text box. All labels have the same class, regardless of the type of column. See this article for examples of how to change them.

Customize the Overall Style for the Search Criteria

Customize the Overall Style for the Search Criteria

Return to Customize Search Criteria Styles

Modifying the Style for the default table layout

A default Search Criteria style display is shown below.

table format default.png

.LayoutTableStyle is the classes associated with the overall layout. The default setting for that class is:

.LayoutTableStyle
{
width:100% ;
height:auto ;
}

The table below shows examples of common changes possible for Currency columns. Additional examples may also be possible.

Change Example
To add a border around the search criteria, add a border property.

For example, make these changes:

.LayoutTableStyle
{
border: 5px solid black;
width:100% ;
height:auto ;
}

The result looks like this:

table format with black border cropped.png

NOTE: Search results displayed on the same page will appear outside the border.
Add a border, background color, and some padding around the search criteria.

Make these changes:

.LayoutTableStyle
{
border: 2px solid green;
padding: 15px;
background-color: #CCE698 !important;
width:100% ;
height:auto ;
}

The result looks like this:

table format with background padding and border.png

NOTE: Search results displayed on the same page will appear outside the border.

Customizing CSS for List Search

Customizing CSS for List Search

hw11a_LookFeelCSSEditor.jpg Each CSS element is listed in the CSS Editor, along with any styles currently defined for it. Add CSS style attributes as desired to customize how elements are displayed in the Web Part.

As an example, should you choose to modify the attributes of the search button for your user interface, you can do that within the style “.SearchButtonStyle” changing the width and height from auto to your selection in pixels.

Icon-Warning IMPORTANT: If unique CSS class names are defined in the layout HTML Editor, they should be added to the CSS class definitions in the CSS Edit window.

Below is a list of the default CSS classes defined for the List Search Simple Web Part:

Style Description
SearchButtonStyle, ResetButtonStyle, PrintButtonStyle, ExportButtonStyle, and BackButtonStyle

Define the look and feel of the Search, Reset, Print, Export, and Back buttons.

NOTE: If the option Keep Search Criteria with Search Result Page is not checked, the Print Preview and Back buttons are not customizable in the Search Results view.
TextBoxSearchKeyWord Defines the look and feel of the Search in all columns for: text box.
LabelControls Defines the look and feel of the Field Label controls.
TextBoxControls Defines the look and feel of the Field Controls that are text boxes.
TextAreaControls Defines the look and feel of the Field Controls that are text areas.
ListBoxControls Defines the look and feel of the Field Controls that are list boxes.
DropDownListControls Defines the look and feel of the Field Controls that are drop down menus.
CheckBoxControls Defines the look and feel of the Field Controls that are check boxes.
RadioButtonControls Defines the look and feel of the Field Controls that are radio buttons.
ResultTableStyle Defines the general style of the search results table. Settings can include border style, background style and alignment.
ResultTableHeaderStyle Defines the background color for the column headers of the search results table.
ResultNormalItemStyle Defines the background color for the odd number search result rows (rows 1, 3, 5, …).
ResultAlternatingItemStyle Defines the background color for the even number search result rows (rows 2, 4, 6, …).

Customize Currency Display Styles in Search Criteria

Customize Currency Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Currency

A default Currency display is shown below associated with the column Cost. If the Is Between operator (designated #1 below) is selected, the display changes slightly to reveal the word and and a second text box control (see #3 below). Task Status is a choice type column and is shown for comparison.

cost control before.png
cost control before1.png

Different classes are associated with each control included with the Cost column search criteria:

Class Default
1. The .DropDownListControlsCurrency class is used to control the display of the drop down menu that lists the possible operators (i.e., Is Equal To, Is Less Than). 
.DropDownListControlsCurrency
{
min-width:120px ;
}
2.

The .TextBoxControlsCurrency class is used for the box where search criteria for columns of type currency is entered. When the operator In Between is selected, a second box appears. It is controlled by the same class.

Icon-WarningNOTE: When the operator In Between is selected, a second box appears. This class also controls that second box.

 
.TextBoxControlsCurrency
{
min-width:135px;
}
3. The .LabelControlsCurrency class is used for the word and that appears between the two text boxes when the operator Is Between is selected. 
.LabelControlsCurrency
{
width:auto ;
float: right !important;
}

The table below shows examples of common changes possible for Currency columns. Additional examples may also be possible.

Change Example

To shorten the control where you enter the currency value, change the min-width value of the .TextBoxControlsCurrency class.

To shorten the control where you select the search operator (i.e., Is Equal To), change the min-width value of the .DropDownListControlsCurrency class.

For example, make these changes:

.TextBoxControlsCurrency
{
min-width:100px;
}

.DropDownListControlsCurrency
{
min-width:100px;
}

The result looks like this:

currency after changes.png
When a user enters invalid text into the search area for a currency column, an error is displayed. The .LabelControlsCurrencyError class controls the display of the message.

The default error display is:
currency error before.png
Change the text to blue:

.LabelControlsCurrencyError
{
color: #0000FF;
width:auto ;
}

The result looks like this:

currency error after.png
Change the font weight and color of the word and that appears when the user chooses the operation In Between. The .LabelControlsCurrency class controls the display of this word.

Change the text to bold and green:

.LabelControlsCurrency
{
color: #FF0000;
width:auto ;
font-weight: bold;
color: #008000;
}

The result looks like this:

cost in between after.png
Change the display of the Label. The label is the text that appears to the left of the operator selection drop down. All labels have the same class, regardless of the type of column. See this article for examples of how to change them.

Customize Date Display Styles in Search Criteria

Customize Date Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Dates

A default Date display is shown below associated with the column Due Date. If the Is Between operator (see #1 below) is selected, the display changes slightly to reveal the word and and a second text box control (see #3 below). Assigned To is a Person or Group type column and is shown for comparison.

Date before 1 with num.png
Date before 2 with num.png
date with is NEar1.png

Different classes are associated with each control included with the Date column search criteria:

Class Default
1. The .DropDownListControlsDateTime class is used to control the display of the drop down menu that lists the possible operators (i.e., Is Equal To, Is Less Than). 
.DropDownListControlsDateTime
{
min-width:120px ;
}
2. Unfortunately, in the current version of List Search Simple, there is no available class for controlling the style of the Date picker control.
3. The .LabelControlsDateTime class is used for the word and that appears between the two date-pickers when the operator Is Between is selected. 
.LabelControlsCurrency
{
width:auto ;
float: right !important;
}
4. The .TextBoxControlsDateTime class is used for the box displayed when the operator Is Near is selected. 
.TextBoxControlsDateTime
{
min-width:135px;
}

The table below shows examples of common changes possible for Date columns. Additional examples may also be possible.

Change Example
To shorten the control where you select the search operator (i.e., Is Equal To), change the min-width value of the .DropDownListControlsDateTime class.

For example, make this change:

.DropDownListControlsDateTime
{
min-width:100px;
}

The result looks like this:

date after 1a.png
Change the font weight and color of the word and that appears when the user chooses the operation In Between. The .LabelControlsDateTime class controls the display of this word.

Change the text to bold and green:

.LabelControlsDateTime
{
color: #FF0000;
width:auto ;
font-weight: bold;
color: #008000;
}

The result looks like this:

date after 2a.png
Change the display of the Label. The label is the text that appears to the left of the operator selection drop down. All labels have the same class, regardless of the type of column. See this article for examples of how to change them.

Customize Label Display Styles in Search Criteria

Customize Label Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Labels

The .LabelControls class is used for labels. The default setting for the LabelControls is

.LabelControls
{
width:auto;
}

The default display looks like the labels shown below.

text box length before2.png

Icon-WarningIMPORTANT: The .LabelControls class does NOT control the label for the Search in all columns for text box. There is currently no default class available to control that label.

The table below shows examples of common changes possible to Labels. Examples not included may also be possible.

Change Example

To right justify the labels, add a float property.

NOTE: Use float instead of text-align when using the default layout. In the default layout, the .LabelControls class is inside a <b> tag, so Text-align will not affect it.

Change to:

.LabelControls
{
width:auto ;
float: right !important;
}

The result looks like this:

right justify labels.png

NOTE: If you don’t add !important, the altered alignment will not appear.
To change the text color of the labels, add a background-color property.

Change to:

.LabelControls
{
width:auto ;
float: right !important;
color:#008000;
}

The result looks like this:

label style after.png
To change the font for the labels, add a font-family property.

Change to:

.LabelControls
{
width:auto ;
float: right !important;
color:#008000;
font-family: Times;
}

The result looks like this:

set the font family.png

Customize List Search Results

Customize List Search Results

Overview of the Simple Search Configuration Tool Pane

Each CSS element is listed in the CSS Editor, along with any styles currently defined for it. Add CSS style attributes as desired to customize how elements are displayed in the Web Part. Watch our video to see how you can change the list search results

Below is a list of the default CSS classes defined for the List Search Simple Web Part:

Style Description
WebPartStyle defines the styling of the Search Criteria table and Search Results table. Here you can define general format, such as alignment, border, and font styles.
SearchButtonStyle, ResetButtonStyle, PrintButtonStyle, ExportButtonStyle, and BackButtonStyle

define the look and feel of the Search, Reset, Print, Export, and Back buttons.

NOTE: If the option Keep Search Criteria with Search Result Page is not checked, the Print Preview and Back buttons are not customizable in the Search Results view.
TextBoxSearchKeyWord defines the look and feel of the Search in all columns for: text box.
LabelControls defines the look and feel of the Field Label controls.
TextBoxControls defines the look and feel of the Field Controls that are text boxes.
TextAreaControls defines the look and feel of the Field Controls that are text areas.
ListBoxControls defines the look and feel of the Field Controls that are list boxes.
DropDownListControls defines the look and feel of the Field Controls that are drop down menus.
k-multiselect defines the look and feel of the Choice and Lookup Controls that are drop down menus.
CheckBoxControls defines the look and feel of the Field Controls that are check boxes.
RadioButtonControls defines the look and feel of the Field Controls that are radio buttons.
ResultTableStyle defines the general style of the search results table. Settings can include border style, background style and alignment.
ResultTableHeaderStyle defines the background color for the column headers of the search results table.
ResultNormalItemStyle defines the background color for the odd number search result rows (rows 1, 3, 5, …).
ResultAlternatingItemStyle defines the background color for the even number search result rows (rows 2, 4, 6, …).

If unique CSS class names are defined in the layout HTML Editor, they should be added to the CSS class definitions in the CSS Editor window.

For example, if you would like the background color on all odd rows of your search results list to be light yellow, you can change the style as follows:

   ResultNormalItemStyle="yellow"

See also:

Customize Multi-line Text Box Display Styles in Search Criteria

Customize Multi-line Text Box Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Multi-line Text Boxes

The .MultiTextAreaControls class is used for the box where search criteria for columns of type multiple lines of text is entered. The default setting for the MultiTextAreaControls is

.MultiTextAreaControls
{
min-height:50px;
min-width:350px;
}

The default display looks like the box to the right of the Description: label shown below. Priority is a choice type column and is shown for comparison. The Task Name column is also shown for comparison.

multiline before.png

The table below shows an example of a common change possible to the Text Box. Other examples may also be possible.

Change Example
To make the control taller so users can more easily enter lots of text, change the min-height to something larger than 50px

Change to:

.MultiTextAreaControls
{
min-height:75px;
min-width:350px;
}

The result looks like this:

multiline after75.png

NOTE: This control impacts just columns of type multiple lines of text. Notice that the height of the Priority and Task Name columns have not changed.

Also, the multi-line text control will display vertical scroll if a lot of text is entered. You will not be able to set the min-height to something less than what is needed to display the scroll bar.
multiline with scroll showing.png

Customize Number Display Styles in Simple Search

Customize Number Display Styles in Simple Search

Return to Customize Search Criteria Styles

Modifying the default Styles for Numbers

A default Number display is shown below associated with the column % Complete. If the Is Between operator (designated #1 below) is selected, the display changes slightly to reveal the word and and a second text box control (see #3 below). Task Status is a choice type column and is shown for comparison.

number before1 with num.png
number before2 with num.png

Different classes are associated with each control included with the Number column search criteria:

Class Default
1. The .DropDownListControlsNumber class is used to control the display of the drop down menu that lists the possible operators (i.e., Is Equal To, Is Less Than). 
.DropDownListControlsNumber
{
min-width:120px ;
}
2.

The .TextBoxControlsNumber class is used for the box where search criteria for columns of type number is entered.

Icon-WarningIMPORTANT: When the operator In Between is selected, a second box appears. This class does not control that second box. There is no class available in the current version to control that box.

 
.TextBoxControlsNumber
{
min-width:135px;
}
3. The .LabelControlsNumber class is used for the word and that appears between the two text boxes when the operator Is Between is selected. 
.LabelControlsNumber
{
width:auto ;
float: right !important;
}

The table below shows examples of common changes possible for Number columns. Additional examples may also be possible.

Change Example

To shorten the control where you enter the currency value, change the min-width value of the .TextBoxControlsNumber class.

To shorten the control where you select the search operator (i.e., Is Equal To), change the min-width value of the .DropDownListControlsNumber class.

For example, make these changes:

.TextBoxControlsNumber
{
min-width:100px;
}

.DropDownListControlsNumber
{
min-width:100px;
}

The result looks like this:

number after 1.png
When a user enters invalid text into the search area for a currency column, an error is displayed. The .LabelControlsNumberError class controls the display of the message.

The default error message appears like this:

number error before.png
Change the text to blue:

.LabelControlsNumberError
{
color: #0000FF;
width:auto ;
}

The result looks like this:

number error after.png
Change the font weight and color of the word and that appears when the user chooses the operation In Between. The .LabelControlsNumber class controls the display of this word.

Change the text to bold and green:

.LabelControlsNumber
{
color: #FF0000;
width:auto ;
font-weight: bold;
color: #008000;
}

The result looks like this:

number after 2.png
Change the display of the Label. The label is the text that appears to the left of the operator selection drop down. All labels have the same class, regardless of the type of column. See this article for examples of how to change them.

Overview of List Search Criteria Customization

Overview of List Search Criteria Customization

Overview of the Simple Search Configuration Tool Pane

Default simple search styles.pngBy default, search criteria are listed vertically in the Web Part, one per line, in the order defined in the Search Columns list in the Search Criteria Configuration page. The styles used in the display are inherited from the site theme. An example is shown here.

It is possible to modify the layout, the styles, or both to get a display very different than the default.

For more information about each, please see:

Customize Button Display Styles in Search Criteria

Customize Button Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Buttons

There are several buttons displayed in the List Search Simple user interface, depending on how you configure the web part. Each has its own class to control the style. By default, the available buttons look like this:

search in all columns for1.png

NOTE: If the search is not configured to display results and criteria on the same page, the Print, Export to Excel, and Back buttons will appear on the results page.

The associated classes and default values are shown in the table below:

Button Class
Search

.SearchButtonStyle

The default setting is:

.SearchButtonStyle
{
width:auto ;
height:auto ;
}
Reset

.ResetButtonStyle

The default setting is:

.ResetButtonStyle
{
width:auto ;
height:auto ;
}
Print

.PrintButtonStyle

The default setting is:

.PrintButtonStyle
{
width:auto ;
height:auto ;
}
Export to Excel

.ExportButtonStyle

The default setting is:

.ExportButtonStyle
{
width:auto ;
height:auto ;
}
Back

NOTE: This button appears on the Search Results page if the web part is not configured to show results and criteria on the same page.

.BackButtonStyle

The default setting is:

.BackButtonStyle
{
width:auto ;
height:auto ;
}

The table below shows examples of common changes possible to buttons. Examples not included may also be possible.

Change Example
To add a border around a button, add a border property

Change to:

.SearchButtonStyle
{
width:auto ;
height:auto ;
border: 5px solid red;
}

The result looks like this:

button after border change.png

NOTE: The default layout of the List Search Simple has some formatting configured associated with the hover event. The border color and the background will change to a color inherited from the site theme. If you add the above change with the !important qualifier, the inherited hover behavior may be overruled.
To round the corners of the button, add a border-bottom-left-radius property along with the properties for the other corners.

For example, change to:

.SearchButtonStyle
{
width:auto ;
height:auto ;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border-top-left-radius: 2em;
border-top-left-radius: 2em;
}

The result looks like this:

round button corners.png
To bold the font of the button text, add a font-weight property.

For example, change to:

.SearchButtonStyle
{
width:auto ;
height:auto ;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border-top-left-radius: 2em;
border-top-left-radius: 2em;
font-weight: bold;
}

The result looks like this:

bold font.png

Customize Choice and Lookup Selection Display Styles in Search Criteria

Customize Choice and Lookup Selection Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Choice and Lookup Selections

A default Choice Selection display is shown below associated with the column Priority. Task Name is a single line of text type column and is shown for comparison. The second image shows the expanded choice selection list.

choice default1a.png
choice default2 -shows dd2.png

The table below shows examples of common changes possible for Choice and Lookup columns. Additional examples may also be possible.

Change Example
The .BambooComboBox class controls the display of the Choice and Lookup Selection list. To lengthen it, change the width value.

The default configuration for the control is:

.BambooComboBox
{
width:355px !important;
}

To lengthen the control, make this change:

.BambooComboBox
{
width:555px !important;
}

The result looks like this:

choice after1.png
and
choice after2.png
Change the display of the Label. The label is the text that appears to the left of the operator selection drop down. All labels have the same class, regardless of the type of column. See this article for examples of how to change them.

Complementary Products for List Search Simple

Complementary Products for List Search Simple

sharepointsolutions.pngYou will find many of our products complement each other quite nicely saving you the time and trouble to write custom code. With Bamboo at the heart of your SharePoint investment, you gain access to a huge catalog of enhancements, components, and accessories that add the critical functionality your business requires.

The same components can be easily used in future applications and they all come from a single, trusted vendor, ensuring an easy purchase process and support you can count on. That’s the Bamboo Way!