Client Events using JavaScript

Hi All,

Today I want to share with you one way how you can add some client validations/calculation using JavaScript right in the browser with no accessing server data.

In general i would suggest you to not do any complex calculations on client side and always use server for all data manipulations. However in some specific situations this approach may save a lot of processing time because client events may do calculations right in the browser.
Also note that client logic will be available only for browser users and will not be triggered from web services API and Mobile application.

The scenario that i want to do is quite simple – trigger the code after the value changes in some controls and validate/calculate its value. This example is designed for demonstrating purpose only so I would like just to show a notification box with new value when someone change GL Batch description.
As a much better example of client events may be a playing of sound on button/control click. Really good explanation and example example is provided on Stack Overflow.

Customization
To add required validation lets complete following steps:

1. Create a new customization project
2. Open required screen in the customization browser
3. Locate control that requires additional validation
4. Add a JavaScript control near to the required
   
5. For the JavaScript element we need to specify new JavaScript code that will contains validation function. Our function will be called on description control value change.
   
   • function myValueChanged(control, eventArgs) { alert(eventArgs.Value); }
6. Now we need to register the new client event for the description control. Client events are hidden property so to see it you need to remove filter on top of the grid. Inside client events collection you can find most common user interaction events that can help you to catch different user’s actions. I will use ValueChanged event.
   
7. Now you can publish customization.

Function 
Lest check the function that we have added to the script control:

function myValueChanged(control, eventArgs) 
{ 
     alert(eventArgs.value); 
}

This function actually is a standard event handler that has 2 parameters: control that has rises event and event arguments. You can use all parameters for calculations. In my case event arguments will contains new value changed by user.

Debugging
Also you may want to debug your java script code. This will be quite simple using Google Chrome debugging tools. Just click F12 to show panel and refresh you page to load all possible scripts.
Your custom function will be included into the page html code (Use search to find your function).
Just put a break-point there and browser automatically notify you when function is triggered.
You can use all possible tools to understand what is going on and what parameters you can use.

Have a nice development!