Picker Controls

PickerView

The PickerView control is basically a kind of button. Tapping on it will open a picker which contains a spinning-wheel or slot-machine metaphor to show one or more sets of values. Users select values by rotating the wheels so that the desired row of values aligns with a selection indicator.

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

  • In properties tab you can change any property of picker and even can easily search using the search bar.
  • To configure various events related to picker 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
  1. Picker Selection Receiver IDs : The view in which results of the picker will be displayed.
    • Value : Select any view from the drop down list but preferably any text control in which text can be displayed.
  2. Picker Numerical Bounds String : The string used to display the picker values in particular range of numerical values.
    • Value - String : The string should be like minimum value - maximum value. For e.g : 0 - 100 where 0 being minimum value and 100 being maximum value.
  3. Step value for picker Numerical Values : The step, or increment, value for the numerical values that will be displayed in the  picker.
    • Value - int : The default value is 0.0.
  4. Should picker data source load after click : A boolean value to enable the load of data from web server on the click of the picker button.
    • Value - bool : The default value is NO.
  5. Shows selection indicator : A Boolean value that determines whether the selection indicator is displayed.
    • Value - bool : If the value of the property is YES, the picker view shows a clear overlay across the current row. The default value of this property is NO

Display/Advanced Text

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

  1. Hide
  2. Advanced

Display

Below properties  are explained in detail in Button Control. Please refer Controls - 2 Button document.

  1. Button State
  2. Normal/Background/Highlighted/Disabled Title
  3. Normal/Background/Highlighted/Disabled Image
  4. Normal/Background/Highlighted/Disabled  Background Image
  5. Normal/Background/Highlighted/Disabled Title Color
  6. Normal/Background/Highlighted/Disabled Title Shadow Color
  7. Enabled
  8. Highlighted
  9. Tint Color
  10. Highlighted Tint Color

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

Display/Text

Below properties  are explained in detail in Label  Control. Please refer Controls - 2 Text Controls document.

  1. Font Family
  2. Font Size
  3. LineBreak Mode

Advanced

Below properties  are explained in detail in Button Control. Please refer Controls - 3 Button Control document.

  1. Show Touches when highlighted
  2. Adjusts Image when highlighted
  3. Adjusts Image when disabled
  4. Reverse Title when Highlighted
  5. Edge
  6. Top Content/Title/Image Edge Insets
  7. Bottom Content/Title/Image Edge Insets
  8. Left Content/Title/Image Edge Insets
  9. Right Content/Title/Image Edge Insets

Below properties  are explained in detail in label Control. Please refer Controls - 2 Text Control document.

  1. Title Shadow Offset X named as Shadow Offset X in label.
  2. Title Shadow Offset X named as Shadow Offset Y in label.

HB Custom Properties

  1. Picker First Option Title : A value to be displayed as the first value of the picker.
    • Value - String : Set any string value.
  2. Enable Search : A boolean value to allow search in picker.
    • Value - bool : The default value is NO. If set to YES, searchbar will be displayed on the top of the picker.
  3. Bar Button Tint Color : The tool bar button tint color that is displayed on the toolbar above picker .
    • Value - color : To change  the tint  color, click on the box will open the color and choose the color.

Toolbar Customization

  1. Picker Tool Bar Style : The style of toolbar.
    • Value - String : Choose From the following style:
      1. Default : Use the default style normally associated with the given view. For example, navigation bars typically use a white background with dark content.
      2. Black Opaque : Use a black background with light content.
  2. Picker Toolbar Title : The text  to be displayed in the title of the toolbar.
    • Value - String : Enter any text for the title.
  3. Picker Toolbar Title Color : The color of the title that is displayed on the toolbar .
    • Value - color : To change  the title  color, click on the box will open the color and choose the color.
  4. Picker Toolbar Tint Color : The tint color to apply to the toolbar background.
    • Value - color : To change  the title  color, click on the box will open the color and choose the color.

Popover Customization

  1. Popover border width : The width of  the border of the popover in which picker will be displayed in iPad.
    • Value - float : When this value is greater than 0.0, the tool will draw the border around the popover. The default value of this property is 0.0.
  2. Popover shadow enable : A boolean value to display shadow behind the  popover.
    • Value - string : The default value is NO.
  3. Popover arrow width : The width of the arrow that will be displayed above popover view .
    • Value - float : The default value is 0.0.
  4. Popover arrow height : The height of the arrow that will be displayed above popover view .
    • Value - float : The default value is 0.0.
  5. Picker Arrow image : The image to be displayed in the arrow.
    • Value - image : Choose the image from the resources to display image in the picker arrow. Tapping on  will open up image picker.
  6. Picker Background image : The image to be displayed in the picker background.
    • Value - image : Choose the image from the resources to display image in the picker background. Tapping on  will open up image picker.

Action

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

  1. Load : The action related to this event will be called when the picker will be loaded in the view.
  2. Click : The action related to this event will be called when user clicks on the the button.
  3. Picker Done : The action related to this event will be called when user clicks on the the done button on the toolbar displayed above picker.

Date Picker

The DatePicker control implements multiple rotating wheels to allow users to select dates and times.When properly configured, a DatePicker sends an message when a user finishes rotating one of the wheels to change the date or time; the associated receiver control will receives the message and updates the information appropriately.

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. Date Display Format : The format in which date that user has chosen  will be displayed in the receiver control.
  2. Value -String : Choose from the following components to display date as per your format :
    • d :  To display date in single digit or double digit. e.g., 1,2,12,13
    • dd :  To display date in double digit. e.g., 01,02,12,13
    • MM :  To display month in  double digit. e.g., 01,02,03,12
    • MMM :  To display month  in three alphabet word. e.g., Jan,Feb
    • MMMM :  To display month name   in complete form . e.g., January,February,March,etc.
    • yy :  To display year  in double digit. For e.g.  2012 will be displayed as 12
    • yyyy :  To display year in four digit, For e.g.  2012,2013,2014
    • hh :  To display hour in 12 hour format.
    • mm :  To display minutes in two digit format. For eg. 01,02,12,etc.
    • ss :  To display second in two digit format. For e.g. 01,02,55,59,etc.
    • E :  To display week day in three letter word. For e.g.  Mon,Tue,etc.
    • EEE :  To display week day in full form.For e.g.  Monday,Tuesday,etc.
    • a :  To display AM or PM in 12 hour format..

Lets have a look at few example :

  • dd-MM-yyyy : The date will be displayed as 12-03-2014.
  • dd-MM-yy hh:mm:ss a : The date will be displayed as 12-03-2014 01:12:56 PM .
  • dd-MM-yy HH:mm:ss : The date will be displayed as 12-03-2014 13:12:56.

Date Picker Mode : The mode of the date picker.

Value -String : Choose from the following modes :

  1. DatePickerModeTime : The date picker displays hours, minutes, and (optionally) an AM/PM designation. The exact items shown and their order depend upon the locale set. An example of this mode is [ 6 | 53 | PM ].
  2. DatePickerModeDate : The date picker displays months, days of the month, and years. The exact order of these items depends on the locale setting. An example of this mode is [ November | 15 | 2007 ].
  3. DatePickerModeDateAndTime : The date picker displays dates (as unified day of the week, month, and day of the month values) plus hours, minutes, and (optionally) an AM/PM designation. The exact order and format of these items depends on the locale set. An example of this mode is [ Wed Nov 15 | 6 | 53 | PM ].
  4. DatePickerModeDateAndTime : The date picker displays hour and minute values, for example [ 1 | 53 ]. The application must set a timer to fire at the proper interval and set the date picker as the seconds tick down.
  1. Minimum Date : The minimum date that a date picker can show.
    • Value : Enter the date with same format as the display date format.
  2. Locale : Sets the locale for the receiver.
    • Value - String : Enter the locale value like en_us(English USA) , es(Spanish) . Refer this Link for more values.
  3. Minimum Interval : The interval at which the date picker should display minutes.
    • Value - int : You can use this property to set the interval displayed by the minutes wheel (for example, 15 minutes). The interval value must be evenly divided into 60; if it is not, the default value is used. The default and minimum values are 1; the maximum value is 30.

Display/Advanced Text

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

  1. Hide
  2. Advanced

Display

