Search Bar

Search Bar

Download PDF

Search Bar

A search bar is a common user interface element which accepts text from the user that can then be used to search or filter the data displayed. It acts as an easy way to implement and manage the search within the content.


The search bar can be used to manage search within few controls.

    Keywords:
  • View
  • Text View
  • Text Field
  • Table View

Properties

  • Display
    PARAMETER
    DESCRIPTION
    Placeholder

    The styled string that is displayed when there is no other text in the text field.

    Search Bar Style

    The appearance of the navigation bar.

    SearchBar Bar Style

    A search bar style that specifies the search bar’s appearance.

    Shows Cancel Button

    A Boolean value indicating whether the cancel button is displayed.

    Autocapitalization Type

    Sets the Auto-capitalization style for the text object.

    Autocorrection Type

    Sets the Auto-correction style for the text object.

    Keyboard Type

    Choose from the range of available types and set the keyboard style associated with the text object.

    User Interaction Enabled

    A Boolean value that determines whether user interaction is ignored or not on the particular object.

    Alpha

    Used to set the transparency to the Search Bar which ranges from 0 to 1.

    Background Color

    Used to set the background color to the Search Bar.

    Tint Color

    The tint color of the navigation bar.

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    Search Type

    This property is for setting search criteria to be applied while searching. Following are the options, you can select from:-
    1) Begins With :- Returns are values that begin with search string
    2) Any Where :- Returns are values that contain search string

    Enable Online Search

    A boolean value which will be used to provide search online.

    Animate Cancel Button

    This property is for enabling cancel button animation on Search Bar. If this property is enabled then cancel button will be shown when user is editing search bar and will be hidden when user dismisses keyboard; else cancel button will always be shown.

    Cancel Button Title

    This property sets title to be shown on cancel button of Search Bar. Default title would be "Cancel".

    CIT Keyboard Appearance

    This property is for setting keyboard appearance for Search Bar. Following are the options you can select from:-
    1) Default - light
    2) Alert - dark

    Cancel Button Background Color

    This property is for setting background color for cancel button of Search Bar.

    Search Text Color

    Sets the color of the Text for the Search Bar.

    Search Text Font Name

    This property is for setting font for Search Bar.

    Search Text Font Size

    This property is for setting font size for search text.

    Search Text Field BackGround Image

    This property is for setting background image for search text field.

    Search Icon Image

    Sets image for search icon. (Magnifying glass icon)

    Clear Icon image

    Sets the image for clear button on Search Bar.

    Cancel Icon Image

    This property is for setting image for search bar cancel button

    Search Bar Background Image

    This property is for setting background image for Search Bar.

  • Custom Border
    PARAMETER
    DESCRIPTION
    Border Width

    Sets border width for a Search Bar.

    Border Corner Radius

    Sets radius with which control's rounded corners should be drawn. Setting this property will enable control appear with rounded corners.

    Border Color

    Sets the border color for a control. Works only if "Border Width" property is set to a value more than 0. Default would be black color.

    Dash Width For Dashed Border

    Sets width of each dash in dashed border pattern for a control.

    Space Between Dashes For Dashed Border

    Helps set the spacing between Dashes for Dashed Border.

    Transform Angle

    Sets angle in degrees to which the Search Bar which is in its normal state, has to be rotated. Possible values for this property are -360 to 360.

  • Horizontal
    PARAMETER
    DESCRIPTION
    Horizontal Group

    Group of horizontal android default properties.

    Reference Type

    Reference type is the the default property to set selected view with respect to other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginLeft : Specifies extra space on the left side of this view. This space is outside this view's bounds.
    marginRight : Specifies extra space on the right side of this view. This space is outside this view's bounds.

    Offset Value

    Offset Value defines the extra space value in the pixel.

    Center Horizontal

    This property centers the child horizontally with respect to the bounds of its parent view.

    Apply Horizontal Custom Properties

    If any of the horizontal layout setting parameter(s) are selected then this value is selected to indicate user applied horizontal custom layout setting parameter(s).

  • Vertical
    PARAMETER
    DESCRIPTION
    Vertical Group

    Group of vertical android default properties.

    Reference Type

    These are the android default properties to set selected view with respect of other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginTop : Specifies extra space on the top side of this view. This space is outside this view's bounds.
    marginBottom : Specifies extra space on the bottom side of this view. This space is outside this view's bounds.

    Offset Value

    Value defines the extra space value in pixel.

    Center Vertical

    This property centers the child vertically with respect to the bounds of its parent view.

    Apply Vertical Custom Properties

    If any of the vertical layout setting parameter(s) are selected then this value is selected to indicate user applied vertical custom layout setting parameter(s).

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Search Bar.

    YPos

    Sets the Y position of the Search Bar.

    Width

    Sets the width of the Search Bar.

    Height

    Sets the height of the Search Bar.

    Object ID

    Sets unique identifier for the control. Control can be referenced with name set in this property for configuration.

    Object Parent ID

    Set "Object ID" of Search Bar which contains this control or can serve as parent.

    Key Name To Data

    Sets the web service key from data received from web server, which corresponds to the value to be displayed on the control.

  • Display/Text
    PARAMETER
    DESCRIPTION
  • Layout Setting
    PARAMETER
    DESCRIPTION
    Layout Width

    Sets the width of the view
    match_parent/fill_parent : Takes the width as its parent view
    wrap_content : Takes the width as its content’s width

    Horizontal

    Group of horizontal android default properties.

    Bottom

    For instance, a Bottom value of 2 will push the view's content by 2 pixels to the top of the bottom edge.

    Layout Height

    Sets the height of the view
    match_parent/fill_parent : Takes the height as its parent view
    wrap_content : Takes the height as its content’s height

    Apply Custom Properties

    If any of the layout setting parameter(s) are selected then this value is selected to indicate user applied custom layout setting parameter(s).

    Top

    For instance, a Top value of 2 will push the view's content by 2 pixels to the bottom of the top edge.

    Center In Parent

    This property centers the child vertically with respect to the bounds of its parent view.

    Right

    For instance, a Right value of 2 will push the view's content by 2 pixels to the left of the right edge.

    Left

    The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific amount of pixels.


    For instance, a Left value of 2 will push the view's content by 2 pixels to the right of the left edge.

    Default Min Height

    The height of the view cannot be less than the given value.
    If user select “Default Min Height” then android default value is taken otherwise it takes 0dp.

    Default Min Width

    The width of the view cannot be less than the given value.
    If user select “Default Min Width” then android default value is taken otherwise it takes 0dp.

    Vertical

    Group of vertical android default properties.

  • Display/AdvanceText
    PARAMETER
    DESCRIPTION
    Hide

    Hiding an element can be done by checking ‘Hide’. This property lets you hide the control.


    Advance - Sets auto resizing with respect to superview, for Search Bar.

  • Hidden
    PARAMETER
    DESCRIPTION

