Keyword Search

Overview

The Keyword Search component uses this text and modifies it based on the parameters (such as character length and restricted character list) set by the developer and passes the modified text to the parent form or component controller.

The Keyword Search component also provides the following options.

• Cancel the search.
• Clear the user entered text in the search input box.

NOTE: The Keyword Search component is used inside the Mobile Banking application.

Keyword Search Contracts

The Keyword Search component contains contracts for customizing the widgets and UI of the component. The Keyword Search component contains the following contracts for customization.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• onError Event
• onSearch Event
• onCancel Event
• setContext Method
• setConfigFromParent Method
• resetSearchView Method
• setSearchFocus Method
• setKeywordSearchData Method

Service Parameters

The Service Parameters contract of the Keyword Search component provides services helps to set the service details to get the response data. The response data retrieved from the service is mapped to the widgets using the Data Mapping property and then displayed on the screen.

Here is a sample of the JSON object provided in the Service Parameter of the Keyword Search component.

{
  "ObjectName": {
    "ServiceType" : "",
    "Service": "",
    "Object": "",
    "Verb": "",
    "Criteria": {}
  }
}

The Service Parameter contract provides the following key-value pairs for customization.

Data Mapping

The Data Mapping property of the Keyword Search component maps the widget IDs, i18n keys, text, and the response data to the various keys. Data Collection Object, Context variable, or Service response provides the response data for mapping.

Here is a sample of the JSON object provided in the Data Mapping of the Keyword Search component.

{
	"txtSearchBox": {
		"placeholder": "Enter search text here",
		"restrictChar": "#@",
		"maxCharacters": "10",
		"rightPaddinginDP": "80",
		"skins": {
			"focus": "flxWhitePrimary500S",
			"regular": "flxWhiteGrey200S"
		}
	},
	"searchWithCancelView": true,
	"btnCancel": {
		"text": "Cancel"
	}
}

The Data Mapping contract is assigned a JSON object with the following key-value pairs.

Data Formatting

The Data Formatting property is used to provide a custom format for a specific requirement. By default, the Keyword Search component does not contain any customization.

{}

Conditional Mapping Key

The Conditional Mapping Key is used to define mapping based on a criterion.

For example, if a label defined in the UI must display different data according to the type of account, a developer must set the Conditional Mapping Key property to the following value. By default, the Keyword Search component does not contain any value for this key.

{}

Conditional Mapping

The Conditional Mapping property key is used to map a widget with a data from Collection Object or service response as per the Conditional Mapping key. By default, the Keyword Search component does not contain any customization for this key.

{}

onError event

The OnError event is invoked when an error occurs during the user journey. When the onError event is invoked, an error object is passed to the parent widget. This object contains the information about the error as well as where it had occurred.

var errordata = {
	"level": "ComponentViewController",
	"method": "render",
	"error": err
};
this.onError(errordata);

onSearch Event

The onSearch event is invoked when the user clicks the Search button inside the component. The event passes the user entered text to the parent widget in a String format. The text is formatted as per the characters that are restricted and maximum characters that are set.

this.onSearch(SearchText);

onCancel Event

The onCancel event is triggered when the user clicks the Cancel button. This event passes the user entered text to the parent widget.

this.onCancel(SearchText);

setContext Method

This method is invoked inside the parent component or form controller. This method is used to pass a text used to the input box in place of the entry in the input box.

this.view.keywordSearch.setContext(SearchText);

setConfigFromParent Method

This method is used to set the configurations from the parent component to the List component when the Keyword Search component is placed inside another component.

var configParams = {
	"serviceParameters": "this._keywordSearchServiceParameters",
	"dataMapping": "this._keywordSearchDataMapping",
	"dataFormatting": "this._keywordSearchDataFormatting",
	"conditionalMappingKey": "this._keywordSearchConditionalMappingKey",
	"conditionalMapping": "this._keywordSearchConditionalMappingKey"
};
this.view.keywordSearch.setConfigsFromParent(configParams);

resetSearchView Method

This method resets the component to display the initial view of the search using the values set in the Data Mapping contract by default.

this.view.keywordSearch.resetSearchView();

setSearchFocus Method

This method enables the input field's focus when the soft keypad is open.

NOTE: As per the native platform behavior, the setFocus method works only in the postShow event of the parent form or the Component controller.

this.view.keywordSearch.setSearchFocus(true);

setKeywordSearchData Method

This method re-initializes the component dynamically at runtime. To re-initialize, the setKeywordSearchData method invokes the preShow event of the component.

this.view.keywordSearch.setKeywordSearchData();