Online documentation - WebsydianExpress v3.5

HTML Templates and Replacement Markers

HTML Page Generation
Page Modeler
Modify HTML Template
- Events
- Grid
Special Replacement Markers
- Dump
- Form events
- Link events
- Include
- Menu service
- End of file

HTML Page Generation

When a web application responds to an event activated by a user, it does so by sending an HTML page to the user browser. In WebsydianExpress HTML pages are generated using an HTML template.

An HTML template is just like a standard HTML page, containing HTML markup codes, except that the template also will contain some special markers called replacement markers. A replacement marker specify where in the HTML template WebsydianExpress should insert data set by the web application. Thus the final HTML page sent to the browser will be the HTML template where the replacement markers are replaced with data set by the web application.

A replacement marker has the form /(name) where name is the name of the value set by the web application. Thus before the web application starts to generate the HTML page (by calling WritePage), then it must set the value of all the replacement markers found in the HTML template (using SetOutput and SetGridOutput).

Please note that all replacement markers are case sensitive.

If WebsydianExpress encounters a replacement marker which the web application has not set any value for, then WebsydianExpress will replace the replacement marker with the blank (empty) string.

Page Modeler

The HTML template is created with the Page Modeler. Information on how to use the Page Modeler can be found in the Page Modeler Reference.

In the Page Modeler a page is created for each HTML template needed by the web application. For each page it is possible to define the following page elements:

Output fields for displaying data.
Events and input fields.
A grid. A grid is used to define a table of records. To the grid it is then possible to add output fields (columns) and events.

Once the page is defined in the Page Modeler, then an HTML template can be created and used by the web application.

Modify HTML Template

The HTML templates created by the Page Modeler can be used by the web application as is. However, in most cases it is desirable to change a few things like the order of the output fields, add textual description, etc.

When changing an HTML template it is important that some special replacement markers are left untouched. This section describes these replacement markers.

Events

The HTML markup for an event looks like this:

<form action="/(WSACTION)" name="WICATORDU" method="POST" autocomplete="OFF">
<script>document.write('/(FORMEVENT-WICATORDC)')</script>
<p>Order<input type="TEXT" name="ORDER" value="/(ORDER)" size="3" maxlength="3"></p>
...
<p><input class="button" type="SUBMIT" name="Update" value="Update"></p> 
</form>

It is important that the second line (<script>document..) is left untouched as the replacement marker FORMEVENT-WICATORDC is used internally to construct the HTML hidden fields that contains the session ID, event ID, signature and secure parameters.

The reason for inserting the replacement marker in a script is that it then won't show up when editing the HTML template with FrontPage or another WYSIWYG web page editor.

The value of the action attribute must not be changed as this at runtime will be replaced with the URL used to access the web application.

Grid

When a grid is inserted on a page the HTML markup in the template looks like this:

<table class="grid">
<tr>
<th>Column Label</th>
...
</tr>
<!--/(ROWS-999)-->
<!--/(Grid)-->
<tr>
<td>/(COLVALUE)</td>
...
</tr>
<!--/(Grid)-->
</table>

The grid markers () marks the beginning and end of the HTML markup that defines one row of data. WebsydianExpress will then copy this part of the HTML template for as many times as there are rows in the grid to display.

It is important that the grid markers are not removed or modified in any way. If they are removed the grid will not be displayed properly at runtime.

The ROWS marker () determine the maximum number of rows to display.

The ROWS marker can only limit the number of rows defined by the program. E.g. if the program creates 20 rows in a grid, then the ROWS marker can only force the program to display less than 20 rows - not more.

Special Replacement Markers

The following replacement markers can be used in the HTML template.

Please note that all replacement markers are case sensitive.

Dump

Replacement marker: /(DUMP)

Inserting this replacement marker in the template will result in that all the values set by the web application will be outputted to the HTML page.

This replacement marker is useful during development and for debugging purposes.

Form events

Replacement marker: /(FORMEVENT-name)

Internal replacement marker used to generate the hidden fields for an HTML form. Please read the section Events above for more information.

The name part of the replacement marker is the event ID of the HTML form.

Link events

Replacement marker: /(LINKEVENT-name)

In some situations it is preferable to generate an event as an HTML link instead of an HTML form. In that case the form event replacement marker described above cannot be used.

Instead the link event replacement marker can be used. The HTML markup should then look like this:

<a href="/(WSACTION)?/(LINKEVENT-name)">Link</a>