Text Controls

Label

The Label control implements a read-only text view. You can use this control to draw one or multiple lines of static text, such as those you might use to identify other parts of your user interface.

Now we will discuss in detail related to properties and actions of the label. Tapping on label will open the following window as shown below.

  • In properties tab, you can change any property of label and even can easily search using the search bar.
  • To configure various events related to label tap on action and configure it.

 

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

Advanced

  1. Label Text Vertical Alignment : The technique to use for aligning the text vertically.
    • Value - String : Choose any option from center, top, bottom in the drop down list to align respectively.

Display/Text

  1. Text Color : To change the text color of the label. Clicking on the box will open the picker as shown below.
    • Choose the color and tap on OK to change the background color of the view.
    • Choose none to apply clear color to the background of the view.
  2. Text : The text displayed by the label.
    • Value - String : This string is nil by default.
  3. Font - Family : The font of the text.
    • Value : The default value of this property is Helvetica-Bold. Tapping on will open the following window as shown below.
  4. Tapping on any of the font style in the list will set the font of the text of selected label.

  5. Font - Size : The font size of the text displayed by the label.
    • Value - float : The size (in points) to which the font is scaled. This value must be greater than 0.0.
  6. Minimum Font - Size : The size of the smallest permissible font with which to draw the label’s text.When drawing text that might not fit within the bounding rectangle of the label, you can use this property to prevent the receiver from reducing the font size to the point where it is no longer legible.
    • Value - float : The size (in points) to which the font is scaled. This value must be greater than 0.0.
  7. Shadow Color : The color of the label’s shadow.
    • Value - float : The default value of this property is clear color.
  8. Shadow Offset X : The offset (in points)in X - direction of the label’s shadow.
    • Value - float : The default value of this property is 0.0.
  9. Shadow Offset Y : The offset (in points)in Y - direction of the label’s shadow.
    • Value - float : The default value of this property is 0.0.
  10. Text Alignment : The technique to use for aligning the text.
    • Value - float : The default value of this property is left. You can choose left, right and center from the drop down list.
  11. Number of Lines : The maximum number of lines to use for rendering text.
    • Value - int : This property controls the maximum number of lines to use in order to fit the label’s text into its bounding rectangle. The default value for this property is 1. To remove any maximum limit, and use as many lines as needed, set the value of this property to 0.
  12. Line break mode : The technique to use for wrapping and truncating the label’s text.
    • Value : Choose following options for the alignment:
      1. Word Wrap : Wrapping occurs at word boundaries, unless the word itself doesn’t fit on a single line.
      2. Char Wrap : Wrapping occurs before the first character that doesn’t fit.
      3. Clip : Lines are simply not drawn past the edge of the text container.
      4. Truncate Head : The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. Although this mode works for multiline text, it is more often used for single line text.
      5. Truncate Tail : The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. Although this mode works for multiline text, it is more often used for single line text.
      6. Truncate Middle : The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. Although this mode works for multiline text, it is more often used for single line text.
  13. Adjust Font Size : A Boolean value indicating whether the font size should be reduced in order to fit the title string into the label’s bounding rectangle.
    • Value - int : The default value for this property is NO. If you change it to YES, you should also set an appropriate minimum font size by modifying the minimum FontSize property.

Display

  1. Enabled : A Boolean value that determines whether user events are ignored and removed from the event queue.
    • Value - bool :The default value for this property is NO. If you change it to YES, then events related to Label will be received by the app.
  2. Highlighted : A Boolean value indicating whether the receiver should be drawn with a highlight.
    • Value - bool : Setting this property causes the receiver to redraw with the appropriate highlight state. This control can be used as button control with proper highlight settings.
  3. Highlighted Color : The highlight color applied to the label’s text.
    • Value - Color : This color is applied to the label automatically whenever the highlighted property is set to YES. Tapping on will open the color picker. Choose appropriate color from picker apply it on the label’s highlighted text.

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Background Color
  2. User Interaction
  3. Alpha

Custom Border

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document..

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

