The Web Client Utils plugin offers features to interact with the JavaScript layer in the browser where the Servoy Web client is running:
  • addCallback()
    Provides a facility to generate a string with client-side JavaScript code to execute a method in the client on the Server. The returned code can be included inside a non-editable HTMLArea in order to get it into the client-side markup of the Web Client.
  • executeClientSideJS()
    Provides the functionality to execute some arbitrary JavaScript in the browser, optionally with a callback to the server-side after execution
  • getElementMarkupId()
    Retrieves the value of the id attribute in the HTML markup for the Form Element supplied as parameter. The value of the id attribute (the markupId) can be used client-side to target the HTML element that represents the Form Element, for example using document.getElementById(...)
These feature complement the features of Servoy in the area of interaction with the browser's JavaScript layer:
  • Injecting HTML markup through inclusion of HMTL Markup in non-editable HTMLArea's
  • Triggering client-side JavaScript on render of the UI through the "onload" event on the body tag of the HMTL markup included in a non-editable HTMLArea
  • Doing callbacks from the client-side JavaScript layer to the server-side client, by including HTML button elements with a onclick event handler that specifies javascript:{methodName}() in a non-editable HMTLArea and client-side calling .click() on the button element


function myCallback(val1){application.output(val1)}
//variable to be attached to a non-editable HTMLArea
var html = '<html><head><script> function triggerCallback() {' + plugins.WebClientUtils.addCallback(myCallback, ['"Dynamic callback"']) + '}</script></head><body><button type="button" onclick="triggerCallback()">Click me</button></body></html>'

function myCallback(val1, val2 ){application.output(val1 + val2)}
function test(){ plugins.WebClientUtils.executeClientSideJS('var x = "Hello"; alert(x)', myCallback, ['x', '" was alerted"'])}

function myCallback(val1){application.output(val1)}
function test() {
var id = plugins.WebClientUtils.getElementMarkupId(elements.myButton);
plugins.WebClientUtils.executeClientSideJS('document.getElementById(' + id + ').style.backgroundColor = "red"',myCallback, ['"The button with name myButton now has a red background color"'])