Example 1: Calling a JavaScript function
This example shows how to call a JavaScript function with the webcomponent.call front call
The form file: wc_echo.per
LAYOUT
GRID
{
[wc1 ]
[ ]
[ ]
Info: [f1 ]
}
END
END
ATTRIBUTES
WEBCOMPONENT wc1 = FORMONLY.mywebcomp,
COMPONENTTYPE="wc_echo", STRETCH=BOTH;
EDIT f1 = FORMONLY.result;
ENDThe HTML file: wc_echo.html
<!DOCTYPE html>
<html>
<head>
<title>The title</title>
<script language="JavaScript" type="text/javascript" src="wc_echo.js"></script>
</head>
<body>
<div style="background-color:green;width:3000px;height:3000px;" >
here
</div>
</body>
</html>The JavaScript file: wc_echo.js
var echoString = function(str) {
return str;
}
var echoObject = function(ostr) {
var o = JSON.parse(ostr);
return JSON.stringify(o);
}
var onICHostReady = function(version) {
if ( version != 1.0 ) {
alert('Invalid API version');
}
}The program file: wc_echo.4gl
IMPORT util
MAIN
DEFINE rec RECORD
mywebcomp STRING,
result STRING
END RECORD
OPEN FORM f FROM "wc_echo"
DISPLAY FORM f
INPUT BY NAME rec.* ATTRIBUTES(UNBUFFERED)
ON ACTION get_title
CALL ui.Interface.frontCall("webcomponent","getTitle",
["formonly.mywebcomp"],[rec.result])
ON ACTION echo_string
LET rec.result = wc_call("formonly.mywebcomp", "echoString", "Hello!")
ON ACTION echo_object
LET rec.result = wc_call("formonly.mywebcomp", "echoObject",
'{"id":"235","name":"Doorman"}')
END INPUT
END MAIN
FUNCTION wc_call(fn,fc,p1)
DEFINE fn,fc,p1 STRING
DEFINE res STRING
TRY
CALL ui.Interface.frontCall("webcomponent","call",[fn,fc,p1],[res])
CATCH
ERROR err_get(status)
RETURN NULL
END TRY
RETURN res
END FUNCTION