HB Custom Properties

  1. Dynamic height for label : A Boolean value indicating whether the label ‘s height should increase as per the content.
    • Value - bool : Setting this to YES will automatically resize the label depending on the text on the label.
  2. Enable Marquee : A Boolean value indicating whether marquee is enabled for the label.
    • Value - bool : Setting this to YES will allow move text horizontally .
  3. Note : This will only work if the length of text of label is greater than the rect area of the label.

  4. Text Scrolling speed on label : A float value to determine the speed at which the label text is moving.
    • Value - int : The default value is 0.0. Text will only move if the value is greater than 0.0.
  5. Enable Html Label : A boolean value to enable label to behave same as webview(without scroll).
    • Value - bool : The default value is NO. If set to YES, label will handle the HTML data.
  6. Enable Underline : A bool value to allow underline under the text displayed in the label.
    • Value - bool : The default value is NO. If set to YES, the complete text in the label will be underlined.

Action

  • As shown in above figure the Label’s actions are almost similar to View ‘s actions which are discussed Controls - 1 Views . Please refer document of all the actions .

Textfield

A text field is a control that displays editable text. You typically use this control to gather small amounts of text from the user and perform some immediate action, such as a search operation, based on that text.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

Display/Text

  1. Placeholder : The string that is displayed when there is no other text in the text field.
    • Value - String : This value is nil by default. The placeholder string is drawn using a 70% grey color.

Below properties are explained in detail in Label Control. Please refer above.

  1. Text
  2. Text Alignment
  3. Text Color
  4. Font Family
  5. Font Size
  6. Minimum Font Size
  7. Adjust Font Size

Display/Image

  1. Background : The image that represents the background appearance of the text field when it is enabled.
    • Value -image : When set, the image referred to by this property replaces the standard appearance controlled by the borderStyle property. Background images are drawn in the border rectangle portion of the text field. Images you use for the text field’s background should be able to stretch to fit. This property is set to nil by default.
  2. Disabled Background : The image that represents the background appearance of the text field when it is disabled.
    • Value -image : Background images are drawn in the border rectangle portion of the text field. Images you use for the text field’s background should be able to stretch to fit. This property is ignored if the background property is not also set.

