Handling Grid Cell Value Change Events Using SAP B...

A common requirement observed among partners and customers—whether they are using the classic SAP Business One UI API or the SAP Business One Web Client UI API—is the ability to retrieve event information when the value of a matrix or grid cell changes.

In the classic SAP Business One UI API, this information is documented in the SAP Business One SDK Help, and partners and customers can leverage events such as et_LOST_FOCUS or et_VALIDATE to handle such scenarios.

However, the challenge arises when using the SAP Business One Web Client UI API Extension: how can event information be retrieved when a grid cell value changes and data validation is required? This blog post explains how to achieve this.

As of SAP Business One version 10.0 SP 2511, you can use the “on” property to add before and after event handlers for controls in a grid cell like the following mentioned format. Please note you do not need to specify the grid's GUID, just specify the Column's GUID (without the COLUMN_ prefix) and the template control inside the column.

"on": [
{
"guid": "xoXg6upQtW5y92TMLUU4te",
"ctrlType": "b1.sdk.Column",
"template": {
"ctrlType": "b1.sdk.Input",
"guid": "CELL_xoXg6upQtW5y92TMLUU4te",
"change": {
"after": "onChangeQuantity"
}
}
},


{
"guid": "wScf8XyBZ9fDKRjV61t5rM_UDF_RDR1_U_L_UDF2",
"ctrlType": "b1.sdk.Column",
"template": {
"ctrlType": "b1.sdk.Input",
"guid": "CELL_wScf8XyBZ9fDKRjV61t5rM_UDF_RDR1_U_L_UDF2",
"change": {
"before": "onChangeUDF"
}
}
}
]

For example, suppose you want to trigger a logic whenever the value in the Unit Price column of a Sales Order row is modified. To capture this event, please follow the steps below:

In the layout JSON file, use the “on” overlay and add a “after” event handler to the Unit Price column, indicated by GUID rmzEyqDK55Td8na2cqksVM:

"on": [
{
"guid": "rmzEyqDK55Td8na2cqksVM",
"ctrlType": "b1.sdk.Column",
"template": {
"ctrlType": "b1.sdk.Input",
"guid": "CELL_rmzEyqDK55Td8na2cqksVM",
"change": {
"after": "onChangePrice"
}
}
}
]

guid can be retrieved using Web Client Inspector.
rmzEyqDK55Td8na2cqksVM is the GUID of the Unit Price column. As mentioned above, it should be specified without the COLUMN_ prefix.
CELL_rmzEyqDK55Td8na2cqksVM is the GUID of the Unit Price column cell that can be seen in the image above under the template control.
b1.sdk is the global namespace used to store public controls and related types for control properties. This helps organize all controls and their properties in a structured way. For example, to reference the Button control, you would use b1.sdk.Button. To assign a value to the ButtonType property in JavaScript, you would use b1.sdk.ButtonType.Accept.
In our example, b1.sdk.Column represents an input box type (b1.sdk.Input) and allows users to define properties specific to that column.
template is the cell template in the column control. Cell renderer of the column.
‘change‘ is the event name which is fired whenever the value is modified.
“onChangePrice” is the function (referencing the controller) that is triggered whenever the value in that column (Unit Price) is changed.
In the controller, implement the event handler like below:

async onChangePrice(oEnv, oEvent) {
console.log("Price changed");

// Get the updated value, old value and Row Index from the event parameters

const newValue = oEvent.getParameter("value");
const oldValue = oEvent.getParameter("oldValue");
const iRowIndex = oEvent.getParameter("iRowIndex");
console.log("onChangePrice: new value: " + newValue + ", oldValue: " + oldValue.amount + ", iRowIndex: " + iRowIndex);
await oEnv.showMessageBox("Information", `On Row ${iRowIndex} Price changed from ${oldValue.amount} to ${newValue}`,
{
title: models.title,
}
);
}