5.11.3 Example of JavaScript Plugin parts

Examples of how to use JavaScript Plugins are provided below, along with the description of the necessary settings.

Organization of this subsection

(1) Linking a Guide Part with the REST server
(2) Checking the value entered in the Guide Part

(1) Linking a Guide Part with the REST server

The example shown here describes how to use a JavaScript Plugin when a Guide Part is to be linked with the REST server in Operational Content.

Processing overview

Invoke the REST server by using the value entered in the text box part.
Output the result returned from the REST server to the next Guide Part.

Preconditions for the REST server

Called URL: http://testserver/status
Invoke parameter: parameter1
Result to be returned: Status array [{"status":0},{"status":1}]

Operational flow

Figure 5‒12: Linking a Guide Part with the REST server

Setting procedure

Place a text box part on the Process Node for "Input Query".
Place a JavaScript Plugin Part.

Add an input parameter to the JavaScript Plugin Part, and then specify the following settings.

Figure 5‒13: Settings specified in the JavaScript Plugin Part ("Input Query")

Settings specified in the JavaScript Plugin Part ("Input Query")

Plugin name

RestCheck

http://testserver/status

JavaScript

var client = ucnpJavaScriptPluginManager.getRestClient();
client.addParameter("parameter1", input0);
var serverResult = client.execute();

Parameter Name (Input from parts)

input0

The following processing is written in the JavaScript:

The input value of the text box part, which is initially set in the variable input0 (input parameter), is set in the variable parameter1 (invoke parameter) instead.
The result to be returned is stored in the variable serverResult.

Draw a mapping line from the text box part to the input parameter.

Figure 5‒14: "Input Query" mapping

Place a label part on the Process Node for "Output Result".
Place the JavaScript Plugin Part having the same name as the one you have placed in step 2.

Add an output parameter to the JavaScript Plugin Part and specify the following settings.

Figure 5‒15: Settings to be specified in the JavaScript Plugin Part ("Output Result")

The following settings are specified in the JavaScript Plugin Part:

Plugin name

RestCheck

JavaScript

var result = "Result:" + serverResult[0].status;

Parameter Name (Output to parts)

result

The following processing is written in the JavaScript:

The first status value is acquired from the status array of the result that has been stored in the variable serverResult by the JavaScript Plugin Part having the same name and placed on "Input Query", which is then linked with the lead statement Result: and set in the variable result.

Draw a mapping line from the output parameter to the label part.

Figure 5‒16: "Output Result" mapping

Execution result

When this Operational Content is executed, the first status value is acquired from status array [{"status":0},{"status":1}] in the result returned from the REST server, and Result:0 is output to the label on "Output Result".

To Page Top

(2) Checking the value entered in the Guide Part

The example shown here describes how to use a JavaScript Plugin when the value entered in the Guide Part is to be checked in Operational Content.

Processing overview

Acquire the initial value from the REST server and display it in the Guide Part.
Entering a value and clicking the Next button causes the entered value to be checked. If the check conditions are not satisfied, an error message is output.

Preconditions for the REST server

Called URL: http://testserver:1880/restapi
Result to be returned: Initial value array {"initvalues":{"text0":"50","text1":"30"}} (JSON format)

Operational flow

Figure 5‒17: Checking the value entered in the Guide Part

Setting procedure

Place a text box part on the Process Node for "Input Query".
Place a JavaScript Plugin Part.

Add input and output parameters to the JavaScript Plugin Part, and then specify the following settings.

Figure 5‒18: Settings specified in the JavaScript Plugin Part ("Input Query")

The following settings are specified in the JavaScript Plugin Part:

Plugin name

RestCheck

http://testserver:1880/restapi

JavaScript

if (ucnpJavaScriptPluginManager.isInput()) {
  // When the Next button is clicked after a value is entered, validation is performed.
  var param = ucnpJavaScriptPluginManager.getParam();
  var type = param.get("ucnp.button.type");
  if (type == "show_next_page") {
    var retMap = ucnpJavaScriptPluginManager.getReturnMap();
    if (100 < input0) {
      var errorParts = new java.util.ArrayList();
      errorParts.add("input0");
      retMap.put("ucnp.error.params.list", errorParts);
      retMap.put("ucnp.error.message", "Error!");
    }
  }
} else {
  // Acquisition of the initial value
  var client = ucnpJavaScriptPluginManager.getRestClient();
  var serverResult = client.execute();
  var initval = serverResult.initvalues.text0;
}

Parameter Name (Input from parts)

input0

Parameter Name (Output to parts)

initval

The following processing is written in the JavaScript:

When the return value of the isInput method is false, the initial value is displayed in the text box part. For this reason, the value of initvalues.text0 (initial value) is acquired from the REST server and then set in the variable initval that corresponds to the output parameter.
If the Back or Next button is clicked, the return value of the isInput method becomes true. The value of ucnp.button.type is acquired from the getParam method to determine the button type, and if the button type is show_next_page (Next button), validation (entered value check) is performed.
The Map object for setting an error message is acquired from the getReturnMap method and then set in the variable retMap.
The input value for the text box part is acquired from the variable input0 (input parameter), and if the input value is larger than 100, the parameter list to be highlighted is set to ucnp.error.params.list, and the character string Error! is set in ucnp.error.message.

Draw a mapping line from the text box part to the input parameter and from the output parameter to the text box part, respectively.

Figure 5‒19: "Input Query" mapping

Execution result

When this Operational Content is executed, the first value (initial value) of the result {"initvalues":{"text0":"50","text1":"30"}} returned from the REST server is acquired, and the text box is displayed with 50 input as the initial value.

Figure 5‒20: Displaying the initial value

When 101 is entered in the text box and then the Next button is clicked, an error message appears and the text box becomes highlighted. Furthermore, a transition to the next node is suppressed.

Figure 5‒21: Displaying an error message

When the Back button is clicked, no error message is displayed, and if 100 or a smaller value is entered in the text box and then the Next button is clicked, a transition is made to the next node without any error occurring.

To Page Top