Features¶
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(...)
- 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
Examples¶
addCallback()
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>'
executeClientSideJS()
function myCallback(val1, val2 ){application.output(val1 + val2)}
function test(){ plugins.WebClientUtils.executeClientSideJS('var x = "Hello"; alert(x)', myCallback, ['x', '" was alerted"'])}
getElementMarkupId()
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"'])
}