On Data Change

Use scripts for the On Data Change event of a control to accomplish a desired operation when the value of the control changes.

Use the currentValue variable to fetch the changed value of the control, and the oldValue variable to get the value which was replaced with the current value.

Examples

Consider three Text controls, FirstName (T1), SecondName (T2), and FullName (T3). If you want to display the full name (T3), everytime the FirstName (T1) and SecondName (T2) are updated, then you can code the script for the On Data Change event of T1 and (T2) control as follows:

On Data Change event for T1:

control.findByXmlNode("FullName").value=currentValue+" "+control.findByXmlNode("SecondName").value;

On Data Change event for T2:

control.findByXmlNode("FullName").value=control.findByXmlNode("FirstName").value+" "+currentValue;

Note: The currentValue is of type string for all controls except the Number control, which is of type number.

If you want to show the Employee Name (T2) when you enter the Employee ID using a Web API, then you can code the script for the On Data Change event of the Employee ID (T1) control as follows

// Use Web API to retrieve the Employee Name using the captured Employee ID.

// Here currentValue is passed as parameter.

$.ajax(

{

type: "GET",

url: "http://emp.corp.com/api/Employee/"+currentValue,

contentType: "application/json; charset=utf-8",

async:false,

dataType: "json",

success: function (result)

{

control.findById("T2").value = result[0].EmployeeName;

},

error: function (err)

{

}

}

);

Accessing old values

If the value of the check box Job State (C1) changes on an event and if you want to access the old value, then you can code the script for the On Data Change event of the Job State (C1) control as follows:

var oldValues = oldValue.split(';#');

var newValues = currentValue.split(';#');

var stateAdded = newValues.filter(function(n) {

return oldValues.indexOf(n) == -1;

});

var alertBody = "'" + stateAdded + "' State added for the Job."

SFU.showAlert("Job State Changed", alertBody,

function()

              {

                //Enter code to perform actions after the alert is closed.

              });

Data Grid

If you want to show the value from the the currently checked record in the Projects Backlog (G1) control for the Projects Approved (G2) control, then you can code the script for the On Data Change event of the Projects Backlog (G1) control as follows.

control.findById("G2").value = control.findById("G1").value;

If you want to show the value from the columns Id, Title, and Application of the currently checked record in the Projects (G1) control for the Project ID (T1), Project Title (T2), and Project Application (T3) controls respectively, then you can code the script for the On Data Change event of the Projects (G1) control as follows

var gridControl = control.findById("G1");

var rowData = SFU.getGridValue(gridControl);

control.findById("T1").value = rowData[0].<Lookupname>.Id;

control.findById("T2").value = rowData[0].<Lookupname>.Title;

control.findById("T3").value = rowData[0].<Lookupname>.Application;

Note:

- The DateTime column types would contain DateTime values (not String values), when the Use Culture Specific Values property is set to No.

- Data Grid with Execution Mode as Synchronous will not fire an On Data Change event when the form is loading. In case an On Data Change event is required to be fired, below are the options:

Option 1: Set the Execution Mode as Asynchronous.
Option 2: Retain the Execution Mode as Synchronous. Set the Auto-load Grid to Never. In the On Form Load script, write the below script:
control.findByXmlNode("GridXmlNode").autoLoadGrid = skelta.grid.autoLoadGrid.OnFormLoadAndParameterChange;
setTimeout(function(){
control.findByXmlNode("GridXmlNode ").refreshGrid();
}, 0);

Hierarchical Data Grid

If you want to show the value from the hierarchical data grid , columns of each data source can be accessed as follows:

//Here the WorkOrder is the parent data source with the columns wo_id, wo_desc, and process_id. The Job is the child data source with columns wo_Id, oper_id, and seq_no.

var rowData= SFU.getGridValue(control.findById("G1"));

control.findById("T1").value = rowData[0].WorkOrder.wo_id;

control.findById("T2").value = rowData[0].WorkOrder.Job.oper_id;

Note:
- The above code is applicable only for one selected value (that is the currently checked record).
- The column names must be one of the selected column names in the data grid.