A JavaScript function can be used to perform custom formatting and validation of bound fields. This is done by selecting the 'Custom' field formatting type and providing the name of the desired JavaScript function, as shown here:
The function will be called both when the screen is displayed (to format data provided by the RPG program), and when a change is made to a field and the screen submitted (to validate user input and to revert data to program formatting). The function will receive a single argument, which is an object containing properties that provide information about the field, along with the field data. The parameter object includes the following properties:
- fieldName (string): The name of the bound field, as specified on the binding dialog.
- dataType (string): The data type of the bound field.
- dataLength (string): The length of the bound field.
- decPos (string): The number of decimal positions of the bound field. This property is not present unless the bound field is of decimal data type.
- value (string): The data value that is sent from the RPG program, or the user value that is being submitted to the RPG program.
- revert (boolean): This will be set to "true" when the function is called to revert the user data back to program formatting. The property is not present in the parameter object when the function is called to format data sent from the RPG program.
The function should look at the "revert" property to determine whether its being called to format data, or to validate user input and revert to server format. In either case, the function should return the desired value as a string. If the function is called with the "revert" flag present, then it can also cause a validation message to appear by returning an object with a property "msg". The value of the "msg" property should be a string which will display in a validation tool-tip beside the field. When the function returns an object with "msg" property, the submit will be cancelled, and the user will have to correct the input and attempt to submit the screen again.
Example 1:
The following example code processes a 1-character server value "Y" or "N" and formats this as "Yes" or "No":
function myFormatter(params) {
if (params.revert) {
if (params.value == "Yes") {
return "Y";
}
else if (params.value == "No") {
return "N";
}
else {
return {"msg":"Invalid value. Enter \"Yes\" or \"No\"."};
}
}
else {
if (params.value == "Y") {
return "Yes";
}
else {
return "No";
}
}
}
Example 2:
This is an example of creating a custom JavaScript function to format dates entered by users. In this example, if a user enters a date with no date separator, this custom function will format the date to include dashes before it's sent to the server. This can also format the date received from the server before it is displayed from the user. In this example, the date field is setup in the binding dialog like so:
And the custom JavaScript function for this is below: