Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

  • form loading
  • form submission
  • field value change.

Client scripts allow configuring forms, form fields, and field values while the client uses the form. They 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, based on the value in another field.
  • change the parameters in the choice list.
  • show the message 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'.

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


The general client-side classes are: SimpleFormSimpleList, and SimpleUser. To get more information about client-side classes, please check our Client-Side API article.

Creating a client script


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

Tip

Required role: admin.

To configure the script, please complete the steps below:

  1. Navigate to System Settings → Client Script.
  2. Click New and fill in the fields.
  3. Click Save or Save and Exit to apply changes.

Client script form fields

NameMandatoryDescription
NameYDefine the client-side script name.
TableYSpecify a table on which form the script will be executed.
TypeY

Specify the script type. Available options:

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

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.


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

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

Info
  • Conditions work jointly with values from the Type field. They are applicable only for the onLoad, onSubmit or onChange client-side scripts.
  • An empty condition always returns 'true'.


DescriptionNType a detailed description of the script actions.
ActiveNWhen set to 'true', the script is active; otherwise, it is not.
InheritedNWhen set to 'true', the script will be applied not only to the table specified in the Table field, but also for all its child tables.
OrderN

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

ScriptNType a client-side script to execute.

Special Features


Use callback functions to work with SimpleRecord Client-Side objects:

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

Dot-walking is not available for fields of the Reference type. You can use the callback function sequence as a workaround.
For example, instead of server-side dot-walking:

Code Block
languagejs
themeEclipse
current.caller.company.phone

in client-side script, it will look like:

Code Block
languagejs
themeEclipse
linenumberstrue
const callerID = s_form.getValue('caller');
let callersCompanyPhone = '';
if (callerID) {
    const user = new SimpleRecord('user');
    user.get(callerID, () => {
        const company = new SimpleRecord('org_company');
        company.get(user.company, () => {
            if (company.next()) {
                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'));



Table of Contents
absoluteUrltrue
classfixedPosition