Custom Javascript Formatter

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:

Format Date JavaScript Function

function formatdate ( argum ) {
    //debugger;

    // By default, the original value will return.
    var rtnValue = argum.value;

    if (rtnValue.match(/[0-9]{0,5}/)) {
      while (rtnValue.length < 6) {
        rtnValue = "0" + rtnValue;
      }
    }

    // Use regular expressions to extract the numeric portions of the date.
    var matches = null;
    var regeDMY = /^([0-9]{2})([0-9]{2})([0-9]{2})$/; //6 digits exactly.
    // Or, 1 or 2 digits, -, 1 or 2 digits, -, 2 digits.
    var regeDMYdashes = /^([0-9]{1,2})-([0-9]{1,2})-([0-9]{2})$/;

    matches = rtnValue.match(regeDMY);

    // If regeDMY didn't match, try the 2nd pattern with dashes.
    // If pattern matched, then it contains 4 elements.
    if( matches == null || matches.length < 4 )
        matches = rtnValue.match(regeDMYdashes);

    // If 'revert' is true then the framework needs the data to revert to the server format.
    if (argum.revert === true ) { 
        // Adjust the input to the format needed by the RPG program.

        // Format blanks as 010101.
        if( argum.dataType=="date" && rtnValue == "" )
        {
            rtnValue = "010101";
        }
        else
        {
            // Neither pattern matched, so return an error.
            if( matches == null || matches.length < 4 ){
                rtnValue = { "msg": "Expected Formats ddmmyy, dd-mm-yy" };
                // Profound UI will see the error and cancel sending to RPG.
            }
            else
            {
                var day = parseInt(matches[1],10);
                var month = parseInt(matches[2],10);

                if( day < 0 || day > 31 || (argum.dataType=="date" && day<1))
                    rtnValue = {"msg": "Invalid day in date"};
                else if( month < 0 || month > 12 (argum.dataType=="date" && month<1))
                    rtnValue = {"msg": "Invalid month in date"};
                else{
                    // Use strings again.
                    day = matches[1];
                    if( day.length == 1) day = "0" + day; //include leading zero.

                    month = matches[2];
                    if( month.length == 1 ) month = "0" + month;

                    // This value is sent to the RPG program: ddmmyy.
                    rtnValue = day + month + matches[3];
                }

                if (argum.dataType="char" && rtnValue=="000000")
                   rtnValue="";
            }
        }
    } else {
        // Else, format is for display - here you can apply your editing.
        // After you submit to the server, this formatter is called again to 
        // display the field. Its input is the value as submitted to the server.
        // So you can only use this function to format it one way: either mm-dd-yy or mmddyy.

        if( argum.dataType=="date" && rtnValue == "01-01-01")
            rtnValue = ""; // display as blank.
        else if (argum.dataType=="zoned" && rtnValue == "000000")
            rtnValue = "";
        else if (argum.dataType=="char" && rtnValue == "000000")
            rtnValue = "";
        else if( matches != null && matches.length == 4 ) // format as mm-dd-yy.
            rtnValue = matches[1] + "-" + matches[2] + "-" + matches[3];
    }

    return rtnValue;
}