Execution of Client-Side Triggers and Operations

In DSPs, triggers and operations that are to be executed on the client are declared with the webtrigger and weboperation ProcScript instructions, respectively, and coded using JavaScript. Typically, they are both called and executed in the browser, although a weboperation can be called from the server by the webactivate ProcScript instruction.

Editing a field, pressing a button, or clicking a link are all actions that might initiate a request to execute a webtrigger or activate a weboperation. By definition, web triggers and operations can be called from the browser, so a publicweb declaration is not required.

Executing a Client-Side Trigger

A typical use of client-side triggers and operations is to change the appearance of a web page. All the data required for this is available in the browser, so there is no need to execute this code on the server.

The following code example shows the onchange web trigger of a RadioGroup field called COLOR. When the user selects a color, the HTML properties of an AttributesOnly field called BODY are changed to that color. 

; Extended Triggers of Field COLOR.DUMMY.MODEL

webtrigger onchange  ; trigger is executed when user selects an option
scope
  ; empty scope because no data needs to be sent or received from server
endscope

 javascript

    var vField, vColor; // declare variables

    // Get value of field COLOR.
    vField = this.getInstance().getEntity("DUMMY.MYMODEL").getOccurrence(0).getField("THEME.DUMMY.MYMODEL");
    if ( vField != null ) {
      vColor = vField.getValue();
    }

    // Get field BODY.
    vField = this.getEntity("DUMMY.MYMODEL").getOccurrence(0).getField("BODY.DUMMY.MYMODEL");

    // Apply the color to the BODY field.
    if ( vField != null ) {
      vField.setProperty("html:class", vColor);
    }

 endjavascript

When the user clicks the button, the following sequence of events is initiated:

  1. The browser uses the scope information defined in the DSP to:
    1. Collect the data needed to execute the trigger.
    2. Block the target data elements in which the response will be loaded, as well as user events, and triggers or operations that are included in the scope.

    In this case, the scope declaration does not specify INPUT or OUTPUT scope, so it does not send or block any data.

  2. The browser adds the request to its request queue. It includes information about the component, instance name, and trigger to be activated.
  3. When the request reaches the top of the queue, the browser sends the request to the JavaScript runtime engine. Queuing is based on dependencies. For example, if the data in the request is already blocked by a previous request, it won't reach the top of the queue until a response is received that unblocks the data.
  4. The JavaScript runtime engine executes the trigger and returns the response.
  5. The browser loads the data from the response into the target data elements.
  6. Any blocked target data elements are unblocked.

Related Topics