How to use JavaScript Functions in Client-side Watch Expressions

Description

Client-side watch expressions can call a user defined JavaScript functions as part of the expression.

Discussion

When defining client-side watch expressions (e.g. show/hide, enable, client-side dynamic style, dynamic images), you can use user defined Javascript functions in the expression. Functions can be declared in the global namespace or inside a private namespace (e.g. as a "property" of an object, such as {grid.object} or {dialog.object}.)

You can use Javascript functions that are in your own namespace within the Grid or UX Component in client-side watch expressions.

Client-side watch expressions refers to the following client-side expressions for controls in a component:

  • Show/hide Expression
  • Enable expression
  • Readonly expression
  • Conditional style, class, text, and events
  • Conditional Image definitions
This list is not exhaustive.

 Calling a Function in the Global Namespace

Suppose you have defined the following function in the Javascript Code section to use in a client-side enable expression for a new record button in a UX Component:

function enableNewRecordButton () {
    if ({dialog.object}.isDirty()) {
        return false;
    }

    return true;
}

To use this function in the client-side enable expression for the button, the expression would be defined as follows:

enableNewRecordButton() = true

 Calling a Function in a Private Namespace

To prevent function name collisions, it is beneficial to define JavaScript functions inside a namespace. For example, the following function is defined in the namespace of the {dialog.object} as a method of the {dialog.object}'s _functions property:

{dialog.object}._functions.myfunction = function() {
    return true;
}

The function, {dialog.object}._functions.myfunction can be used in a client-side watch expression. For example, the example below demonstrates how you would write a client-side show/hide expression that calls [js:{dialog.object}._functions.myfunction]*:

{dialog.object}._functions.myfunction() = true