Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Customizing the Form HTML & CSS Templates

For each Form form that is part of the designtime design of a Solutionsolution, Servoy generates both a an 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 dynamically generated template.

Viewing the Templates

...

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

...

Creating Multiple Sets of Customizations

The '{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 . At runtime, in the Solution solution, tell Servoy to use this that directory insetad instead of the default directory using the following code:

...

Modified templates become out of sync with the design of the Form form as soon as the Form 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 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.

This css CSS can be found at {serverURL}/servoy-webclient/templates/default/ and be changed via webdav.

...

The special behavior comes in when the HTML string contained in the dataprovider contains specific specific values for certain attributes on specific HTML tags:

  • Servoy media URL's (media:///.....) inside Style tags or attributes are rewritten so they can be resolved in the browser
  • Servoy media URL's used in the 'src' attribute of Style, Script and IMG tags are rewritten so they can be resolved in the browser 
  • Script, Style and Link tags automatically end up in the head section of the DOM in the browser
  • Event handlers that in the HTML start start with 'javascript:', followed by a Servoy method identifier are rewritten to perform a callback to the server
  • An onload event handler on the body of the HTML is executed in the browser when the DOM is ready

(warning)   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.

...

(warning)  While storing the libraries in the Media Library is convenient for deployment of the libraries with a Solutionsolution, the contents of the Media Library is part of the Solution solution design and thus will be loaded into memory in each client. In case of the Smart Client this means that the libraries will also be downloaded, while they have no use in the Smart Client.

...

(warning)  While this example will work on a simple Formform, 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. 

...

Inside the body a button is placed with a onclick event handler that is prefixed with 'javascript:', followed by a global method called myCoordinatesCallbackMethod that should be defined in the Solutionsolution.

The call to globals.myCoordinatesCallbackMethod() in the onclick handler is setup to send 3 arguments into the callback: the first two are local, browser-side variables x and y, while the third is a hardcoded false value.

...

Code Block
var html = (<html>
 <head>
  <script>
  <![CDATA[
   var x = 10;
   var y = 10;
   function doCallback() {
    document.getElementById("myCoordinatesCallbackHandler").click()
   }
  ]]>
  </script>
 </head>
 <body>
  <button id="myCoordinatesCallbackHandler" onclick="javascript:globals.myCoordinatesCallbackMethod(browser:x, browser:y, false)" style="visibility: hidden">&nbsp;</button>
 </body>
</html>).toXMLString().replace(']]>', '').replace('<![CDATA[', '');

(warning)  When using the 'browser:' syntax to send back String values, the parameter needs to be double-quoted. Make sure to use single quotes to surround the overall event handler code:

...