SearchPane

The search pane can be used to show a search interface for selecting content / products or other items. Typical use case is usage in a toolbar plugin, for example, an integration with a digital asset management (DAM) system. The plugin can add the ability to select an image from the DAM and insert it in the content. Typically, the plugin adds an icon to the toolbar and clicking on the icon, shows a search interface for the DAM content. The user selects an image and the plugin implementation makes sure the image is added to the content. This SearchPane offers a search interface with possible facets at the left side, a search box and different views. The SearchPane must be extended and the plugin developer needs to implement the search function: see example below.

Example

define([
// @formatter:off
  "dojo/_base/declare",
  "dojo/on",
  "dojo/_base/lang",
  "../store/myStore",
  "blueconic/api/widgets/search/SearchPane"
// @formatter:on
], function(declare, on, lang, myStore, SearchPane) {

  // extend the search pane
  return declare("mywidget.MySearchPane", [SearchPane], {

    postCreate: function() {
      // call the super
      this.inherited(arguments);

      // set the initial search query to "financial"
      this.set("searchTerm", "financial");
    },

    // this function needs to be implemented
    search: function() {
      // make sure the loader is shown before the ajax call is performed
      this.showLoader();

      myStore.query().then(lang.hitch(this, function(data) {
        // update the number of search results
        this.set("totalResults", data.totalResults);

        // update the search results itself
        this.setSearchResults(data.items);

        // update the facets and facet values at the left pane
        this.setFacets(data.facets);

        // hide the loader
        this.hideLoader();
      }));
    }

  });
});

Properties

searchTerm

The keyword which is used for the search.

totalResults

The number of search results, which is shown at the top

Functions

addSelectedFacetValue(facet, facetValue)

Adds the supplied facet value as selected facet value.

Name	Type	Description
facet	blueconic.api.data.domain.Facet	The facet object which contains the facet value entry.
facetValue	blueconic.api.data.domain.FacetValue	The facet value object.

hideLoader()

Hides the main loader. This loader is shown over the left (which contains the facets) and right pane (which contains the search results).

hideResultsLoader()

Hides the search results loader. The loader is shown over the search results.

removeSelectedFacetValue(facet, facetValue)

Removes the supplied facet value as selected facet value.

Name	Type	Description
facet	blueconic.api.data.domain.Facet	The facet object which contains the facet value entry.
facetValue	blueconic.api.data.domain.FacetValue	The facet value object.

search()

Search is called, when the facets or the query changes. The default implementation does nothing: the extending widget needs to implement this. Typically, after the search, setSearchResults and setFacets is called.

setFacets(facets)

Updates the facets and facet values in the left pane.

Name	Type	Description
facets	Array.<blueconic.api.data.domain.Facet>	Array of facet objects which contains the updated facets and facet values.

setSearchResults(items)

Updates the search result in the right pane.

Name	Type	Description
items	Array.<blueconic.api.data.domain.SearchResult>	Array of search result objects

showLoader()

Shows the main loader. This loader is shown over the left (which contains the facets) and right pane (which contains the search results).

showResultsLoader()

Shows the search results loader. The loader is shown over the search results.

Events

onSelect(item)

When the user has selected a search result by clicking at the search result.

Name	Type	Description
item	blueconic.api.data.domain.SearchResult	The item which is selected

onSelectAndClose(item)

When the user has double clicked the search result: this means select and apply.

Name	Type	Description
item	blueconic.api.data.domain.SearchResult	The item which is selected