WaveMaker Visual AJAX Studio 4.0 Training Advanced Editor properties and Events

2 Advanced Editor Features ● Using Advanced Editors –Radio Button Groups –Selects (Drop Downs) –Calendars

3 WaveMaker Radio Button Groups ● Use radio buttons for fields that have a short list of possible values ● Use Editor widgets to create Radio Buttons ● Create one Editor widget for each radio button ● To turn an Editor into a Radio Button, change the display property to Radio Button

4 Radio Button Properties ● caption: the label by this radio button ● display: select Radio Button ● checkedValue: the value returned by this editor when the radio button is checked ● dataValue: the checkedValue (if a radio button is checked) OR the empty value (if a radio button is not checked). ● emptyValue: the value returned by this editor when the radio button is not checked ● groupValue: can be used as the input or output for the entire radio button group: –output: returns the checkedValue of the selected radio button –input: selects the radio button with specified checkedValue

5 Radio Button Editor Properties ● In the Properties Tree, select editor ● Set the following editor properties: –dataType: the data type for the value of the editor when the button is checked (checkedValue property) –radioGroup: the radio group name – use the same radioGroup name for all radio buttons in the group –startChecked: check this property if you want this radio button to be checked by default

6 Getting Data out of Radio Button Groups ● To bind to a radio button group, just bind to the groupValue property of any radio button in the group –In the Bind dialog, expand any one of the radio button (Editor) widgets and select groupValue ● To manually bind a field in a Variable to a radio button group: –select the variable –click sourceData in the Properties Tree –expand any one of the radio button editors and bind to the groupValue property

7 Selects (Drop Downs) ● Use selects to allow users to choose from a short list of possible values ● Use an Editor widget to create a select ● To turn an Editor into a Select, change the display property to Select ● Two ways to populate the select: –Type in a list of values –Bind to a variable or service call

8 Type in a List of Values ● To populate the select menu from a list of values, first select editor in the Properties Tree ● For the options property, type in your list of values, separated by commas

9 Bind to a Variable or Service Call ● To populate the select menu from a Variable (Variable, LiveVariable, or Service Variable), first select editor in the Properties Tree ● Use the dataSet property to bind to your variable –you can use the drop-down list –or click the bind icon to get the full Bind Dialog

10 Setting up Data Values ● You can choose what the data value will be for the selected item ● For example, should the select editor return a single field for the selected item or all the fields for that item ● Choose the data value by setting the dataValue property.

11 Setting up Display Values ● You can choose which field displays in the drop down by selecting the field in the displayField property menu ● You can use a JavaScript expression to define what is displayed in the drop down –Type the expression in the displayExpression property –For example, to display firstName and lastName fields separated by a space: wm.toTitleCase(${firstName} + " " + ${lastName})

12 Basic Properties for Selects ● caption: the label by this radio button ● display: select Select ● displayValue: the value as it is displayed in this editor ● dataValue: the actual data value returned by this editor ● emptyValue: the value returned by this editor when no item is selected

13 Editor Properties for Selects (Select editor in the Properties Tree) ● dataSet: bind to a data source for the select ● options: a comma-delimited list of values for the select ● dataField: field that is returned as the data value for the select ● displayField: field that is displayed in the select menu ● displayExpression: a JavaScript expression that defines what it displayed in the select menu

14 More Editor Properties for Selects (Select editor in the Properties Tree) ● pageSize: number of items that displays in the select menu at any one time (if number of items exceeds this limit, a More Options item appears at the bottom of the list) ● allowNone: Means that the user does not have to select a value for this menu – it can be left unselected ● autoComplete: The editor will auto-complete if the user types into the field ● Required: a value for this select is required ● showMessages: shows validation error messages

15 Calendars ● Use a Date widget to allow a user to choose a date from a calendar or type it into a field ● Use an Editor to create a Date widget ● To turn an Editor into a Date widget, change the display property to Date

16 Basic Properties for Date Widgets ● caption: the label by the date field ● display: select Date ● displayValue: the value as it is displayed in this editor ● dataValue: the actual data value returned by this editor, in milliseconds ● emptyValue: the value returned by this editor when no item is selected

17 Editor Properties for Dates (Select editor in the Properties Tree) ● invalidMessage: message to display on validation error ● maximum: maximum valid date for this field (in dd/mm/yyyy format) minimum: minimum valid date for this field in (dd/mm/yyyy format) ● promptMessage: a message that displays when a user clicks the date field but doesn’t select a date ● required: a value for this editor is required ● showMessages: shows validation error messages

18 Questions?

19 Exercise 17 ● Create a Drop Down Select –Populate with a list –Populate with a Variable backed by a custom query ● Create Radio Groups and Calendars in a separate project if time permits. ( No formal Exercise)