Display

  1. Border Style : The border style used by the text field.
    • Value : Choose following options for the style:
      1. Round Rect : Displays a rounded-style border for the text field.
      2. Solid Line : Displays a bezel-style border for the text field. This style is typically used for standard data-entry fields.
      3. Normal Line : Displays a thin rectangle around the text field.
      4. None : Displays text field with no border.
  2. Clears on Begin : A Boolean value indicating whether the text field removes old text when editing begins.
    • Value - bool : If this property is set to YES, the text field’s previous text is cleared when the user selects the text field to begin editing. If NO, the text field places an insertion point at the place where the user tapped the field.
  3. Auto Capitalization Type : The auto-capitalization style for the text object.
    • Value : Choose following options for the style:
      1. None : Do not capitalize any text automatically.
      2. Words : Capitalize the first letter of each word automatically.
      3. Sentences : Capitalize the first letter of each sentence automatically.
      4. All Characters : Capitalize all characters automatically.
  4. AutoCorrection Type : The auto-correction style for the text object.
    • Value : Choose following options for the type:
      1. Yes : Choose an appropriate auto-correction behavior for the current script system.
      2. No : Disable auto-correction behavior.
      3. Default : Enable auto-correction behavior.
  5. Keyboard Type : The keyboard style associated with the text object.
    • Value : Choose following options for the type:
      1. Default : Use the default keyboard for the current input method.
      2. Ascii Capable : Use a keyboard that displays standard ASCII characters.
      3. Number and Punctuation : Use the numbers and punctuation keyboard.
      4. URL : Use a keyboard optimized for URL entry. This type features “.”, “/”, and “.com” prominently.
      5. Number Pad : Use a numeric keypad designed for PIN entry. This type features the numbers 0 through 9 prominently. This keyboard type does not support auto-capitalization.
      6. Phone Pad : Use a keypad designed for entering telephone numbers. This type features the numbers 0 through 9 and the “*” and “#” characters prominently. This keyboard type does not support auto-capitalization.
      7. Name Phone Pad : Use a keypad designed for entering a person’s name or phone number. This keyboard type does not support auto-capitalization.
      8. Email : Use a keyboard optimized for specifying email addresses. This type features the “@”, “.” and space characters prominently.
  6. Keyboard Appearance : The appearance style of the keyboard that is associated with the text object.
    • Value : Choose following options for the appearance:
      1. Default : Use the default keyboard for the current input method.
      2. Alert : Use a keyboard that is suitable for an alert panel.
  7. Return Type : The contents of the “return” key.
    • Value : Choose following options for the type:
      1. Default : Set the text of the return key to “return”.
      2. Go : Set the text of the return key to “Go”.
      3. Google : Set the text of the return key to “Google”.
      4. Join : Set the text of the return key to “Join”.
      5. Next : Set the text of the return key to “Next”.
      6. Route : Set the text of the return key to “Route”.
      7. Search : Set the text of the return key to “Search”.
      8. Send : Set the text of the return key to “Send”.
      9. Yahoo : Set the text of the return key to “Yahoo”.
      10. Done : Set the text of the return key to “Done”.
      11. Emergency : Set the text of the return key to “Emergency”.
  8. Enable Return Key : A Boolean value indicating whether the return key is automatically enabled when text is entered by the user.
    • Value : The default value for this property is NO. If you set it to YES, the keyboard disables the return key when the text entry area contains no text. As soon as the user enters any text, the return key is automatically enabled.
  9. Secure Text Entry : Identifies whether the text object should hide the text being entered.
    • Value : This property is set to NO by default. Setting this property to YES creates a password-style text object, which hides the text being entered.

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Background Color
  2. User Interaction
  3. Alpha

Custom Border

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

Advanced

  1. Is Growing Textfield : A boolean value to enable text field to increase its height as per the content.
    • Value : If YES, the text field ‘s height will get bigger as the user types the content in it. The default value is NO.

HB CustomProperties

  1. Text Entry Restrictions : The restriction on the user’s entry of text in the text field.
    • Value : Restrict the number of characters than can be entered in the text field by the user. You can even set the minimum character that should be entered in the text field.

How to use?

max_length(int) : To insert maximum number of character in the text field. For e.g max_length(12) will allow to enter 12 maximum character in the text field.

min_length(int) : To insert minimum number of character in the text field. For e.g max_length(12) will allow to enter 12 minimum character in the text field.

To use max and min together

Example: min_length(10),max_length(12).

  1. Text Field Number Format : The formatting of the number entered by the user in the textfield .
    • Value : To formate the phone number , credit card number or debit card number by making use of some special characters.

How to use?

***-***-*** : Here “*“ indicates the number and “-” special character that we can insert in between the numbers. For e.g., if the format is something like that ***-***-**** then number will be formatted like this 123-456-7890.

  1. Input Accessory View ID : The control that will be displayed in the toolbar above keyboard when user will start entering data in the text field.
    • Value : Set any object ID of any control that is in the Main_View.
  2. Text field Left View Id : The overlay view displayed on the left side of the text field.
    • Value : Set any object ID of any control that is in the Main_View.
  3. Text field Right View Id : The overlay view displayed on the right side of the text field.
    • Value : Set any object ID of any control that is in the Main_View.
  4. Left View Mode : Controls when the left overlay view appears in the text field.
    • Value : Choose following options for the mode:
      1. UITextFieldViewModeNever : The overlay view never appears.
      2. UITextFieldViewModeWhileEditing : The overlay view is displayed only while text is being edited in the text field.
      3. UITextFieldViewModeUnlessEditing : The overlay view is displayed only when text is not being edited.
      4. UITextFieldViewModeAlways : The overlay view is always displayed.
  5. Right View Mode : Controls when the right overlay view appears in the text field.
    • Value : Choose following options for the mode:
      1. UITextFieldViewModeNever : The overlay view never appears.
      2. UITextFieldViewModeWhileEditing : The overlay view is displayed only while text is being edited in the text field.
      3. UITextFieldViewModeUnlessEditing : The overlay view is displayed only when text is not being edited.
      4. UITextFieldViewModeAlways : The overlay view is always displayed.
  6. hbInputViewID : The view that will be displayed instead of keyboard.
    • Value : Set any object ID of any control that is in the Main_View.

