Customizing the XHTML Generated for USPs

The webgen command generates the XHTML document that is displayed in the browser in response to request for a static server page. You can influence the XHTML that it generates by manually editing the server page layout.

For example, you can:

  • Edit the server page layout, formatting the appearance, fonts, colors, and so on.
  • Generate an id attribute for the elements representing fields so that the can be bound to labels or addressed in JavaScript
  • Generate associated labels (with a for attribute that reference the id of the associated field), so that the user can click the label to select the field
  • Insert JavaScript functions, CSS, and other HTML into the generated web page. For more information, see Substituting ProcScript Functions and Including Files in Static Server Pages and Creating a Web Output Filter Plug-in.

Generating id Attributes for Fields

Uniface uses the name attribute to uniquely identify fields in static server pages, but this only works on the server side. In the browser, the value of the name attribute might not be unique. For example, a field that is represented as a radio group results in several XHTML elements, each of which has the same value for the name attribute.

In XHTML, it is therefore common for elements to have an id attribute that uniquely identifies them in the browser. This makes it possible format a specific field using JavaScript, or link labels with fields via the label's for attribute.

By default, webgen does not generate an id attribute, but it can be configured to do so in two ways:

  • For individual field definitions, edit the server page layout and add x-id="1" to the <x-subst type="FieldType"> specification. For example: 
    <x-subst type="checkbox" x-id="1" name="CHECKBOX1.ENTITY1.MODEL1">
  • For all field definitions, edit the application assignment file to specify $WEBGEN_X_ID_DEFAULT=True to automatically generate id attributes for all fields.

In both cases, webgen generates an id with the same value as the name attribute. For RadioButton widgets, it generates separate elements for each ValRep value, so the id includes the sequence number for each item in the ValRep.

If you want the id to include the USP instance name as suffix to the ID, set the assignment setting $WEBGEN_X_ID_INSNAME=true.

For more information, see x-id.

Generating Label Elements

By default, webgen replaces <x-subst type="label"> definitions with plain text. For example, the following definition is for the label of a checkbox field whose label is Show colors: 

<x-subst type="label" name="CHECKBOX.ENT.MODEL"><label>Label</label>&nbsp;</x-subst>
<x-subst type="checkbox" name="CHECKBOX.ENT.MODEL">
   <input name="CHECKBOX.ENT.NM" type="checkbox" />
</x-subst>

It is replaced by:

Show colors <input name="CHECKBOX.ENT.NM" type="checkbox"/>

However, this means that the label is not attached to the field, and the user cannot select a field or radio button by selecting the label.

You can configure webgen to generate associated labels in the XHTML in two ways:

  • For individual label definitions, edit the server page layout and add x-for="1" to the <x-subst type="label"> specification, and x-id="1" to its attached field definition. For example: 
    <x-subst type="label" name="CHECKBOX.ENT.MODEL" x-for="1"><label>Label</label>&nbsp;</x-subst>
<x-subst type="checkbox" name="CHECKBOX.ENT.MODEL" x-id="1">
  • Alternatively, to automatically generate label elements for labels, edit the application assignment file to specify $WEBGEN_X_FOR_DEFAULT=True.

In both cases, webgen generates a <label> element with a for attribute that has the same value as the id attribute of its attached field. For RadioButton widgets, it generates labels for each ValRep item.

For more information, see x-for.

Generating Attributes for a Radio Group

For example, the application assignment file contains the following settings: 

[SETTINGS]
$WEBGEN_X_ID_DEFAULT = True
$WEBGEN_X_ID_INSNAME = True
$WEBGEN_X_FOR_DEFAULT = True

The layout of a static server page contains the following definition for a radio group field:

<x-subst type="label" name="COLOR.ENT.MODELA"><label>Label</label><br /></x-subst>
<x-subst type="radio" name="COLOR.ENT.MODELA">
  <input name="COLOR.ENT.MODELA" type="radio" />Radio Button
</x-subst>

Assuming that the ValRep for the field has the values B=Blue and R=Red, the resulting XHTML would be:

<input type="radio" 
       id="E1.COLOR.ENT.MODELA.1" 
       name="COLOR.ENT.MODELA.1" 
       value="B" />
<label for="E1.COLOR.ENT.MODELA.1">Blue</label><br/>

<input type="radio" 
       id="E2.COLOR.ENT.MODELA.1" 
       name="COLOR.ENT.MODELA.1" 
       value="R" />
<label for="E2.COLOR.ENT.MODELA.1">Red</label>

Related Topics