Component properties

There are several properties of the Component class that may contain objects of specific classes. Each of these classes are described in the sub-sections of this section.

On this page some functionality that is shared between these classes is described.

Custom JavaScript

For more complex applications it is possible to add custom JavaScript code that is executed in the front-end. This can reduce the need for communicating with the back-end. Custom JavaScript code can be used in the following places:

  1. Component properties:

    • calculateValue

      The JavaScript code must assign a value to variable value.

    • customConditional

      The JavaScript code must assign a boolean to variable show. Example

    component_object.calculateValue    = "value = data.other_component + 1;"
    component_object.customConditional = "show = data.other_component > 0;"
    
  2. Logic.action

    When the type field of the action dict/struct is set to 'value' or 'customAction', the JavaScript code in the action's 'value' or 'customAction' field must assign a value to variable value. Example

  3. Logic.trigger

    When the type field of the trigger dict/struct is set to 'javascript', the JavaScript code in the trigger's 'javascript' field must assign a boolean to variable result. Example

  4. Validate custom property

    The JavaScript code must assign a boolean to variable valid.

  5. String templates

    JavaScript code used in string template evaluation blocks.

In the JavaScript code the variables listed in the table below are available for use. The usage numbers denote which variables are available for the places specified in the above list. current component refers to the component to which the custom JavaScript applies.

VariableUsageDescription
input2, 4The new value that was put into the current component.
form1, 2, 4, 5The complete form JSON object.
submission1, 2, 4, 5The complete submission object.
data1, 2, 3, 4, 5The complete submission data object.
row1, 2, 3, 4, 5Contextual "row" data, used within DataGrid, EditGrid, and Container components.
rowIndex1, 2, 3, 4, 5Contextual "row" number (zero-based). Can be used with row.
component1, 2, 3, 4, 5The current component JSON object.
instance1, 2, 4, 5The current component instance.
value1, 2, 4, 5The current value of the component in the submission data.
item-The Select component values.

Execution of custom JavaScript depends on the JavaScript support provided by the browser the application is opened in. When the browser does not support JavaScript features that are used, errors and warnings may be printed in the browser's console. The application should continue to function, but functionality may differ from the expected functionality.

Note: For more complex JavaScript, it may be convenient to provide some JavaScript functions for use in any of the above. This can be achieved by providing a Custom JavaScript file.