Tag: How to configure List Search Simple

When this option is checked, the columns displayed in the search results, number of items displayed, and the item sort order will match the settings configured for the list view selected in the Available List Views drop-down list.

Additionally, checking Display List View Selector will allow end users to select an existing list view to determine which columns are shown in the search results.

NOTE: Changing the list view configuration in the SharePoint list will affect the search results display in List Search Simple.

If you are worried about someone changing your selected list view without letting you know, you can configure the search results display options specifically for this instance of your List Search Simple. Choose this option.

Select the columns to be displayed by highlighting the column in the Available Columns list and clicking the > button to move it into the Selected Columns list.

Control the number of items to display per results page as well as the item sort order.

Highlight several columns at once by holding the CTRL key while selecting the next column in the Available Columns list.

• Display both search criteria and search results: When this option is checked, search results will be displayed below the search criteria. When the option is unchecked, the search criteria will be replaced by search results.
• Allow printing of search results: When this option is checked, the Print button is available on the search results screen.
• Allow export of search results to Excel: When this option is checked, the Export to Excel button is available on the search results screen.
• Enable filtering from column headers: When this option is checked, users can filter and sort search results using the column headers as filter and sort values to narrow and sort their search respectively.
• Enable CallOut Preview Menu (Availble for Document Libraries in SharePoint 2013 Only): When this option is enabled, classic context menu will be replaced with SharePoint 2013 callout menu that display the preview of the document as well as other properties to manage document.
• Highlight search terms in results: When this option is enabled, search queries and terms are highlighted in the result set.

In the Enter a SharePoint site URL box, type the path to the SharePoint site that contains the list or library to search. The site can be part of any site collection in the Web application. Site URLs can be absolute (http://servername/site) or relative (./site).

Bamboo recommends using a relative URL, especially if the Web application has multiple access points using Alternative Access Mappings (AAM) or if the Web Part will be saved as part of a site template.

IMPORTANT: The HTML provided in the HTML Editor window is a sample only and must be replaced by your custom HTML. If you find the content in the editor hard to read and you need to scroll back and forth, click the Wrap Text button at the bottom of the window.

NOTE: By default, search criteria are listed vertically in the web part, one per line, in the order defined in the Search Columns list in the Configure Search Criteria page.

Field Control contains a list of the search columns defined in the Search Criteria Configuration page. Add a Field Control so users can search on a column. Select a column to insert and provide a CSS class name that can be used later to define the style for the column (optional).

IMPORTANT: Don’t manually add any fields that you didn’t specifically include in the search during the Search Criteria Configuration. They will not appear.

Place your cursor in the HTML Editor where you want to insert the column and click the <<Insert button. The following text will be inserted:

[@Field:InternalFieldName CSSClass=”ClassName”] 

Where:

• @Field defines the type of control (i.e., text box, radio button, selection list) added to the page. The field control is based on the column type.
• InternalFieldName is the internal name of the search column. An internal name of a column is also the original column name when the column is created. When a column is first created in a list, the internal/original name and display name match. When the column is renamed, the display name updates to the new name but the internal/original name remains the same.
• CSSClass= is an optional parameter that allows you to define a unique CSS style to the Field Control.
• ClassName is the name of the class to apply to the control.

IMPORTANT: If you want to include the Search in all columns for search criteria box, you will find it in the Search Control list (see Step 6 below). It is not a Field Control. Adding it to your layout adds the following text:

[@Control:TxtKeywords CssClass="TextBoxSearchKeyWord"]

Field Label also lists search columns defined in the Search Criteria Configuration page. Use a Field Label as a label for a Field Control you added in Step 4.

: If you don’t want to use the Display Name of the column as the label, you can add regular text to your layout, rather than a Field Label. Adding a Field Label is optional.

Select a column, define a CSS class name (optional), and click <<Insert to add the label of the search column into the HTML Editor. The following text will be inserted:

[@DisplayName:InternalFieldName CSSClass=”ClassName”]

Where:

• @DisplayName defines the type of control added to the page. Field labels are typically text.
• InternalFieldName is the internal name of the search column. An internal name of a column is also the original column name when the column is created. When a column is first created in a list, the internal/original name and display name matches. When the column is renamed, the display name updates to the new name but the internal/original name remains the same.
• CSSClass= is an optional parameter that allows you to define a unique CSS style to the Field Control.
• ClassName is the name of the class to apply to the control.

Search Control lists control buttons and fields that can be inserted in the Web Part. Select a Search Control and enter a CSS class name (if desired). Put the cursor in the HTML Editor where you want the control to be displayed and click Insert. The following text will be inserted:

[@Control:BtnControlName CssClass="ClassName"]   

Where:

• @Control defines the type of control (i.e., BtnSearch, BtnReset) added to the page.
• BtnControlName is the name of the button. Available buttons are: BtnSearch, BtnReset, BtnPrint, and BtnExport. The last control in the list (TxtKeyWords) is not a button, but the control used to enter search text for the Search in all columns for box.

• CSSClass= is an optional parameter that allows you to define a unique CSS style to the Field Control.

  NOTE: In the current version, there is no available class for the txtKeyWords control

• ClassName is the name of the class to apply to the control.

Available controls include:

• Search Button will invoke the search request.
• Reset Button will clear the search results and search criteria from the Web Part.
• Print Button will provide the user the ability to print the search results from a printer-friendly window.
• Export Button will provide the user the ability to export search results to Microsoft Excel.
• Keywords TextBox will allow the user to Search in all Columns for results.

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;
}

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;
}

Color Key:

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.

For example, make these changes:

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

The result looks like this:

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

Make these changes:

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

The result looks like this:

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

Change to:

.TextBoxControls
{
min-width:550px;
}

The result looks like this:

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.

Change to:

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

The result looks like this:

NOTE: If you don’t add !important, the color will not appear.

.ResultTableStyle

This class defines the general style of the results table.

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

.ResultTableHeaderStyle

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

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

.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;
}

.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;
}

.ResultTableFooterStyle

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

.ResultTableFooterStyle
{
}

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:

Change to:

.TextBoxControls
{
min-width:550px;
}

The result looks like this:

.DropDownListControlsNumber
{
min-width:120px ;
}

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

IMPORTANT: 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;
}

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

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:

The default error message appears like this:


Change the text to blue:

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

The result looks like this:

Change the text to bold and green:

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

The result looks like this:

Change to:

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

The result looks like this:

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.

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.

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:

NOTE: If you don’t add !important, the altered alignment will not appear.

Change to:

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

The result looks like this:

Change to:

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

The result looks like this:

.DropDownListControlsDateTime
{
min-width:120px ;
}

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

.TextBoxControlsDateTime
{
min-width:135px;
}

For example, make this change:

.DropDownListControlsDateTime
{
min-width:100px;
}

The result looks like this:

Change the text to bold and green:

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

The result looks like this:

.DropDownListControlsCurrency
{
min-width:120px ;
}

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.

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

.TextBoxControlsCurrency
{
min-width:135px;
}

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

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:

The default error display is:

Change the text to blue:

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

The result looks like this:

Change the text to bold and green:

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

The result looks like this:

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:


and

.SearchButtonStyle

The default setting is:

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

.ResetButtonStyle

The default setting is:

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

.PrintButtonStyle

The default setting is:

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

.ExportButtonStyle

The default setting is:

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

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 ;
}

Change to:

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

The result looks like this:

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.

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:

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: