Multiple Selection Picker

Multiple Selection Picker

Download PDF

Multiple Selection Picker

It is best use for selecting several items from the given list. Using this picker, helps ensure that you select multiple things from the list, at a time.


This is a deafault control with Configure.IT and helps you select multiple options from the list. You can even select All and also deselect the wrong selection.

    Keywords:
  • multiple selector
  • multiple selection dropdown
  • multi select picklist

Properties

  • Tool Bar Customization
    PARAMETER
    DESCRIPTION
    Picker Tool Bar Style

    Sets the Bar style as Default or Black.

    Picker Tool Bar Tint Color

    Used to set tint color of toolbar of picker.

    Picker Tool Bar Title Color

    Used to set text color of title shown on center of toolbar when picker appears.

    Picker Tool Bar Title

    Title shown on center of toolbar when picker appears.

    Bar Button Tint Color

    Sets color for bar button ("Done" and "Cancel") shown on Toolbar, which is added above Multiple selection picker.

  • PopOver Customization
    PARAMETER
    DESCRIPTION
    Popover Tint Color

    Set the tint color, for popover containing Multiple selection Picker and toolbar.

    Popover Background Image

    Select and set the background image for the popover from the images that you had uploaded in the Asset Manager.

    Popover Shadow Enable

    Enable the popover shadow, if desired. This lets you have the shadow effect.

  • Custom Border
    PARAMETER
    DESCRIPTION
    Border Width

    Sets border width for a Multiple selection Picker.

    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 Multiple selection Picker.

    Space Between Dashes For Dashed Border

    Helps set the spacing between Dashes for Dashed Border.

    Transform Angle

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

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    Picker First Option Title
    A string which will be shown on top most of all data populated in picker
    Disable Sorting

    This property is used to prevent sorting of elements by clicking on any of the selector elements. If this property is enabled, values in picker will be shown in the order as received from web service. Else, value will be sorted.

    Enable Search

    Enable search lets you add a search bar on picker tool where user can type a search query based on which picker options will be filtered.

    Enable All Option Selection

    This property is for displaying an additional row in multiple selection picker. On tapping, all rows shall get selected.

    Picker Numerical Bounds String

    To show numeric value in picker for selection (ex: 0-100).

    Step Value For Picker Numerical Values

    Sets the difference between consecutive values displayed in picker if, "Picker Numerical Bounds String" property is set. For Example, if "Picker Numerical Bounds String" is set as 10-100, and "Step Value For Picker Numerical Values" is set to 10 , then the values will be displayed as 10,20,30...100.

    Select All options Row Title

    This property is for setting the title for All Option selection row i.e, on tapping of this row all options in picker will get selected. Default value for this is "All". Works only if "Enable All Option Selection" property is enabled.

    Multiple Selection Indicator Image

    This property is for setting image that should be displayed on the selected row.

    Multiple DeSelection Indicator Image

    This property is for setting image that should be displayed on the unselected row.

  • Display
    PARAMETER
    DESCRIPTION
    Enabled

    A Boolean property that indicates whether the gesture recognizer is enabled.

    Selected

    A Boolean value that changes picker button’s state to "selected".

    Button State

    Set the state of Button to either of the following; normal, highlighted, selected or disabled.

    Highlighted

    A Boolean value that changes picker button’s state to "highlighted".

    Selected Title
    Sets the title to use for the Selected state.
    Disabled Title
    Sets the title to use for the disabled state.
    Normal Title

    Sets the title to be used as the default state.

    Highlighted Title
    Sets the title to use for the Highlighted state.
    Normal Title Color

    Sets the color for the title to be used for the Normal state.

    Highlighted Title Color
    Sets the color for the title to use for the Highlighted state.
    Disabled Title Color
    Sets the color for the title to use for the disabled state.
    Selected Title Color
    Sets the color for the title to use for the Selected state.
    Disabled Title Shadow Color
    Sets the shadow color for the title to use for the disabled state.
    Selected Title Shadow Color
    Sets the shadow color for the title to use for the Selected state.
    Highlighted Title Shadow Color
    Sets the shadow color for the title to use for the Normal state.
    Normal Title Shadow Color

    Sets the shadow color for the title to use for the Highlighted state.

    Disabled Image
    Sets the Image to use for the disabled state.
    Highlighted Image
    Set the image to the Object in Highlighted State
    Selected Image
    Sets the Image to use for the Selected state.
    Normal Image

    Sets the Image to use for the Normal state.

    Disabled Background Image
    Sets the Background Image to use for the disabled state.
    Highlighted Background Image
    Sets the Background Image to use for the Highlighted state.
    Selected Background Image
    Sets the Background Image to use for the Selected state.
    Normal Background Image

    Sets the Background Image to use for the Normal state.

    Content Horizontal Alignment

    Sets the horizontal alignment for content (text or image or both) of picker button.

    Content Vertical Alignment

    Sets the vertical alignment for content (text or image or both) of picker button.

    Drawable Type

    Adjusts the position of Image in sync with the Text.

    Drawable Padding

    Padding is defined as space between the edges of the view and the view's content. Drawable Padding is the padding between the drawables and the text. Sets the padding, in pixels, of all four edges.

    User Interaction Enabled

    Enables the Interaction with user, i.e. control responds when user taps on it.

    Alpha

    Used to set the transparency to the object which ranges from 0 to 1.

    Background Color

    Used to set the background color to the Multiple selection picker button.

    Tint Color

    Sets tint color for Multiple selection picker button.

  • Display/Text
    PARAMETER
    DESCRIPTION
    Font Family

    Select and set the Font type as desired, from the list of available options.

    Font Size

    Sets the desired size of the Font.

    Line Break Mode

    The technique to use for wrapping and truncating the Multiple selection picker button’s title.

    Custom Font Name

    Sets custom font name (special font, not available in default fonts) for title to be displayed in picker button.

  • Advanced
    PARAMETER
    DESCRIPTION
    Title Shadow Offset X

    The horizontal offset of the shadow used to display the button’s title. Positive value always extend to the right from the user's perspective.

    Title Shadow Offset Y

    The vertical offset of the shadow used to display the button’s title. Positive value always extend up from the user's perspective.

    Reverses Title Shadow When Highlighted

    If checked the checkbox, the picker button title shadow changes from engrave to emboss appearance when highlighted.

    Shows Touch When Highlighted

    A Boolean value that determines whether tapping the Multiple selection Picker button causes it to glow.

    Adjusts Image When Highlighted

    A Boolean value that determines whether the image changes when the Multiple selection Picker button is highlighted.

    Adjusts Image When Disabled

    A Boolean value that determines whether the image changes when the Multiple selection Picker button is disabled.

    Edge

    Sets the edge inset properties for the content within the button separately. i.e, there are three possible contents of button - Title, Image or Content(both image and title included). Whereas there are 4 edge properties of button which can be set separately for each content type.

    Top Title Edge Insets

    Sets the inset or outset top margin for the button title. A positive value shrinks, or insets, top edge-moving it closer to the center of the button. A negative value expands, or outsets, top edge-moving it away from center of the button.

    Top Content Edge Insets
    The inset or outset margins for the rectangle surrounding top of the object's content.
    Top Image Edge Insets
    The inset or outset margins for the rectangle surrounding top of the object's image.
    Bottom Title Edge Insets

    Sets the inset or outset bottom margin for the button title. A positive value shrinks, or insets, bottom edge-moving it closer to the center of the button. A negative value expands, or outsets, bottom edge-moving it away from center of the button.

    Bottom Content Edge Insets
    The inset or outset margins for the rectangle surrounding bottom of the object's content.
    Bottom Image Edge Insets
    The inset or outset margins for the rectangle surrounding bottom of the object's image.
    Left Title Edge Insets

    Sets the inset or outset left margin for the button title. A positive value shrinks, or insets, left edge-moving it closer to the center of the button. A negative value expands, or outsets, left edge-moving it away from center of the button.

    Left Content Edge Insets
    The inset or outset margins for the rectangle surrounding left of the object's content.
    Left Image Edge Insets
    The inset or outset margins for the rectangle surrounding left of the object's image.
    Right Content Edge Insets
    The inset or outset margins for the rectangle surrounding right of the object's content.
    Right Image Edge Insets
    The inset or outset margins for the rectangle surrounding right of the object's image.
    Right Title Edge Insets

    Sets the inset or outset right margin for the button title. A positive value shrinks, or insets, right edge-moving it closer to the center of the button. A negative value expands, or outsets, right edge-moving it away from center of the button.

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Multiple selection Picker.

    YPos

    Sets the Y position of the Multiple selection Picker.

    Width

    Sets the width of the Multiple selection Picker.

    Height

    Sets the height of the Multiple selection Picker.

    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 Multiple selection Picker 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.

    Key To DataSource

    Sets “key name to datasource” for a particular part of datasource as Multiple selection Picker datasource.

    Key to Data Index

    Select the Web service key data which will be retrieved as output based on selection.

    Key Name To Data Display

    Sets key corresponding to the value in picker datasource(response from web service) that has to be displayed in each row of Multiple selection Picker, if picker should have multiple components then this should be comma (,) separated string of keys pointing to values to be displayed in each component.

    DataSource File

    Select the json file from which picker data has to be loaded.

    Picker Selection Receiver IDs

    Sets the Object ID(s) of the control(s) on which picked value from Multiple selection Picker has to be displayed. If the picker has multiple components then comma(,) separated Object IDs of the controls have to be set. If no value is set then the picked value(s) are displayed on the button control with a tap and picker view gets displayed.

    Button Type

    Creates and returns a new desired button of the specified type.

    Should Picker Data Source Load After Click

    This property specifies if picker data should be loaded only after clicking on it. For example if web service call is made in picker's "Click" event. (Note:This will only work if "API call" action is configured in "Click" event of picker)

  • 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 define 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).

  • 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).

  • 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 Multiple selection picker.

  • Layout Setting
    PARAMETER
    DESCRIPTION
    Horizontal

    Group of horizontal android default properties.

    Vertical

    Group of vertical android default properties.

    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.

    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.

    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.

    Right

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

    Top

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

    Bottom

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

    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).

    Center In Parent

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

    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.

  • Hidden
    PARAMETER
    DESCRIPTION

Actions

  • Load

    This event is triggered on load of a control. Further, the desired Action can be defined as per the requirement.

  • Click

    This event is triggered when user taps on the control and Action is configured on a ‘Click’.

  • Picker Done

    This event is triggered when user confirms selection of an option from picker control by tapping on “Done” button on toolbar, added on top of the Multiple selection picker control.

Remarks

  • Multiple Selection / DeSelection Indicator Image

    This property lets you set the image on your actions or the movement. It sets image that should be displayed on the selected row. You can also set an image for when you deselect any row.

  • Enable All Option Selection

    This property is for displaying an additional row in multiple selection picker. On tapping all option row, all rows shall get selected. If "Select All options Row Title" property is set, additional row will be the text set in "Select All options Row Title" property else, additional row text will be "All".