Capturing Value Change Event in Form Fields

Owned by kiran.kumari@intellectdesign.com (Unlicensed)
Last updated: Oct 05, 2020 by Lakshminarayanan1 S CTOO (Unlicensed)

Currently, Canvas raises events for input fields only after the user tabs out of the fields. As part of 18.1 release, Canvas provides you the option to capture and raise events when the user is changing or entering the value in the field.

Let us assume a scenario where the developers want to change the text case from lowercase to uppercase as it is being typed in the input field.

The value change event is applicable for the following form items:

  • Text
  • Text Area
  • Slider Field
  • Amount
  • Color Picker
  • Password
  • Date
  • Lookup
  • Auto Suggest


To achieve this scenario, perform the following steps:

  1. Create a form using Form Designer. Refer Accessing Form Designer for information on creating and configuring forms.
  2. In the form's listener JS file, provide the following sample code:
this.fm.registerHandler(CWEC.VALUE_CHANGE, "NAME_ID", function(fm, event, fieldName, value) 
{
	fm.model.setValue('NAME_ID', value.toUpperCase());
});
 
// Here, CWEC.VALUE_CHANGE is the event.
// NAME_ID is the form item ID.
// value.toUpperCase() – This is a function that changes the text to uppercase.

To view the form in your end application, you must create a view and map the form to it. Then map the form view to the app and the app to a workspace.


By default framework takes 1000 milli seconds as the idle time before triggering the CWEC.VALUE_CHANGE event. If you want to change the idle time, you can use the following code in the form's listener JS file. However, note that following code will globally set the idle time at the application level.

canvas.env.options.form.valueChangeIdleTime=10 
// Note: The idle time can be set at the application level only.