...

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.

Viewing The Templates

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

Modifying The Templates

The source of the template can be modified with any preferred tool. When modifying the templates, care must be taken not to alter any of the identifiers used by Servoy to fill the template at runtime with data.

...

 The ID of the HTML node representing a Form or Element in the Web Client at runtime can be retrieved at runtime through the WebClientUtils plugin.

Storing Modified Templates

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].

Creating Multiple Sets Of Customizations

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 in the Solution tell Servoy to use this directory insetad of the default directory using the following code:

...

This mechanism allows for creating multiple variations of the templates, for example one variation per customer in a SaaS environment.

The Pitfall Of Modifying HTML Templates

Modified templates become out of sync with the design of the Form as soon as the Form is altered in Servoy Developer. When this happens, the modified temaplte needs to be removed and the then  dynamicaly generated template needs to be modified and stored in the correct location again.

Changing The "servoy_web_client_default.css" Template

Besides the Form HTML and CSS, there is also the "servoy_web_client_default.css" template. This template contains the default CSS used for styling the forms and elements in a Web Client. Modifying this template will result in changing the overall look of all solution in the Web Client.

...

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

Interacting With The browser Environment Through Non-editable HTMLAreas

One of the standard UI widgets in Servoy in an HTMLArea. This widget provides one of the ways to interact with the browser environment, as it has some special behavior when set to not editable and used in the Web Client.

...

  The HTML string in the dataprovider attached to the non-editable HTMLArea needs to be valid XHTML, as it needs to be parsed and processed in order to perform the above mentioned rewrites

Example 1

The following example renders the latest 100 tweets from the servoy twitter account in the non-editable HTMLArea.

...

 While this example will work on a simple Form, there is a risk of it breaking. This example includes JQuery. Servoy itself also utilizes JQuery in certain scenario's. The logic of Servoy is as such that it will only conditionally include JQuery conditionally when required. When that happens when this html is also being shown, there can be a conflict between the 2 JQuery inclusions. This issue can be easily solved by excluding the JQuery library in the html of this example and forcing Servoy to include the JQuery library it ships using the WebClientUtils plugin. 

Example 2

This example shown the creation of a callback to the Web Client business logic that runs on the Server.

...

onclick='javascript:globals.myZipCodeCallbackMethod(\"browser:zipcode\")';

Example 3

Servoy hosts a Google Maps integration sample solution. For more information on this example see Google Maps.