Controls: SEARCHABLE_LIST

What you will learn in this chapter
SEARCHABLE_LIST control, Attributes
Tutorials: How to create a Searchable list
Other lists: Simple List, Section List
Reference: Actions, Data Sourcing, appearance

SEARCHABLE_LIST control

You can display a searchable list by using the control SEARCHABLE_LIST. This list allows the user to narrow down the list items displayed on the LIST control by specifying the search criteria.

Search result can be specified to

  • Display a list of all words that INCLUDE the letter / letters typed in the search criteria edit box. (default behaviour)
  • Display a list of all words that begin with the letter / letters typed in the search criteria edit box. (define attribute search_criteria=”BEGINS_WITH”)

SEARCHABLE_LIST control, is defined differently for Android and iOS. See the use of attribute os below. os="1" defines that the control should be displayed in iOS. os="6" means that the control should be displayed in Android (Google or Amazon) devices. You can define both in the same xml file when designing a cross platform app.

In XMADL SEARCHABLE_LIST control is defined as follows.

<!-- for Android -->
<control type="SEARCHABLE_LIST"......search_criteria=".." os="6">
    <control type="EDIT" ..........hint="..."/>
    <control type="LIST".....................>
        <control .........../>
        <control .........../>
    </control>
</control>
<!-- for iOS -->
<control type="SEARCHABLE_LIST".....ios_list_style="sectioned_list" ..search_criteria=".." os="1">
    <control type="SEARCH"..................>
    <control .........../>
     <control .........../>
</control>

Attributes

Attribute Value Mandatory
type SEARCHABLE_LIST Yes
search_criteria

BEGINS_WITH - display all words that begin with the character(s) typed.

INCLUDES - display all the words that include the the character(s) typed.

default is BEGINS_WITH
ios_list_style sectioned_list (ios only) Yes
x   Yes
y   Yes
width   Yes
height   Yes
appearance_name   Yes
data_type JSONARRAY, CURSOR default is CURSOR
local_data_source sql query No
remote_data_source url No

Note

If the data_type is CURSOR, then local_data_source must be defined. Learn more about Data Sourcing

Example:

<control type="SEARCHABLE_LIST" x="0" y="0" width="100"
        height="100" appearance_name="black" os="6" search_criteria="BEGINS_WITH">
        <control name="search_box" type="EDIT" x="1" y="1" width="98"
                height="8" appearance_name="edit_box" hint="search" os="6"
                permission="READWRITE" />
        <control type="LIST" x="0" y="10" width="100" height="100"
                appearance_name="black" data_type="CURSOR"
                local_data_source="select list_item_id as _id, item, category from myshopping_list where (item like &apos;%SEARCH%&apos; or category like &apos;%SEARCH%&apos;)order by item"
                os="6">
                <control type="TEXT" x="3" y="2" width="27" height="7"
                        appearance_name="black" data_type="VARCHAR"
                        field_name="item" os="6" />
                <control type="TEXT" x="35" y="2" width="50" height="7"
                        appearance_name="black" data_type="VARCHAR"
                        field_name="category" os="6"/>
        </control>
</control>
<control type="SEARCHABLE_LIST" x="0" y="0" width="100"
        height="100" appearance_name="black" os="1"
        local_data_source="select list_item_id as _id, item, category from myshopping_list where item like &apos;%SEARCH%&apos; order by item">
        <control name="search_box" type="SEARCH" x="1" y="1" width="98"
                height="8" appearance_name="edit_box" os="6"
                permission="READWRITE" />
        <control type="TEXT" x="3" y="2" width="27" height="7"
                permission="READONLY" appearance_name="black" data_type="VARCHAR"
                field_name="item" os="1" />
        <control type="TEXT" x="35" y="2" width="50" height="7"
                permission="READONLY" appearance_name="black" data_type="VARCHAR"
                field_name="category" />
</control>

In the example above, the search_criteria=”BEGINS_WITH”. Look at the result list below.

../_images/searchable_list_blank_small.png ../_images/searchable_list_small.png ../_images/searchable_list1_small.png