Page History

Client -side scripts allow the system to run scripts are used to execute JS scripts in the browser when the client-side events happen, for example:

form loading;
form submitting;submission
field value changingchange.

Client -side scripts are used to configure scripts allow configuring forms, form fields, and field values while the client uses the form. Their abilitiesThey can execute the following actions:

make the field hidden or visible;.
make the field read-only;.
make the field mandatory or non-mandatory;.
set the value in one field, basing based on the value in another field;.
change the parameters in a Choice the choice list;.
show a the message basing based on the field value.

Client-side scripts are used to execute JavaScript scenarios on the client-side. Client-side scripts may be either a record of the Client Script (sys_script_client) table, or it can be executed within some UI Actions when its Client parameter is equal to 'true'.

Image Added

Client logic can also be implemented within the client script widget:

Image Added

The general client-side classes are: SimpleForm, SimpleList, and SimpleUser. To get more information about client-side

script form configuration

classes, please check our Client-Side API article.

Creating a client script

The client script can be configured via configured via the SimpleOne administrative agent interface.

Tip
Required role: admin.

To configure a the script, please complete the steps below:

Navigate to System Definition -> to System Settings → Client Script.
Click New and fill in the fields.
Click Save or Save and Exit to apply changes.

Client script form fields

Name

Mandatory

Description

Name

Y

ClientDefine the client-side script name.

Table

Y

Specify a A table on which form the script will be executed.

Type

Y

Specify the The script type. Available options:

onLoad – it the script starts when the system displays the form for the first time before users will enter data. Generally, onLoad scripts scripts perform manipulations on the client - side with the current form or set default record values ;set.
onChange – it the script starts when the specified field in on the form is has been changed;.
onSubmit – this the client-side script can cancel form submitting submission by returning'false;'.
onCellEdit - this – the client-side script starts at the moment when some cell is to edit.a cell has been edited.
- oldValue –
- oldvalue - the old value for of the cell that was will be edited;.
- newValue - – the new value for the cell that was edited;will be inserted.
- table - – the table name of the cell being that will be edited (for example, sys_db_table); .
- sysId - – the ID of the record relevant to the cell being that will be edited;.
- callback - – if this the variable is equated set to FALSE 'false', then subsequent scripts will not run; otherwise, they will execute.

Column

Y

Select the column from the specified table, the change, or editing of which starts the script.

Info
The field appears when the Type field is onChange, or onCellEdit.

Views

N

Specify a the form view on which the client script should be run. You can specify more than one view. If no view is specified, then this the client script will be executed on all the views if there are any.

Condition

N

Specify a the trigger condition conditions for this the client script that must be met so that to run the script runs. Use the the Condition Builder to build complex AND/OR filters.

Info

Conditions work jointly with values from the Type field

; they

. They are applicable only for the onLoad, onSubmit or onChange client-side scripts.
An empty condition always returns 'true'.

Description

N

Type a A detailed description of the script actions.

Messages

Write a message you want to show to a user when a client script is performed.

Active

N

Active

When set to TRUE 'true', the script is active; otherwise, it is not.

Inherited

N

When set to TRUE 'true', the script will be applied not only for to the table specified in the Table field, but also for all its child tables.

Order

N

Define Defines the order of the client script execution. If there are several client scripts, they will be executed in the ascending order.

Script

N

This field contains Type a client-side script .

Client-Side API

In the client-side scripts, you can use methods that are provided by client-side API (SimpleForm class)

to execute.

Special Features

Use callback

Use callback functions to work with SimpleRecord

objects

Client-Side objects:

Code Block

theme	Eclipse
linenumbers	true

const record = new SimpleRecord new SimpleRecord('task');
record.get('159644860216948298', () => {
  console    console.log(record.number);  // TSK0000123
});

Dot-walking is not available for fields of the Reference type. You can use

callback

the callback function sequence as a workaround.
For example, instead of server-side dot-walking:

Code Block

language	js
theme	Eclipse

current.caller.company.phone

in client-side script, it will look like:

Code Block

language	js
theme	Eclipse
linenumbers	true

const callerIDconst commitmentID = s_form.getValue('slm_commitmentcaller');
iflet (commitmentID) {
  const commitment = new SimpleRecord('slm_commitment');
  commitment.get(commitmentID, () =>callersCompanyPhone = '';
if (callerID) {
    const agreementuser = new SimpleRecord('agreementuser');
    agreementuser.get(commitment.agreementcallerID, () => {
        const servicecompany = new SimpleRecord('sys_cmdb_ci_serviceorg_company');
      service  company.get(agreementuser.service_idcompany, () => {
           s_form.setValue('service_id', agreement.service_id, service.name); if (company.next()) {
      });
    });
  });
} else {
  s_form.clearValue('service_id');

You can call a server-side script include in case if you need to use server-side methods on the client-side. To perform this, activate the Client Callable attribute.

Server-side script include on the client-side

  callersCompanyPhone = company.phone;
            }
        });
    });
}

Warning

It is not recommended to use native JS methods and properties manipulating the Document Object Model in the client script widget. For example, using properties such as Element.innerHTML or Element.outerHTML in client scripts may cause malfunctions.

To avoid errors, please use the methods provided and supported by the vendor instead. See the example below for clarity.

Code Block
// Not Recommended document.querySelector(".article-body").innerHTML = s_widget.getFieldValue('body'); // Recommended s_widget.addTemplate('body', s_widget.getFieldValue('body'));

Code Block

language	js
theme	Eclipse
title	Server-side script include on the client-side
linenumbers	true

ss.importIncludeScript('AbstractAjaxProcessor');
var DurationCalculator = Class.create();
DurationCalculator.prototype = Object.extendsObject(AbstractAjaxProcessor, {
  getDuration() {
    const start = new SimpleDateTime(this.getParameter('sysparm_start'));
    const end = new SimpleDateTime(this.getParameter('sysparm_end'));
    const scheduleID = this.getParameter('sysparm_schedule');
    const schedule = new SimpleSchedule(scheduleID);
    return schedule.duration(start, end).getDurationSeconds() * 1000;
  }
});

Script include on the client-side

Code Block

language	js
theme	Eclipse
title	Script include on the client-side
linenumbers	true

if (s_form.getValue('start') && s_form.getValue('end') && s_form.getValue('schedule_id')) { const calculate = new SimpleAjax('DurationCalculator'); //Call script include calculate.addParam('sysparm_name', 'getDuration'); calculate.addParam('sysparm_start', s_form.getValue('start')); calculate.addParam('sysparm_end', s_form.getValue('end')); calculate.addParam('sysparm_schedule', s_form.getValue('schedule_id')); calculate.getXML(callback); function callback(response) {const answer = response.responseXML.documentElement.getAttribute('answer'); s_form.setValue('duration', answer); } }

Table of Contents

absoluteUrl	true
class	fixedPosition

Page tree

Versions Compared

Old Version 41

New Version Current

Key

Creating a client script

Client-Side API

Special Features