Search WebPart

This webpart component inherits the list webpart, and includes the ability to search item columns. A textbox will allow the user to quickly filter for results, based on the searchable columns.

Constructor The constructor allows the developer to specify a static configuration. An optional configuration webpart exists to allow the user to specify the configuration when editing the page.

Configuration

  • _Fields:Array_
    • An array of the searchable field information
  • ListName:string
    • The list name
  • TagPickerFl:boolean
    • Flag to determine the search textbox to display
  • WebUrl:string
    • The relative url to the web containing the list.

Query Options Specify the following values in the constructor:

  • _caml:string
    • The CAML query to execute against the target list.
  • _query:ODataQuery
    • The OData query to execute against the target list.

Events

  • onRenderContainer
    • An optional event to control how the webpart is rendered. The input property of this event are the list items.
  • onRenderItem
    • The required event to return the item component. The input property of this event is the list item.

Configuration WebPart (Optional) The search configuration webpart displays a custom panel to allow the user to select the following:

  • List
    • Drop down list of available lists in the target web
  • Searchable Fields
    • A tag picker supporting the following field types of the selected list
      • Choice/Multi-Choice
      • Lookup/Multi-Lookup
      • Managed Metadata
      • Text
      • URL
  • Tag Picker
    • A checkbox to determine the search textbox to display
    • Checked
      • Renders a tag picker text box to display a filtered set of values, based on the text entered.
    • Unchecked
      • Renders a text box to auto-filter based on the text entered.
  • Web Url
    • Relative url to the web containing the list
    • A blank value defaults to the current web

Events

  • onRenderContainer
    • An optional event to control how the webpart is rendered. The input property of this event are the list items.
  • onRenderItem
    • The required event to return the item component. The input property of this event is the list item.

Additional Information Reference this github project for an example of using the Search webpart.

Search This webpart generates a mapper for filtering the list data, based on the item data. The searchable fields are defined in the webpart’s configuration.