Frontend Scripting with JEXL

JEXL (JavaScript Expression Language) enables dynamic behavior in tSM forms — such as showing/hiding fields, calculating default values, or enforcing validation rules — all without backend code.

It runs in the browser at runtime, and is used throughout forms and pages via the Form Designer.

What is JEXL Used For?

Use Case	Example
Conditional visibility	Hide a field if the user selects "B2C"
Default values	Set date field to "today + 1"
Custom validation	Ensure value falls within limits based on another field
Data transformation	Join two strings or check if an item exists in a list
Context-based filtering	Show only orders for the current customer

Where JEXL Can Be Used

You’ll see JEXL-enabled fields in the Form Designer with a toggle icon:

• hidden, readonly, disabled
• default value
• validationMessages
• config fields
• Listing filters

Once toggled, you can insert single-line expressions in JEXL.

JEXL Syntax Basics

• Only single-expression scripts (no multiline code)
• Uses JS-style operators (+, ==, &&, ||, !)
• Works with context variables and built-in functions
• Evaluates to a value or true/false for boolean logic

Context Variables

Context variables are predefined objects injected into the expression evaluation runtime. These give access to the form state, entity metadata, current user, and more.

$context – Core Context Object

The $context is the root object for accessing all contextual metadata. It includes:

• The current form (form)
• The related entity (entity)
• Indexed data (elastic)
• User and environment information ($runtimeInfo, $configUi)
• Associated accounts (accounts)
• View or form mode
• Specification of the underlying entity

Structure of $context (Example: Customer Detail Form)

$context = {
  "entity": { ... },
  "form": { ... },
  "elastic": { ... },
  "viewMode": "baseView"
}

Variable Summary

Variable	Description
$context.form	Object representing the current form being edited/created
$context.entity	Object representing the persisted business entity (if any, on detail pages)
$context.elastic	Flattened, denormalized form of the entity for search/index purposes
$context.viewMode	Current view context — e.g. "baseView", "tabView", etc.

$value – Characteristic Field Values

This contains raw values of characteristics, which are being set or displayed in the form.

$value = {
  "customerPriority": "High",
  "isBillable": true
}

Use $value.<fieldCode> to access individual fields, for example:

$value.customerPriority == 'High'

$configUi – Runtime Frontend Configuration

Carries configuration values used in the frontend UI layer.

Example:

$configUi = {
  "env": "prod",
  "custom": {
    "percentImageCompress": 50
  }
}

Usage:

$configUi.custom.percentImageCompress > 20

$runtimeInfo – Logged-In User Info

This variable contains data about the currently logged-in user (identity, roles, privileges, etc.).

Example structure:

$runtimeInfo = {
  "id": "f05bd47a-...",
  "name": "Michal Šimovič",
  "code": "michal.simovic@datalite.cz",
  "status": "ENABLE",
  "urList": [
    {
      "roleId": "...",
      "roleName": "Admin",
      "roleCode": "Admin"
    },
    {
      "roleId": "...",
      "roleName": "QuickLinks - All",
      "roleCode": "User.Role_QuickLinks_All"
    }
  ],
  ...
}

Usage example:

$runtimeInfo.urList.filter(x => x.roleCode == 'Admin').length() > 0

---

Practical Examples of Usage

1. Conditional Field Based on Legal Form

$context.form.legalForm.code == 'LLC'

2. Conditional Field Visibility for Customer Type

$context.entity.customerType.code == 'CustomerType_B2B'

** 3. Hide a Field When Segment is B2C**

$context.form.customerSegment == 'B2C'

Used in config.hidden.

** 4. Set Default Date to Tomorrow**

addTime($context.form.orderDate, 1, 'days')

Used in default for a date field.

** 5. Validate VIP Discount Range**

($context.form.chars.clientStatus == 'VIP') && 
($context.form.chars.discountRate < 10 || $context.form.chars.discountRate > 50)

Used in validationMessage → custom rule.

** 6. Check if List Contains a Value**

includes($context.form.chars.selectedItems, 'apple')

or

$context.form.chars.selectedItems.includes('apple')

Developer Tip

Always validate JEXL expressions using the preview tool in Form Designer with real context payloads. Some values (e.g., accounts, elastic, or nested characteristics) may be absent in new forms.

Built-In Functions

Function	Description
addTime(date, 1, 'days')	Adds days/months/hours to a date
includes(array, value)	Checks if value exists in list
sum(a, b, c)	Adds numbers
isNullOrEmpty(value)	Validates if value is missing or empty
dateFormat(date, 'yyyy-MM-dd')	Formats date string output

A full list of functions is documented in the JEXL Function Reference

JEXL Debug Console

To test expressions in live forms:

1. Enable the debug console in your user settings
2. Open a form and click the JEXL debug icon
3. Use $context to explore live values
4. Test expressions with real-time feedback

Best Practices

• Expressions must be single-line: no if/else blocks

• Use descriptive field names (priorityLevel > prLvl1)

• Combine logic with &&, ||, ternary (? :) when needed

• Always test conditionals in runtime

• Handle null or empty cases explicitly (isNullOrEmpty)