Action

As shown in above figure the Text Field’s actions description is given below.

  1. Load : The action related to this event will be called when system loads the texfield.
  2. Done Clicking : he action related to this event will be called when user has tapped done button in the toolbar above keyboard is clicked .
  3. End Editing : The action related to this event will be called when user has completed editing the text in the texfield.
  4. Begin Editing : The action related to this event will be called when user has starts typing the text in the texfield.

Textview

The TextView control implements the behavior for a scrollable , multi line text region. The class supports the display of text using custom style information and also supports text editing. You typically use a textview to display multiple lines of text, such as when displaying the body of a large text document.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

Display

Below property are explained in detail in ImageView Control. Please refer Controls - 1 Views document.

  1. Content Mode

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Background Color
  2. User Interaction
  3. Alpha

Below property are explained in detail in WebView Control. Please refer Controls - 1 Views document.

Detection

Below property are explained in detail in Text field Control. Please refer above

  1. Auto capitalization Type
  2. AutoCorrection Type
  3. Keyboard Type
  4. Keyboard Appearance
  5. Return Key Type
  6. Enable Return Key
  1. Show Horizontal Scroll : A Boolean value that controls whether the horizontal scroll indicator is visible.
    • Value : The default value is YES. The indicator is visible while tracking is underway and fades out after tracking.
  2. Show Vertical Scroll : A Boolean value that controls whether the horizontal scroll indicator is visible.
    • Value : The default value is YES. The indicator is visible while tracking is underway and fades out after tracking.
  3. Scroll Enabled : A Boolean value that determines whether scrolling is enabled.
    • Value - bool : If the value of this property is YES , scrolling is enabled, and if it is NO , scrolling is disabled. The default is YES. When scrolling is disabled, the textview does not accept touch events; it forwards them up the view behind textview.
  4. Paging Enabled : A Boolean value that determines whether paging is enabled for the scroll view.
    • Value - bool : If the value of this property is YES, the scrollview stops on multiples of the scroll view’s bounds when the user scrolls. The default value is NO.
  5. Bounces : A Boolean value that controls whether the scroll view bounces past the edge of content and back again.
    • Value - bool : If the value of this property is YES, the scroll view bounces when it encounters a boundary of the content. Bouncing visually indicates that scrolling has reached an edge of the content. If the value is NO, scrolling stops immediately at the content boundary without bouncing. The default value is YES.
  6. Always Bounce Horizontal : A Boolean value that determines whether bouncing always occurs when horizontal scrolling reaches the end of the content view.
    • Value - bool : If this property is set to YES and bounces is YES, horizontal dragging is allowed even if the content is smaller than the bounds of the textview. The default value is NO.
  7. Always Bounce Vertical : A Boolean value that determines whether bouncing always occurs when vertical scrolling reaches the end of the content view.
    • Value - bool : If this property is set to YES and bounces is YES, vertical dragging is allowed even if the content is smaller than the bounds of the textview. The default value is NO.

Custom Border

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

HB Custom Properties

Below property are explained in detail in Text field control. Please refer above.

  1. Text Entry Restrictions
  2. Input Accessory View Id
  3. HbInputViewID
  4. Placeholder Text
  1. Maximum Character Count : The counter of characters that is displayed at bottom right corner in the textview. The counter will decrement as the user types the character in the textview.
    • Value - int : By default it will be nil. If the counter is greater than 0 then the value will be displayed at the bottom.
  2. Enable Character Count : A Boolean value to show number of characters that can be type in the textview.
    • Value - bool : If this property is set to YES then the counter value will be displayed at the bottom right corner of the textview.

