Results

Overview

Upon receiving the query from a search box, this component calls the API to send a /search request.

Usage

Create this component with the following code:

sdk.component('results', target:String, options:Object);

Sample

By default, this component looks like this:

Target

This is an HTML component. For example, the "#inbenta" target looks like this:

<div id="inbenta"></div>

Options

You can configure several options for this component:

Name Type Default Description
categoryId integer or string 0 KM App category ID. When a string, it is the category IDs separated by commas.
length integer 5 Maximum number of items that may be returned in collection. Minimum: 1. Max: 100
showBackButton boolean false Show back button with event 'back'
openUniqueContent boolean false When a search returns only one content, this content opens and a click is tracked.

Default options object

{
  categoryId: 0,
  length: 5,
  showBackButton: false,
  contents: { <more info in subcomponent> },
  ratings: { <more info in subcomponent> }
}

Methods

Methods can be used in this component.

Name Description
setQuery(query: String) Set the query parameter to make a search.
getSearchCode() Get the searchCode of the last search.
openContentById(contendId:Integer, doClick:Boolean) Open content by id. doclick true by default.
openContentBySlug(contendSlug:String, doClick:Boolean) Open content by slug. doclick true by default.
linkToSearchBox(component: Component) Link a search-box component to this results component. When the search-box is submitted, the query is changed
linkToAutocompleter(component: Component) Link a typeahead autocomplete component to this results component. When the autocompleter is clicked, the content is loaded.
updateActiveContent(contendId:Integer) Set the contentId parameter as the active content
setContentsDataInterceptor(interceptor:function) Set a contents interceptor.
setContents(contents) This method allows to populate the component with any array of contents desired. Contents object passed to the method has to have the same structure that the result obtained from the Inbenta KM API contents routes
setRelatedDataInterceptor(interceptor:function) Set a related interceptor.

Subcomponents

This component contains the following sub-components that you can configure:

Name Description
contents Component to render each content
ratings Component to render search rating

Note: This component has two different ratings: a search rating and a rating inside the contents component. The default configuration is only for search ratings.

Events

Events to listen on this component:

Name Params Description
back Click on the "Back" button
click content: content object clicked Click on Content
expand content: content object expanded Click to expand Content1
changed searchData: Object with the search data returned by the API The component change its results
rateContent data:Object with rating data Click on content ratings
rateSearch data:Object with rating data Click on search rating

1 Contents that open automatically are expanded by default and cannot be contracted. This happens with the option openUniqueContent and returns only one result, or when the component calls the openContentBySlug and openContentById methods.

Tracking

This component calls the API to do the following:

  • every time a search is performed, it sends a /search request to get the result of the question with the tracking option set to true.
  • when a user clicks on a result, it sends a click event using the /tracking/events endpoint.

A click is automatically tracked when the component is already opened because there is only one result and either

  • the openUniqueContent option is set to true, OR
  • it is forced by methods like openContentById or openContentBySlug

Labels

These are the labels for this component. You can replace the default labels of each component when you configure the SDK creation.

Name Default Description
RESULTS_TITLE Results: Results title
RESULTS_TEXT* Search results for Results text. Hidden by CSS.
RESULTS_NOT_FOUND_TITLE No results found This label appear as a title when no results are found.
RESULTS_NOT_FOUND_TEXT We’re sorry, but we couldn’t find any answer for your query. This label appear as a text when no results are found.
RESULTS_BACK_BUTTON* Back Text for the button that triggers a "Back" event. Only displayed when back buttom is active.

Examples

  • First example: Create results component linked to search-box.
var searchBox = sdk.component('searchBox', '#form');
var results = sdk.component('results', '#results');
results.linkToSearchBox(searchBox);
  • Second example: Create results and upon submission of the myForm form, triggers setQuery from the input to produce the component.
var results = sdk.component('results', '#results');
document.querySelector("#myForm").addEventListener("submit", function(e){
    results.setQuery(document.getElementById('inbentaInput').value);
});
  • Third example: Create results component linked to search-box with ratings.
var searchBox = sdk.component('searchBox', '#form');
var results = sdk.component('results', '#results', {
    ratings: {
    labels: {
        "RATINGS_INTRODUCTION": "Are these results relevant?",
            "RATINGS_COMMENT_INTRODUCTION": "Why these results are not relevant?"
    },
        elements:[
            {
                id:1,
                label: 'Yes',
                comment: false
            },
            {
                id:2,
                label: 'No',
                comment: true
            }
        ]
    },
});
results.linkToSearchBox(searchBox);
  • Fourth example: Populate results with contents obtained from the API.
var results = sdk.component('results', '#results', {});
sdk.client.getContentsById('2,14,10').then(function(response) {
    results.setContents(response.data);
});