Script Execution

When AcuToWeb displays your program User Interface in the browser, browser capabilities become available. One capability is to execute scripts, like JavaScript. AcuToWeb provides the following two methods to execute JavaScript:

PATH_CUSTOM_JS method

PATH_CUSTOM_JS is a configuration option that enables JavaScript execution as your program UI loads into the browser. See Gateway Configuration File Section Headers and Options for more information.

atw-script control method

You can include the atw-script control in the COBOL program Screen Section, or by using Display syntax in the Procedure Division. This control ignores all common properties, such as position, visible, title, etc. The control is not visible, meaning it has no position, and the user cannot interact with the control directly.

The COBOL program can Modify the control to execute browser supported scripting such as JavaScript. This control has six special properties, two of which can be inquired. The control has an event, NTF-ATW-EVENT. There is a new AcuToWeb Gateway configuration "path_resources", this variable is used to indicate the path used for return all css and js file requested from COBOL code.

For the syntax below, js1 is defined as the handle for the atw-script control. EVALUATE takes a single string. That script is executed on the browser immediately. For example:

           move  "document.getElementById(""demo"").innerHTML = ""Paragr
      -          "aph changed."";" to js_str
           modify js1 evaluate(js_str)

ADD takes two strings - an identifier and a script. This associates the script with that identifier, in order to reference that script later. The script is not immediately executed. For example:

           move "function myFunction() {document.getElementById(""demo""
      -         ").innerHTML = ""Paragraph changed.""; }" to js_str
           modify js1 add("this-is-my-id", js_str)
modify js1 add("chartsJS", "[SRC]:https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js") giving addJSCharts

The prefix [SRC]: means that the client browser looks for resources. In this case, it describes that the content is a URL and the content is not JavaScript.

modify js1 add("myscript", "[SRC]:/resources/js/myscript.js") giving addJSVal

In this case, the file requested is a local file in web folder – the gateway web folder. The resources matches with the PATH defined in path_resources, which is configurable in gateway.toml.

Notes:

When you use ADD to add a custom function, you must consider the name translation. For example:
```
modify js1 add("myfunc", "function f1(msg){ alert(msg); }") giving addJSVal
```
While this is formally correct syntax, due to the architecture of atw-script, the function f1 won't be reachable from any further CALL statement. The correct format for an inline function, which is a function that is not defined into a script added with the [SRC] sintax, is:
```
modify js1 add("myfunc", "f1:function (msg){ alert(msg); }") giving addJSVal
```
Then, call the function as follows:
```
modify js1 call("myfunc.f1(""hello world"")") giving addJSVal
```
The giving value is important because return provides the number identified by ATW-SCRIPT-EVENT in DATA-EVENT-2 when DATA-EVENT-1 is equal to 1.

VARIABLE can be used to get or set variables in the script. Modify this property to set a variable, and inquire this property to get the value of the variable. For example:

STRING 'myFunction:function() { total = price1 + price2; }'
         DELIMITED BY SIZE
         INTO JSstr3
      modify Screen1-As-1 add("anotherid", JSstr3)
      modify Screen1-As-1 variable("price1", num1)
      modify Screen1-As-1 variable("price2", num2)
      modify Screen1-As-1 call("anotherid.myFunction()")
      inquire Screen1-As-1 variable("total") in result

CALL takes at least one string – the name of the function to call. If that function takes parameters, you can include them as part of the string you create to modify the CALL parameter. Alternatively, you can specify multiple strings. The extra strings are the parameters passed to the function. For example:

           move "function myFunction(name,job) {document.getElementById(
      -         """demo"").innerHTML = ""Welcome "" + name + "", the ""
      -         "+ job + ""."";}" to js_str
           modify js1 add("this-is-my-id", js_str)
           modify js1 call("myFunction('Harry Potter','Wizard')")
           move "Harry Potter" to par1
           move "Wizard" to par2
           modify js1 call("myFunction()", par1, par2)

Alternative ways to use the CALL property:

       Move 1 to var1
       Move 2 to var2
       Move “test” to var3

       Modify js1 call(“myFunction(1, 2, “”test””);”).

Or:

       Modify js1 call(“myFunction()”, var1, var2, var3).

NTF-ATW-EVENT

NTF-ATW-EVENT this event will trigger when there is an event that has been received by the JS, when the JS has been injected via the ATW-SCRIPT. Note that only the code that has been inserted via ATW-SCRIPT will eventually trigger this event.

	EVALUATE EVENT-TYPE
           WHEN NTF-ATW-EVENT
             EVALUATE event-data-1
               WHEN 1
                     modify js1 CALL("googleMaps")
                     modify js1 add("script2",
                            "[SRC]:/js/myscript2.js")

LAST-ERROR

LAST-ERROR can be inquired and contains the last error the Javasctipt engine returned. There could be many errors as these depends on what your JS code does. Normally these errors goes into the JS console of the browser, but this property provide a means to COBOL program to be aware of such error message. The AcuToWeb will queue all the error messages that originate from the code injected by AcuToWeb into a FIFO list and will delete the message once COBOL inquires this property.

 inquire js1 last-error value in valuefromJS

LAST-RESULT

LAST-RESULT can be inquired to get any character result from the last script called, and is available when an EVALUATE returns a positive value.

REMOVE

REMOVE takes a single string, which is an identifier used with the ADD property. This removes that script from the browser, so it can no longer be referenced. For example:

 modify js1 remove ("this-is-my-id")