Display/Text

Below properties are explained in detail in Label Control. Please refer above.

  1. Text
  2. Text Alignment
  3. Text Color
  4. Font Family
  5. Font Size
  6. Minimum Font Size
  7. Adjust Font Size

Action

As shown in above figure the textview actions are almost similar to View ‘s actions which are discussed above. Please refer description of all the actions of textview as given above.

Autocomplete Text field

An autocomplete text field is a control that displays editable text. You can use this control to give user suggestions that he/she use to automatically enter in the text field, when user taps on suggestions . The suggestions will be displayed in the horizontal scrollview above the keyboard. To provide input to this control we need to configure datasource to display data coming from the web service. For data source configuration, please refer Datasource document.


Note : Add the action of the webservice call on the load event of the autocomplete textfield.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID
  1. Key to Data Index : To get related data(id, image) as output to any other control or to the web service from the selected data from the suggestions in the text field.
    • Value - String : Clicking on this property ‘s drop down list will give you option to select the web service key of the web service that you have successfully configured in the Data Source panel.
  2. Key to Data Source : Set the webserver key when there is multi level data in the webservice response.

Lets take the following example. In response we get json data somthing like given below:

data :     {

                Parent1   :    [

                       {

                            child:”SomeValue1”;

                      }

               ],

                Parent2   :    [

                      {

                           child:”SomeValue2”;

                      }

               ]

},

In this case we need to set Key To Data Source as Parent1 and Key Name to Data as Child.

Value - String

  • Clicking on this property ‘s drop down list will give you option to select the web service key of the web service that you have successfully configured in the Datasource panel.

HB Custom properties

Below properties are explained in detail in Text field Control. Please refer above.

  1. Text Entry Restrictions
  2. Textfield Number Format
  3. Input Accessory Veiw ID
  4. TextField Left View ID
  5. TextField Right View ID
  1. Suggestions View BG Color : The background color of the suggestions view that will appear below textfield.
    • Value - Color : To change the background color of the view. Clicking on the box will open the color picker form where you can choose the color.
  2. Suggestions Text Color : The text color of the text of the labels in the suggestions view.
    • Value -Color : To change the background color of the view click on the box will open the color picker form where you can choose the color.
  3. Suggestions Text Size : The font size of the text of the labels in the suggestions view.
    • Value - float : The default font size is 12.
  4. Separator for multi selection : The character to be added after the selection of any suggestion from the suggestions list. This will work as a separator between the two suggestions that are selected from the list
    • Value - String : Enter any character as input for separator.
  5. Should allow multi selection : The boolean value allowing the user to select multiple values from the suggestions.
    • Value - Bool : If set to YES , will allow the user to select multiple values from the suggestions.

Display/Image

Below properties are explained in detail in Label Control. Please refer above.

  1. Background
  2. Disabled Background

Display/Text

Below property are explained in detail in Textfield Control. Please refer above

  1. BorderStyle
  2. Clears on begin
  3. Clear button Mode
  4. Autocapitalizationtype
  5. AutoCorrection Type
  6. Keyboard Type
  7. Keyboard Appearance
  8. Return Key Type
  9. Enable Return Key
  10. Secure Text Entry
  11. Content Vertical Alignment

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Background Color
  2. User Interaction
  3. Alpha

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced
  1. Allow duplicate : The boolean value allowing the data to enter duplicate values from the suggestions.
    • Value - Bool : If set to YES , will allow the user to enter duplicate values from the suggestions.

Custom Border

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

Action

As shown in above figure the autocomplete textfield actions are almost similar to View ‘s actions which are discussed above. Please refer description of all the actions of autocomplete textfield as given above.

Autocomplete textview

An autocomplete textview is a control that displays editable text. You can use this control to give user suggestions that he/she use to automatically enter in the textview, when user taps on suggestions . The suggestions will be displayed in the horizontal scrollview above the keyboard. To provide input to this control we need to configure datasource to display data coming from the web service. For datasource configuration please refer Datasource document.

