Picker allows an app user to select the desired information. This control has various properties that are explained in the below sections.
Properties
Parameter
Description
Title
Type in the title of the picker to be displayed on the page e.g. Country
Control Name
By default, the control type is posted with a unique number e.g. Picker_1. Can be changed by the user using alphabets, numbers and special character (_). The maximum character limit is 100.
Disabled
Checkbox that disables the picker if checked.
Display
Toggle the display of the picker on choosing Hide/Show.
Immediate Validation
Checkbox that validates the picker immediately if checked.
OnLoad
This enables picker to be validated on load listener
Layout
This determines the order in which the control to be displayed over the other
Validation
Style
General
Parameter
Description
Picker Style
Indicates the selected style of the picker where there are three options : Basic, Flat and without Border
Layout
Parameter
Description
Width
Define the width of the picker here from 100 to 310.
Height
Define the height of the picker here from 35 to 100.
Color
Parameter
Description
Title
Pick a color for the title of the picker
Text
Choose the color of the text
Background Color
Choose the background color
Picker Color
Choose the picker color
Alignment
Parameter
Description
Title Align
Align the title with the available styles – Auto, Left, Right, Center & Justify.
Font
Parameter
Description
Family
Choose the font of the text from System, SansPro & Google SansPro.
Size
Increase or Decrease the font size from 1 to 36.
Weight
Modify the font-weight between Normal & Bold.
Border
Parameter
Description
Border Width
Define the width of the border for the textbox from 1 to 5.
Bottom Width
Define the bottom width
Radius
Choose the radius of the border
Border Color
Choose the desired color for the border from the color palette.
Spacing
Parameter
Description
Margin
Define the space required between the edges of the textbox and the screen to align the text with respect to the Left, Right, Top & Bottom margins.
Padding
Define the space required between the border and the content to align the text with respect to the Left, Right, Top & Bottom margins.
Data
Picker has a stylesheet for each style that allows configuration of the menus which are to be displayed in the menu list. You can apply global styles for Picker menus.
Data Source
Data sources available on the page are of two types namely Direct and Model.
Direct
Configure the data source as direct hardcode and add the number of menus to be listed on the drawer. On choosing the data source as direct, data binding and data source of the model are disabled.
Data Mapping – Configure the data source to be mapped to each element of the components selected on the page. You can add the number of menus that are to be listed in the drawer.
Parameter
Description
Order Number
Order of the menu to be displayed on the list
Icon
Icon to be displayed for each menu. Styles for icons can be applied globally.
Caption
Exact menu name should be listed on the drawer page
Navigation Page
Choose the page to which the user is to be navigated by clicking the icon in the preview.
Model
Configure the data source as the Model to access the data from the model configuration. In this case, the Direct Data mapping configuration is disabled.
Data Binding
Parameter
Description
Data Model
Choose the data model to be used on the page
Data Field
Select the data field to be displayed on the page
Data Source
Select the data source for this type and provide the details accordingly.
Parameter
Description
Data Model
Choose the data model to be used on the page
Name Field
Choose the name of the menu to be displayed against the icon
Icon Field
Icon to be displayed for each menu. Styles for icons can be applied globally.
Navigate Field
Choose the page to which the user is to be navigated by clicking the icon in the preview.
Auto Bind
Checkbox that binds the data automatically on selection
Events
Define the events that are to be triggered whenever there is a change.
Parameter
Description
onChange
Define an action that is to be performed when there is a change in the value of the picker.