Feature Upgrade: Starting with CSPro 8.0, you should no longer use this feature, the JavaScript interface, that was introduced in CSPro 7.7. All functionality, and more, can be achieved using the Action Invoker. The JavaScript interface will be removed in a future version of CSPro. This documentation is for reference only and should not be used for new projects.
If you are converting a project that used the JavaScript interface, the following table lists the equivalent
actions that can be called from
web views. Note that, unlike the JavaScript interface, you need proper permissions granted using
access tokens.
CSPro displays
HTML in an embedded browser when showing
question text, when displaying
logic-based reports written in HTML, and when displaying HTML content using the
view or
htmldialog functions. The HTML content is shown in a Chromium-based web browser (
Edge WebView2 on Windows, and
WebView on Android). There is a limited API that facilitates communication between JavaScript and CSPro.
By using JavaScript in question text, you can include links in your question text that perform actions such as opening a manual or skipping to a different question. By using JavaScript in
reports or in HTML shown using the
view or
htmldialog functions, you can add dynamic interactive features to your application.
When using the JavaScript interface, an error will display if CSPro cannot properly interpret the call. When calling a JavaScript method, if a movement statement (e.g.,
reenter) or application halt (e.g.,
stop) occurs, the embedded browser will close automatically.
The interface is accessed using several methods belonging to the CSPro object. Some JavaScript interface methods are called synchronously (sequentially) while others are called asynchronously (concurrently). When a synchronous method is called, the JavaScript instruction following the call will not be executed until the method returns the result from CSPro. When the asynchronous method is called, the JavaScript instruction following this call will be executed immediately without waiting for the return value from CSPro.
These methods are always available:
CSPro.getMaxDisplayWidth()
CSPro.getMaxDisplayHeight()
CSPro.runLogic(logic)
CSPro.runLogicAsync(logic, callback = undefined)
Runs a
user-defined function and returns the result of the function as a string. The parameter
logic contains the CSPro logic to call the function. The logic will be compiled at runtime, which means the full compiler is not available and thus only numeric constants and string literals can be passed as arguments to the CSPro function. (This limitation is due to the absence of the full CSPro compiler when running CSEntry on Android.) In the asynchronous version of this method, the optional parameter
callback is JavaScript code to execute following the running of the CSPro logic. Due to threading issues with the embedded browser, if the user-defined function you call may display UI elements as part of its operations, you must use the asynchronous version.
CSPro.invoke(functionName, arguments = undefined)
CSPro.invokeAsync(functionName, arguments = undefined, callback = undefined)
Runs the
invoke function to execute a
user-defined function using runtime binding. The parameter
functionName is a string containing the user-defined function name. The optional parameter
arguments is a
JSON string containing the arguments to the function. Only numeric constants, string literals, and arrays of numerics and strings can be provided as arguments. (Arrays will be transformed into a CSPro
List.) In the asynchronous version of this method, the optional parameter
callback is JavaScript code to execute following the running of the CSPro logic. Due to threading issues with the embedded browser, if the user-defined function you call may display UI elements as part of its operations, you must use the asynchronous version.
Returns the result of the last completed asynchronous method (CSPro.runLogicAsync or CSPro.invokeAsync). This method executes synchronously.
These methods are available when showing a HTML dialog using the
htmldialog function:
Returns the string passed to the
htmldialog function as the
inputData argument. This method executes synchronously.
CSPro.setDisplayOptions(displayOptions)
Sets the display options used by the
htmldialog function. The parameter
displayOptions is a
JSON string containing one or more of the display options used by the function. This method executes asynchronously.
Sets the result of the
htmldialog function and closes the dialog. The parameter
result is a string that will be returned to CSPro logic as the result of the
htmldialog function. This method executes asynchronously.
This method is occasionally available to run operations that only exist in some contexts:
CSPro.do(action, token = undefined)
Runs an operation with an optional token and optionally returns a result. The parameter
action is a string identifying the operation to run. This method executes synchronously.
At present there is only one command, which is recognized by the embedded browser used by
view:
- "close": Closes the browser (as though the user hit the OK button on Windows or the back button on Android).
Question text HTML:
<p>What is ~~NAME~~'s occupation?</p>
<p><a href="javascript:CSPro.runLogicAsync('ViewOccupationList();');">(view full list of occupations)</a></p>
CSPro logic:
HTML:
<h1>District Reports</h1>
<p>Select a province or district report to view:</p>
<ul>
<li><a href="javascript:CSPro.runLogicAsync('ShowDistrictReport(1);');">Artesia</a>
<ul>
<li><a href="javascript:CSPro.runLogicAsync('ShowDistrictReport(1, 1);');">Dongo</a></li>
<li><a href="javascript:CSPro.runLogicAsync('ShowDistrictReport(1, 2);');">Varda</a></li>
</ul>
</li>
</ul>
<p><a href="javascript:CSPro.do('close');">Return to Program</a></p>
CSPro logic:
An alternate way to call the function using a JavaScript function:
<script>
function showDistrictReport(province, district) {
let input = {
"province": province,
"district": district
};
CSPro.invokeAsync("ShowDistrictReport", JSON.stringify(input));
}
</script>
<a href="javascript:showDistrictReport(1, 2);">Show District Report: Varna</a>