Client Script
CLIENT – SCRIPT
Client-side scripts execute within a user's browser and are used to manage forms and form fields.
Examples of things client-side scripts can do include:
• Place the cursor in a form field on form load
• Generate alerts, confirmations, and messages
• Populate a form field in response to another field's value
• Highlight a form field
• Validate form data
• Modify choice list options
• Hide/Show fields or sections
A Client Script executes client-side script logic when forms are:
• Loaded
• Changed
• Submitted
Types of Client Script :-
onLoad() —
• Script will runs when the system first renders the form and before users can enter data.
• Used when something needs to be changed on the form while it is loading.
• onLoad() function will be automatically populated in the script field when onload() type is
selected on the form.
• Typically, onLoad()client scripts perform client-side-manipulation of the current form or
set default record values.
function onLoad() {
//Type appropriate comment here, and begin script below
}
onSubmit() —
• Script will runs when a form is submitted or saved.
• onSubmit() function will be automatically populated in the script field when onSubmit type
is selected on the form
• Typically, onSubmit() scripts validate things on the form and ensure that the submission
makes sense. An onSubmit() client script can cancel form submission by returning a value
of false.
function onSubmit() {
//Type appropriate comment here, and begin script below
}
onChange() —
• Script will runs when a particular field value changes on the form.
• Used to perform some operation as per the field changed
• onChange() function will be automatically populated in the script field when
onChange type is selected on the form.
• The onChange()client script must specify these parameters.
• control: the DHTML widget whose value changed.
Control will pull the field which is changing .
Note: control is not accessible in mobile and service portal.
• oldValue: the value the widget had when the record was loaded.
• newValue: the value the widget has after the change.
• isLoading: identifies whether the change occurs as part of a form load(true/false).
• isTemplate: identifies whether the change occurs as part of a template load it means
which we changes on the form it is the part of template or not .(true/false).
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}
//Type appropriate comment here, and begin script below
onCellEdit() —
• Script will runs when a field value changes on a list.
• The onCellEdit() client script must specify these parameters.
• sysIDs: hold all the value of the sys_ids for all items being edited.
• table: the table of the items being edited.
• oldValues: the old values of the cells being edited.
• newValue: the new value for the cells being edited.
• callback: a callback that continues the execution of any other related cell edit scripts.
If true is passed as a parameter, the other scripts are executed or the change is committed
if there are no more scripts. If false is passed as a parameter, any further scripts are not
executed and the change is not committed.
1. Requirement to auto populate duration based on start and end [Link] on Change client
script
2. if (isLoading || newValue === '') {
3. return;
4. }
5.
6. var selected_date1 = g_form.getValue('u_glide_date_1');
7. var selected_date2 = g_form.getValue('u_glide_date_2');
8.
9. if (!selected_date1 || !selected_date2) {
10. // One or both of the dates are empty, handle the error here
11. return;
12. }
13.
14. var date1 = new Date(selected_date1);
15. var date2 = new Date(selected_date2);
16.
17. if (isNaN(date1) || isNaN(date2)) {
18. // One or both of the dates are invalid, handle the error here
19. return;
20. }
21.
22. var diff = [Link]() - [Link]();
23. g_form.setValue('u_string_10', diff);
24. }
[Link] two fields state and city and according to state display the cities in the city field.
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
//Type appropriate comment here, and begin script below
var a = g_form.getValue('u_choice_1');
if (a == 'jharkhand') {
g_form.clearOptions('u_choice_3');
g_form.addOption('u_choice_3', 'ranchi', 'Ranchi');
g_form.addOption('u_choice_3', 'deoghar', 'Deoghar');
if (a == 'karnataka') {
g_form.clearOptions('u_choice_3');
g_form.addOption('u_choice_3', 'bangalore', 'Bangalore');
g_form.addOption('u_choice_3', 'mysore', 'Mysore');
if (a == 'maharastra') {
g_form.clearOptions('u_choice_3');
g_form.addOption('u_choice_3', 'pune', 'Pune');
g_form.addOption('u_choice_3', 'mumbai', 'Mumbai');
}
}
3. Validate the user mail id
function onSubmit() {
//Type appropriate comment here, and begin script below
g_form.hideErrorBox('u_email');
return validateEmail('u_email');
function validateEmail(field) {
var email = g_form.getValue(field);
if (!email || [Link]().length <= 0)
return true;
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[
[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}
))$/;
if () {
g_form.showErrorBox(field, getMessage('Invalid Email'));
return false;
return true;
4. prevents users from changing the State to closed in a list
function onCellEdit(sysIDs, table, oldValues, newValue, callback) {
var saveAndClose = true;
if(newValue == 7){
alert('Not allowed');
saveAndClose = false;
} else {
saveAndClose = true;
}
callback(saveAndClose);
5. use case is in the incident form when service field is set to 'SAP Enterprise Services'
then category is set to 'software'
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}
var ser = g_form.getValue('business_service');
alert(ser);
if (ser == '26da329f0a0a0bb400f69d8159bc753d') {
g_form.setValue('category', "Software");
}