Search widget

[tab:Actions]

The search widget is used along with one or more Content List widgets; it allows you to control the content to be displayed by changing search parameters. After starting the search the widget will send selected parameters to related Content List widgets and these will automatically update, showing the desired content.

We suggest you to have a look at the Interactive Demo of the Widget Framework in order to have a look at the possibilities offered by this application.

 

Configuration parameters

 

  • clientId (string, mandatory): it is the domain name used to access your THRON service code.
  • appId (string, mandatory): id of the application which has been activated inside the Marketplace and which you are going to use to access content (you will find the id in the Management page in the application itself). This parameter is used to verify if the app is active and is a valid type
  • forceUserToken (boolean, optional): this parameter forces the widget to use the token configured in the core even if an appId has been configured. Might be a different token such as a user's token with specific access rights on content.
  • linkedWidgets (array of strings, mandatory): this parameter is an array of Content List widgets (JS variable referring to each one of them) used for configuring on which ones the search will operate.
  • dictionaryLocale (string, optional): this parameter is used to set the language to be used by the widget’s interface, you can use the language codes provided by ISO 639-1 standard, “uppercase style” (e.g.: "EN", "IT"). If not configured, the default will be "EN". To configure the language with translations of the strings in various languages see paragraph 1.1.
  • dictionaryName (string, optional): this parameter specifies the name of the dictionary to use for the widget, the language file for the widget must reference to this name for being used with the widget. Default “default”.
  • toggleAdvanced (boolean, optional): this parameter is used to decide whether the advanced search interface will be opened or not on widget load. If "true" the interface will be opened, default is "false". 
  • locales (string, optional): this parameter is used to configure available languages within the advanced search; you can use the codes provided by ISO 639-1, “uppercase style” (e.g.: "EN", "IT"). If not configured, the default will be "EN".
  • tagClasses (string, optional): this parameter is used to configure the classes of tags on which the search widget will operate. It is a csv string with the id of the classes (e.g.: "classId1, classId2, classId3").
  • customMetadatas (string, optional): this parameter is used to configure the ability to select the metadata on which the search will operate. The parameter is a csv string with the key of each metadata.
  • customCssClass (string, optional): this parameter is used to configure the suffix to be used by CSS classes within the widget, so you can have more widgets in the same page avoiding name collisions.
  • autocompleteFilter (string, optional): this parameter is used to configure how the autocomplete should match the elements to show. Available values: “contains”,”startswith”,”endswith”. Default “contains”.
  • maxElements (number, optional): this parameter allows you to configure the maximum number of results returned by the autocomplete element when searching for tags.
  • searchTagsSimple (boolean, optional): this parameter allows you to set wether the autocomplete function for tags should appear on the input field while using simple search. Default true.
  • interfaceSwitch (number, optional) : this parameter is used to configure the widget dimension under which the widget will switch to mobile interface. Default “660”.
  • forceMobile (boolean, optional): this parameter is used to force the mobile interface in the widget if set to true. Default “false”.

 

Search internationalisation

 

Search widget’s internationalization has some peculiarities since it presents variable strings used for custom metadata and classes’ labels. In order to properly initiate such values you will have to add them manually in the dictionary by using the following method:

  • For custom metadata you will have to create a key with the form “TYPE_METADATA_ <metadatakey>” (e.g.: TYPE_METADATA_sapid).
  • For classes you will have to create a key with the form “TYPE_CLASS_ <classificationId>” (e.g.: TYPE_CLASS_qh56ma).

 

Functions that can be invoked on this widget

 

On the search widget you will be able to invoke the toggleAdvancedPanel function. This function is used to programmatically open or close the advanced search panel, so that it can operate without the need for the user to click it.

 

Events

 

  • THRON.widget.event.INTERFACE_TRIGGER: the event is launched when you open or close the advanced search panel. The second parameter shows the details of the event an object is returned, in the form {action: “search_advanced”, status : true / false}; the action parameter is used to distinguish what type of event has been launched; the status parameter is true when the panel is open, false when it has been closed.
  • THRON.widget.event.SEARCH_STARTED: the event is launched every time a search is initiated.
  • THRON.widget.event.SEARCH_CANCEL: the event is launched every time a search is canceled.

 

Search widget's rendering

 

In order to exclude specific elements from the advanced search of the widget you don’t need any additional configuration; simply hide the block via CSS, using the appropriate class. It is always recommended to use rules that depart from the widget’s name, in order to avoid influencing all the widgets within the page in case there is more than one widget in your page.

The defined blocks are:

  • THRON-search-type-container: block used to select content types.
  • THRON-search-fields-container: block used to select fields/metadata on which the search will operate.
  • THRON-search-date-container: block used to filter by date.
  • THRON-search-locales-container: block used to select the language on which the search will be performed.
  • THRON-search-tags-operator-container: block used to select the operator used by the tag search, default is “AND”.
  • THRON-search-tags-container: this is a series of blocks, one for each configured class, hiding these blocks is not necessary since you will be able to exclude the class from the widget’s configuration.
  • THRON-submit-advanced-search-container: block containing the button to launch the search.

[/tab][tab:Code Samples]

Customizing widget's behavior with functions and events

The events and functions offered by the widgets allow the developers to define further behaviours based on the user interaction.

[dropdown:Disabling “simple search” field upon opening the advanced search]

The request is structured as follows: Disable the “simple search” text field when the user opens the “Advanced” search panel; turn it back on when the “advanced” menu is being closed.

You can easily implement this behaviour by specifying some additional logic in your Javascript integration code: the search widget launches the “Advanced search panel opened / closed” events, which you can listen to by attaching the related event listener.

When your trigger fires, you can disable the input field by Javascript as follows:

 

//To disable the input use:

$(".THRON-search-default .THRON-search-input").attr("disabled","disabled");

//To enable the input use:

$(".THRON-search-default .THRON-search-input").removeAttr("disabled");

[/dropdown][dropdown:Close the “advanced search” panel when the search starts] 

The request is structured as follows: When the user launches an advanced search by clicking the button, automatically close the advanced search panel.

You can implement this behavior by listening to the “Search started” event; in the triggered function, when this event is fired, you may call the

 

var searchWidget = new THRON.widget.Search(searchParams);

function on the Search module asking for the advanced search panel to be closed as follows:

 

searchWidget.toggleAdvancedPanel()

[/dropdown][/tab] 

Was this article helpful?
0 out of 0 found this helpful

Have any question?

Open a ticket
Comments