Actions

  • Search clicked

    This event is triggered when search button on keypad of search bar is tapped. Any actions you want perform when search button is tapped can be configured in "Search clicked" event listed in ”ACTION(S)” tab of Search Bar control.

  • Begin Editing

    This event is triggered when user starts typing the text in the Search Bar.

  • While Editing

    This event is triggered while editing search bar i.e, when a character is entered or deleted from search bar. Any actions you want to configure (like WSCall action for loading search results based on changed text) while user is editing search bar can be configured in "While Editing" event listed in "ACTION(S)" of "Search Bar" control.

  • End Editing

    The action related to this event will be called when user has completed editing the text in the Search Bar.

  • Search Cancelled

    This event is triggered when cancel button on search bar is tapped. Any actions you want perform when cancel button is tapped can be configured in "Search Cancelled" event listed in ”ACTION(S)” tab of Search Bar control.

  • Text Cleared

    This event is triggered when user clears text of a Search Bar. So any actions you want to configure when Search Bar text is cleared can be configured in "Text Cleared" event listed in "ACTION(S)" tab of "Search Bar" control.

Remarks

  • CIT Keyboard Appearance

    CIT provides you this unique feature for changing Keyboard Appearance for search bar, which is not available in native. You can use “CIT Keyboard Appearance” property for this.

  • Enable Online Search

    CIT lets you load search results dynamically from API based on the search text typed in search bar. You need to enable “Enable Online Search” property and configure “Trigger Data Source(API Call)” action in “While Editing” event of search bar.

  • Search Type

    You can search criteria for filtering data i.e, records which start with search text should be filtered or records that contain search text anywhere should be filtered. You need to use “Search Type” property for this.

  • Object Parent Id

    If you are using search bar control to filter Table View, Grid View, Map View records, you need to set search bar control’s “Object Parent Id” property to that particular control.