onChange Date Picker

[Ken83]

Hello Community,

        I've got an issue with the date picker field on a catalog item. We have implemented a form validation framework that allows us to validate the values being used in variables on catalog items. We have the same thing in place for date fields. In this case, we want to verify that the entered date is not a date before today. It can only be today going forward. When this validation fails, you should see this error message.

That's the context. Now, the issue is, if I manually type the date into that field, it triggers an onChange event as expected. However, if I use the date picker to the right, it does not trigger the onChange event, thus our validation does not work. Any suggestions or input on what the actual date picker does not trigger an onChange event?

I'm certain someone will ask how the onChange event is implemented, well here is the script that does this.

[Dominik Simunek · Accepted solution]

Hi Kenneth,

I am able to reproduce same behavior. Really event listener created in your way is not executed when date-picker is used. I tested it with onChange catalog client script and that is executed in both cases - when editing directly or using date-picker. It would be the best if you could use Catalog Client Scripts to run your validation but I understood that your framework is somehow creating all those event listener automatically for all variables of catalog item and you don't want to manually create those onChange client scripts for every variable.

And so I have checked how ServiceNow is doing that and found out that they are using "GlideEventHandler". So I created this code in onLoad client script to register event with my onChange function.

function onLoad() {
   var element = g_form.getElement('my_date');
   var elementName = element.name;

   var onChangeHandler = new GlideEventHandler('myOnChange', function myOnChange(control, oldValue, newValue, isLoading, isTemplate) {
         if (isLoading || newValue == '') {
               return;
         }
         g_form.addInfoMessage('newValue = ' + newValue);
   }, elementName);

   g_event_handlers.push(onChangeHandler);
}

Notice that using GlideEventHandler I create the function with same parameters as normal "onChange" client script and e.g. newValue is set for me correctly. I guess you can use similar code to make it working in your framework. Let me know if that worked or you needed to do some additional changes as I am also interested in if that works as I have never used GlideEventHandler so far.

[Ken83]

Dominik, you sir...are the real MVP! That worked perfectly. I actually didn't have to modify the structure of the script at all, just filling in relevant values. I did have to add a field to my validationType table for the event name, but that's it. Here is the finished product..

[Ken83]

dooma Do you happen to know where I can find some documentation on the GlideEventHandler?

[Dominik Simunek]

Hi Ken, I was not able any API documentation on Developer site and I was not able to find any official documentation. The most official note about GlideEventHandler is in the book Mastering ServiceNow probably. I was inspired by the code from ServiceNow code directly that is generated for onChange scripts.