Jun 27

 Search

WaveMaker allows you to add search capability via the search widget. Data Table widget has the Enable Search property which lets you add the search facility to your table.

In addition, you can use the Search widget for flexibility and control.

For the Search widget you can set the following properties:

  • Bind the Value dataset property of the search widget to the variable created from a Database or Web Service.
  • Set the Search key and Label Value properties to the column name you want to search by.
    Note: The Search Key, Label Value, and Image Source are bindable. For example, the Label Value can be bound to a field ‘deptcode’ or to a combination such as ‘deptcode+name’, using the expression option from the binding dialog.
  • Set the Type as:
    • autocomplete which would present a dropdown list of values for the user to select from; or
    • search (the default setting) where the filtered list of values is presented based on the user entry
  • Bind the outbound properties:
    • datavalue – which contains the dataset returned by the search to be bound to Live list or Data Table,
    • query – search text entered by the user
    • result – which contain the list of matches i.e. matches that are displayed in the dropdown while typing (note: the type of result is based on selected datafield, if set to “All Fields” the complete object is returned) and
    • show.
  • Use JavaScript – From the event tab, set the onSubmit event to JavaScript. The selected item can be accessed by ‘$event.data.item’ property

Properties

Property Description
Name The name is a unique identifier for your widget.
Type Type of the widget can be set to

  • autocomplete which would present a dropdown list of values for the user to select from; or
  • search (the default setting) where the filtered list of values is presented based on the user entry

Note: All the properties are the same for both types.

Placeholder A placeholder is a text to show in the editor when there is no value. A common use of this is a search box that says in faint gray italicized text “Search…” which disappears as soon as the user starts to edit the text box. This is a useful alternative to a caption if you are constrained in space and asking for something simple of the user.
Accessibility
Hint Any text or an HTML you enter for this property will be shown as a tooltip if the mouse hovers over this widget for 1.5 seconds.
Tab index The tab index attribute specifies the tab order of an element. You can use this property to change the default tabbing order for widget access using the tab key. The value can range from 0 to 32767. The default is 0 and -1 makes the element non-focusable.

NOTE: In Safari browsers, by default, Tab highlights only text fields. To enable Tab functionality, in Safari Browser from Preferences -> Advanced -> Accessibility set the option “Press Tab to highlight each item on a webpage”.

Shortcut Key The shortcut key property specifies a shortcut key to activate/focus an element.
The way of accessing the shortcut key is varying in different browsers
Internet Explorer – [Alt] + shortcutkey,
Chrome – [Alt] + shortcutkey (Windows/Linux) [Control] [Alt] + shortcutkey (MAC),
Firefox – [Alt] [Shift] + shortcutkey (Windows/Linux) [Control] [Alt] + shortcutkey (MAC),
Safari – [Alt] + shortcutkey (Windows) [Control] [Alt] + shortcutkey (MAC)
Layout
Width The width of your widget can be specified in px or % (i.e 50px, 75%).
Height The height of your widget can be specified in px or % (i.e 50px, 75%).
Dataset
Value Set this property to a variable to populate the list of values to display.
Search Key Property to be searched upon, in the list object.
Label Value This is the default value to display value for an editor widget. Note that the display value is just what the user sees initially, and is not always the dataValue returned by the widget.
Picture Source An image which displays along with the Label Value
Data field This property sets the dataValue to be returned by a select editor when the list is populated using the dataSet property.
Order by Field order
Default Value
Value This is the default value to display value for an editor widget. Note that the display value is just what the user sees initially, and is not always the data value returned by the widget.
Display Format
Limit Limits the search results to be displayed in the auto-complete.
Validation
Required A required editor in wm.LiveForm may refuse to save without a required field.
Behavior
Read Only Selecting this checkbox property prevents the user from being able to change the data value of a widget.
Show Showing determines whether or not a component is visible. It is a bindable property.
Load on Demand
(visible only when show property is bound to a variable)
When this property is set and show property is bound, the initialization of the widget will be deferred until the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
Disabled If the disabled property is true (checked) the value of the editor cannot change. The widget becomes display-only.
Min Chars

The minimum number of characters to be entered by the user before the search query is triggered. The value should be greater than 0. The default value is 1.
Graphics
Picture Width Using this property configure the width of the picture that is shown in typeahead results’ dropdown. Default value is set to ’16px’.
Message
Data loading message This message will be displayed when waiting for data to load.
Data complete message This message will be displayed when there is no more data to load.

Events

Event Description
Change This event handler is called each time your element’s value changes.
On Focus This event handler is called each time your element is focused.
On Blur This event handler is called each time your focus leaves your element.
Callback Events
On Submit This event handler is called whenever a submit event is triggered.
On Select This event handler is called when the tab is selected
On Before Service Call This event is triggered before sending the service call for fetching the search results. inputData can be modified in the event.

 
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy.