Most framework events can be handled in JavaScript as well. This is considered to be advanced technology and should be used with precaution. The main reason for handling an event on the client should be performance. Instead of adding an additional round-trip to the server executing a function in JavaScript can be more efficient. These events have two properties that control how they are handled. The pbServer… (pbServerOnClick, pbServerOnChange, pbServerOnBlur, …) properties control if an event is sent to the server. The psClient… (psClientOnClick, psClientOnChange, psClientOnBlur, …) properties can be used to attach an event handler on the client by setting it to the name of a JavaScript function.
Object oCustomerStatus is a cWebCheckBox
Entry_Item Customer.Status
Set piColumnIndex to 0
Set psCaption to "Active Customer"
Set piColumnSpan to 5
Set pbShowLabel to True
Set pbServerOnChange to True
Procedure OnChange String sNewValue String sOldValue
WebSet pbEnabled of oCustomerName to (sNewValue <> "N")
End_Procedure
End_Object
The example above shows how to handle the OnChange event of a cWebCheckbox on the server. In this example the enabled state of another field is changed based on the new value. To move this logic to the client the first step is to create a JavaScript event handler function.
function handleStatusChange(oEvent) {
const sVal = oEvent.oSource.get("psValue");
oWebApp.oCustomer.oWebMainPanel.oCustomerName.set("pbEnabled", (sVal !== "N"));
}
The JavaScript function above needs to be placed inside index.html or in a separate JavaScript file included from index.html. Note that it gets the event object as a parameter. This object contains information about the event and is based on the df.events.JSEvent class. The oSource property contains a reference to the object that has thrown the event (oCustomerStatus in our sample). The event object also contains the same parameters as the server-side handler gets in the aParams array property. The sample uses the get method to get the value of the psValue web property and sets the pbEnabled property using the set method. Note that the entire object structure can be accessed using the dot notation.
Now this handler needs to be attached to the oCustomerStatus object which is done by setting the psClientOnChange property.
Object oCustomerStatus is a cWebCheckBox
Entry_Item Customer.Status
Set piColumnIndex to 0
Set psCaption to "Active Customer"
Set piColumnSpan to 5
Set pbShowLabel to True
Set pbServerOnChange to False
Set psClientOnChange to "handleStatusChange"
End_Object
Previous Topic: JavaScript and DataFlex Classes
Next Topic: Studio Support for Web Application Development