Note : Add the action of the webservice call on the load event of the autocomplete textview.


Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID

Below properties are explained in detail in Auto complete Texfield Control. Please refer above.

  1. Key to Data Index
  2. Key to Data Source

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

Custom Border

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

Display

Below property are explained in detail in Textfield Control. Please refer above

  1. Autocapitalizationtype
  2. AutoCorrection Type
  3. Keyboard Type
  4. Keyboard Appearance
  5. Return Key Type
  6. Enable Return Key

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Background Color
  2. User Interaction
  3. Alpha

Below properties are explained in detail in Imageview Control. Please refer Controls - 1 Views document.

  1. ContentMode

Below properties are explained in detail in TextView Control. Please refer Controls - 1 Views document.

  1. Scroll Enabled
  2. Show Horizontal Scroll
  3. Show Vertical Scroll
  4. Scroll Enabled
  5. Paging Enabled
  6. Bounces
  7. Always Bounce Horizontal
  8. Always Bounce Vertical
  1. Delays Content Touches : A boolean value to give delay time after the selection of any value from the list.
    • Value - bool : By default it is NO. If set to YES, after selection of any value there will be a delay of one second.

Display/Text

Below properties are explained in detail in Label Control. Please refer above.

  1. Text
  2. Text Alignment
  3. Text Color
  4. Font Family
  5. Font Size
  6. Minimum Font Size
  7. Adjust Font Size

HB Custom properties

Below properties are explained in detail in Textfield Control. Please refer above.

  1. TextField Right View ID
  2. Background Image
  1. TextView Remove Image : An image to be displayed for the delete button besides the text of the selected value in the textview.
    • Value - image : Choose the image from the resources to display image in the delete button. Tapping on will open up the resource manager.
  2. TextView Divider Image : An image to be displayed between the two selected values in the textview.
    • Value - image : Choose the image from the resources to display image in the delete button. Tapping on will open up the resource manager.
  3. TextView Divider Color : The color of the divider between the two selected values in the textview.
    • Value - color : To change the divider color of the textview, click on the box will open the color picker and choose the color.
  4. Dropdown Table Text Color : The color of the text of the labels displayed in the tableview.
    • Value - color : To change the text color of the text, click on the box will open the color and choose the color.
  5. Dropdown Table Background Color : The color of the background of the tableview displayed at the bottom of the textview.
    • Value - color : To change the background color of the text, click on the box will open the color and choose the color.
  6. Dropdown Table Background Image : An image to be displayed in the background of the tableview .
    • Value - image : Choose the image from the resources to display image in the background of tableview. Tapping on will open up the resource manager.
  7. Dropdown Table Separator Color : The color of the separator between the two values in the tableview displayed at the bottom of the textview.
    • Value - color : To change the separator color of the tableview click on the box will open the color and choose the color.
  8. Remove button required : A boolean value to hide or show the delete button besides the text in the textview.
    • Value - bool : If set to YES, it will display the delete button besides the text in the textview.
  9. Dropdown Table Separator Image : An image to be displayed in the separator of the tableview .
    • Value - image : Choose the image from the resources to display image in the separator of tableview. Tapping on will open up the resource manager.

Action

  1. Number of events having actions.
  2. Number of actions configured in the event.

The action related to the events displayed in the above image is explained in the Controls - 1 Views document. Please refer that document.

