The Servoy Web Client has a pure HTML & CSS based UI that runs in the Browser, while all the business logic is executed on the Application Server.

With the UI running in the browser and being pure HTML and CSS, it lends itself for customization. 

Customization of the Web Client is possible in a view different ways:

• Modifying the Form HTML & CSS templates
• Changing the "servoy_web_client_default.css" template
• Interacting with the browser environment through non-editable HTMLAreas
• Interacting with the browser environment through the WebClientUtils plugin

This chapter explains the above mentioned techniques.

Customizing the Form HTML & CSS templates

For each Form that is part of the designtime design of a Solution, Servoy generates both a HTML and CSS template dynamically. These templates are filled with data at runtime.

The generated templates can be customized and stored in a specific location on the Servoy Application Server, using a name identical to the dynamic generated template. If a template is available on disk, that template will be used at runtime, instead of the dynamicly genarated template.

The dynamically generated templates are available through the browser at {serverURL}/servoy-webclient/templates/default/{solutionName}/{formName}.[html/css]. The templates can also be accessed via WEBDAV.

When modified, the templates need to be stored in the following location to be picked up by Servoy at runtime:

\{servoyInstall}/application_server/server/webapps/ROOT/servoy-webclient/templates/\{subdir}/\{solutionName}/\{formName}.[html/css].

The '{subdir}' part of the location is the 'default' directory by default, but it is possible to create another subdirectory in the  {servoyInstall}/application_server/server/webapps/ROOT/servoy-webclient/templates/ directory for storing the modified templates and at runtime

Changing the "servoy_web_client_default.css" template

Interacting with the browser environment through non-editable HTMLAreas

Interacting with the browser environment through the WebClientUtils plugin

 For branding some of the generic web pages that are part of the Servoy environment and are utilized by the Web Client, see Branding.

• Integration through non-editable HTMLArea: the HTML markup in the dataprovider attached to the non-editable HTMLArea needs to be valid XML, as Servoy needs to parse and process the contents  
• media url rewrites
• src url rewrites
• script, style and link tags inside the custom HTML 
• javascript:.... event handler rewrites
  • tip: create a button element, make is invisible through css (visibility: hidden) and through JavaScript click the button: 
    <button id="myCoordinatesCallbackHandler" onclick="javascript:globals.myCoordinatesCallbackMethod(browser:x, browser:y)" style="visibility: hidden">dummy</button>
    document.getElementById("myCoordinatesCallbackHandler").click()
• body onLoad event to trigger logic when the content gets rendered 
• Tips:
  • XML (add HTML template here)
    • CDATA
    • Watch out for self closing divs
  • Manage custom StyleSheets inside Servoy and include them into the Web Client using the following code:
    var style = solutionModel.getStyleSheet(name).getText();
    .....

WebClientUtils plugin:

• Allows to force inclusion of some of the JavaScript libraries Servoy ships with: Servoy by default conditionally includes them onto the Web Client markup only when they are needed. If custom clientside logic requires the library to be available, this can be done using the following code:
  ...
• Allows to execute JavaScript clientside in the browser
• Allows adding class attributes to the markup of elements
• Allows for generating callback scripts 
• Allows for marking elements as rendered: this hooks deeply into Servoy mechanism for updating the Web Client markup when something changes in the UI. When ....

For an overview of the version of each JavaScript library that is bundled with Servoy, check ....