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;
END

The 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