The SearchBar control implements a text field control for text-based searches. The control provides a text field for entering text, a search button, a bookmark button, and a cancel button. The searchbar can be implemented with a tableview or gridview depending on the requirement. The searchbar searches the text in the from the data that is displayed in the tableview or gridview.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  1. Key Name To Data : Set the key based on which you need to do search in the tableivew data or gridview data.
    • Value - String : Clicking on this property ‘s drop down list will give you option to select the web service key of the web service that you have successfully configured in the Datasource panel.
  2. Placeholder : The string that is displayed when there is no other text in the text field.
    • Value - String : The default value is nil.
  3. Show search results button : A Boolean value indicating whether the search results button is displayed.
    • Value - bool : The default value is NO.
  4. Show Bookmark Button : A Boolean value indicating whether the bookmark button is displayed.
    • Value - bool : The default value is NO.
  5. Show Cancel Button : A Boolean value indicating whether the cancel button is displayed.
    • Value - bool : The default value is NO.
  6. Object Parent ID : The object ID of either tableview or gridivew.
    • Value - color : Set the object ID of tableview or gridivew from the drop down list.

Note : Without setting this property the current control will not work.

Display

  1. Prompt : A single line of text displayed at the top of the search bar.
    • Value - String : The default value is nil.
  2. Search bar Style : A search bar style that specifies the search bar’s appearance.
    • Value : Choose the following style for the searchbar:
      1. Default :The search bar has the default style.
      2. Black Opaque : The search bar has a translucent background, and the search field is opaque.
      3. Black Transculent : The search bar has no background, and the search field is translucent.
  3. Tint Color : The tint color to apply to key elements in the search bar.
    • Value - color : To change the tint color of the components in the searchbar click on the box will open the color and choose the color.

Below property are explained in detail in Textfield Control. Please refer above

  1. Autocapitalizationtype
  2. AutoCorrection Type
  3. Keyboard Type

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Background Color
  2. User Interaction
  3. Alpha

Custom Border

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

Display/Advanced Text

  1. Search Text Color : The color of the text in the search bar.
    • Value - color : To change the text color, click on the box will open the color and choose the color.
  2. Text : The current or starting search text.
    • Value : The default value is nil.
  3. Search Icon Image : The icon image that will be displayed in place of the default icon in the middle of the search bar.
    • Value - image : Choose the image from the resources to display image in the middle of searchbar. Tapping on will open up the resource manager.

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

HB Custom Properties

  1. Enable Online Search : A boolean value to allow search bar to search data from the web server data instead of the cached data.
    • Value - bool : If set to YES, the data will be search from the online data. The default value is NO.
  2. Cancel button Background Color : The color of the background color of the cancel button that appears on searchbar when user starts typing in the text area of searchbar.
    • Value - color : To change the cancel button background color, click on the box will open the color and choose the color.
  3. Search Textfield Background Image : The background image for the search bar.
  4. Value - Image : Choose the image from the resources to display image in the background of searchbar. Tapping on will open up the resource manager.
  5. Search Type : A condition based on which searching will be executed.
    • Value : Choose the options for the condition:
      1. Begins With : Search will be executed if the starting characters of the text matches with the key data coming from the server.
      2. Anywhere : Search will be executed based on characters of the text.
  6. Clear Icon Image : The image for the clear button that appears when user starts typing in the searchbar.
    • Value - Image : Choose the image from the resources to display image in place of default clear icon of searchbar. Tapping on will open up the resource manager.
  7. Bookmark Icon Image : The image for the bookmark button that appears in the right side of the searchbar.
    • Value - Image : Choose the image from the resources to display image in bookmark button of searchbar. Tapping on will open up the resource manager. Also keep the Show Bookmark Icon enabled.
  8. Result List Image Icon : The image for the results button that appears in the right side of the searchbar.
    • Value - Image : Choose the image from the resources to display image in bookmark button of searchbar. Tapping on will open up the resource manager. Also keep the Show Search Results Icon enabled.
  9. Cancel Icon Image : The image for the cancel button that appears in the right side of the searchbar.
    • Value - Image : Choose the image from the resources to display image in bookmark button of searchbar. Tapping on will open up the resource manager.

Action

As shown in above figure the Searchfield’s actions description is given below.

  1. Search Cancelled : The action related to this event will be called when user taps on the cancel button.
  2. Text Cleared : The action related to this event will be called when user has taps on the clear button in the textfield of the searchbar .
  3. Search Clicked : The action related to this event will be called when user taps on the search button that appears in the keyboard .