Below properties  are explained in detail in Button Control. Please refer Controls - 2 Button document.

  1. Button State
  2. Normal/Background/Highlighted/Disabled Title
  3. Normal/Background/Highlighted/Disabled Image
  4. Normal/Background/Highlighted/Disabled  Background Image
  5. Normal/Background/Highlighted/Disabled Title Color
  6. Normal/Background/Highlighted/Disabled Title Shadow Color
  7. Enabled
  8. Highlighted
  9. Tint Color
  10. Highlighted Tint Color

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

Display/Text

Below properties  are explained in detail in Label  Control. Please refer Controls - 2 Text Controls document.

  1. Font Family
  2. Font Size
  3. LineBreak Mode

Advanced

Below properties  are explained in detail in Button Control. Please refer Controls - 3 Button Control document.

  1. Show Touches when highlighted
  2. Adjusts Image when highlighted
  3. Adjusts Image when disabled
  4. Reverse Title when Highlighted
  5. Edge
  6. Top Content/Title/Image Edge Insets
  7. Bottom Content/Title/Image Edge Insets
  8. Left Content/Title/Image Edge Insets
  9. Right Content/Title/Image Edge Insets

Below properties  are explained in detail in label Control. Please refer Controls - 2 Text Control document.

  1. Title Shadow Offset X named as Shadow Offset X in label.
  2. Title Shadow Offset X named as Shadow Offset Y in label.

HB Custom Properties

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

Transform Angle

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

Bar Button Tint Color

  1. Selected Date Format : The format in which the date format that can be passed to the web service.
    • Value - String : The description of this is well explained  in  Date Display Format property. Please refer above.

Toolbar Customization

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

  1. Picker Tool Bar Style
  2. Picker Toolbar Title
  3. Picker Toolbar Title Color
  4. Picker Toolbar Tint Color

Popover Customization

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

  1. Popover border width
  2. Popover shadow enable
  3. Popover arrow width
  4. Popover arrow height
  5. Picker Arrow image
  6. Picker Background image

Action

As shown in above figure the bar datepicker’s  actions are almost similar to pickerview ‘s actions which are discussed above.

MultiDataSource Picker

A  multidatasource picker is basically used to display multiple components in the picker-view.

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. Object Parent ID
  1. Key name to data : The key name whose value will be displayed in the picker.
    • Value : Choose other from the drop down list and provide key values separated by comma. Depending on the number of keys that you have entered, the same number of  components will be displayed.  For e.g.: key1, key2, etc.
  2. Key to data Source : Set the webserver key when there is multi level data in the webservice response.
    • Value : Choose other from the drop down list and provide key values separated by comma. For e.g.: key1, key2, etc.

More description on this topic is given in  Controls - 2 Text document. Please refer that document as to how this property can be used.

  1. Key name to data index : The key name whose value  can be send  input to the webservice .
    • Value : Choose other from the drop down list and provide key values separated by comma as per the number of components. If there are two components data is displayed in the picker then only two values should be entered in this property. For e.g.: key1, key2, etc.

Other properties of this control is same as the PickerView ‘s property. Please refer above.

Action

As shown in above figure the bar multidatasource picker’s  actions are almost similar to pickerview ‘s actions which are discussed above.

MultiSelection Picker

A multiselection picker is basically used to select multiple values from the picker view.

Properties

HB Custom Properties

  1. Enable All Options : A boolean value to display a option which will allow user to select all values in the picker.
    • Value - bool : The default value is NO.
  2. Select All Option Title : The text to be displayed in the all option title in the picker view.
    • Value - String : The default value is All. You can set any string value in this property.
  3. Multiple Selection Indicator Image : The image to be  displayed when user selects any value in the picker.
    • Value - String : Choose the image from the resources to display image in the picker view. Tapping on  will open up image picker.
  4. Multiple DeSelection Indicator Image : The image to be  displayed when user deselects any value in the picker.
    • Value - String : Choose the image from the resources to display image in the picker view. Tapping on  will open up image picker.

Other properties of this control is same as the PickerView ‘s property. Please refer above.

Action

As shown in above figure the multi selection picker view’s actions are almost similar to Buttons ‘s actions which are discussed above. Please refer description of  all the actions of bar code button as given above.