Client Script actions all-in-one place

[anandsuresh]

Hello SN Family,

I am new to ServiceNow development and recently started exploring client scripts and their usage. I understand that there are four types of client script functionalities:

•  onLoad

•  onChange

•  onSubmit

•  onCellEdit

From what I've seen so far, we need to create separate client scripts for each of these actions, which can lead to a larger number of scripts, especially when working across multiple forms.

This makes me wonder,  why not have a single place to write all our client-side logic, where each action is defined as an individual function within the same script?

For example, we could define onLoad, onSubmit, and other handlers in one unified script block. The form would then execute the appropriate function based on the event type and order. This approach would make it much easier to maintain, view, and troubleshoot the code since everything would be centralized.

Perhaps this functionality already exists in ServiceNow? If yes, I would love to hear your insights or best practices around this.

[lauri457]

Servicenow is a low-code platform where configuration is defined in records of metadata rather than executing scripts as is. Strive to keep ui logic simple while using as much no-code as possible to keep it maintainable by you and others as well.

Below you can see how an onchange client script is translated into an event handler in the browser. Trying to circumvent this logic is a pointless exercise as the abstraction is part of the appeal of the platform

addRenderEvent(function () {
    function onChange_incident_assignment_group_2(control, oldValue, newValue, isLoading, isTemplate) {
        if (isLoading)
            return;
        if (oldValue != newValue)
            g_scratchpad.formValue = newValue;
        if (newValue === '' || newValue == null || oldValue != newValue || newValue != g_scratchpad.formValue) {
            if (newValue && g_form.getValue("assigned_to")) {
                var groupLookupGr = new GlideRecord('sys_user_grmember');
                groupLookupGr.addQuery('group.sys_id', newValue);
                groupLookupGr.addQuery('user', g_form.getValue("assigned_to"));
                groupLookupGr.setLimit(1);
                groupLookupGr.query(groupLookupCallback);
            } else {
                g_form.setValue("assigned_to", "");
            }
        }
    }
    function groupLookupCallback(groupLookupGr) {
        if (!groupLookupGr.hasNext())
            g_form.setValue("assigned_to", "");
    }

    var thisWidget = document.getElementById('incident.assignment_group');
    var thisHandler = new GlideEventHandler('onChange_incident_assignment_group_2', onChange_incident_assignment_group_2, 'incident.assignment_group');
    g_event_handlers_onChange['onChange_incident_assignment_group_2'] = 'Empty assigned_to on group change';
    g_event_handler_ids['onChange_incident_assignment_group_2'] = '273386d1c3a32200b6dcdfdc64d3ae85';
    g_event_handlers.push(thisHandler);
});

Of course you can have reusable logic in a ui script which you might call in multiple places but complexity like this usually achieves very little and just makes code less maintainable. Similar to script includes - adding single-use scripts into a "Utils" suffixed class as some supposed best practice does not really add any value in my opinion.