Parent topic: Examples
Web components / Examples

Example 2: Calling a JavaScript function of a gICAPI web component

This example shows how to call a JavaScript function with the "call" front call

The form file: wc_echo.per

ACTION DEFAULTS
  ACTION data_available(DEFAULTVIEW=NO)
END
LAYOUT
GRID
{
[data                                  ]
[                                      ]
[                                      ]
}
END
END
ATTRIBUTES
WEBCOMPONENT data = formonly.data,
   COMPONENTTYPE="wc_echo",
   STRETCH=BOTH;
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

function echoString(str) {
  return str;
}

function echoObject(ostr) {
  var o = JSON.parse(ostr);
  // do something and return back
  return JSON.stringify(o);
}

onICHostReady = function(version) {

   if ( version != 1.0 )
      alert('Invalid API version');

   gICAPI.onProperty = function(p) {
      var myObject = eval('(' + p + ')');
      if (myObject.url!="") {
        setTimeout( function () {
          downloadURL(myObject.url);
        }, 0);
      }
   }

}

The program file: wc_echo.4gl

MAIN
  OPEN FORM f FROM "wc_echo"
  DISPLAY FORM f
  MENU "test"
    COMMAND "echo"
      CALL echo()
    COMMAND "exit"
      EXIT MENU
  END MENU
END MAIN

FUNCTION echo()
  DEFINE a,title,ut STRING
  TRY
    CALL ui.Interface.frontCall("webcomponent","call",
            ["formonly.data","eval","Math.floor(5/2)"],[ut])
    CALL ui.Interface.frontCall("webcomponent","getTitle",
            ["formonly.data"],[title])
    CALL ui.Interface.frontCall("webcomponent","call",
            ["formonly.data","echoString","hello"],[a])
    MESSAGE "ut:",ut,",a:",a,",title:",title
  CATCH
     ERROR err_get(status)
  END TRY
END FUNCTION
Parent topic: Examples