Markup Template Editor

The ePortal presentation for a Web Forms Application Project or a Web Forms Mobile Application Project consists of a generated .aspx page for each ePortal client message. When ePortal generates each .aspx file, ePortal uses an HTML template to generate each control on the .aspx page. For more information on Web Forms Application project and Web Forms Mobile Application project, refer to Creating Web Forms Application Projects and Creating Web Forms Mobile Application Projects.

Note that ePortal maintains an HTML template for each control style that you can configure for a field in a client message, server message, or T27 screen.  Refer to the following topics:

You use the Markup Template Editor to modify properties, which in turn update one particular HTML template.

To edit the HTML template for a particular control style, do the following:

  1. In Solution Explorer, right-click the ClearPath ePortal data source project, and click Presentation Generation Options….

  2. Select the Web Forms Application or Web Forms Mobile Application presentation project.

  3. Click Modify.

  4. Under the category ControlStyle to ASP.Net Control Generation, select the control style that you wish to edit. Note that some control styles (e.g., Hidden) may not have a template which you can edit.

  5. Click on the selection button on the right (displayed as an ellipsis).

  6. The Markup Template Editor opens.

The properties that you can edit appear in the upper pane. The exact properties vary depending on the particular control style that you are editing. Click on a property to see a brief description in the pane below.

To change the value of a property, select a new value from the drop down list or type a new value and press Enter.

The lower pane shows a read-only preview of the HTML template for the control based on your current property settings. The preview pane includes HTML code and variables. Variables are surrounded by the dollar sign character ($). During presentation generation, ePortal replaces each variable with a dynamic value found in the corresponding client message. See the table below for a description of the variables which can appear in the preview pane.

When you have made all of your changes, click the OK button. If you wish to discard your changes, click the Cancel button.

Variable

Description

$choices$

Represents the markup for the choices in a control which supports a choice list (for example, a drop down list).

$columns$

Represents the size of a text box in characters.  Replaced with the Columns property value from the client message.

$cssClass$

Represents an optional CSS Class name. This is replaced with T27 or UTS CSS class information, if applicable. Refer to the topic Presentation Generation Properties for a Web Browser Project for more information.

$displayLength$

Represents the maximum length that a user can enter in a text box in characters.  Replaced with the MaxLength property value from the client message.

$fields$

Represents the markup for the fields for a control which represents an array (for example, a GridView).

$label$

Represents the label text for a control.  Replaced with the Label property value from the client message.

$readOnly$

Represents if the control is read-only.  Replaced with the ReadOnly property value from the client message.

$rows$

Represents the number of rows in a text box.  Replaced with the Rows property value from the client message.

$text$

Represents the text value for a control.  Replaced with the InitialValue property value from the client message.

$textMode$

Represents the text mode (single-line or multi-line) for a text box.  Replaced with the TextMode property value from the client message.

$toolTip$

Represents the tool tip text for a control that is displayed when a user hovers the mouse pointer over the control.  Replaced with the Description property value from the client message.

This value may also be appended to validation error messages to help the user determine the expected input format.

$userName$

Represents the user-supplied name for a field. Replaced with the name of a field from the client message.

$visible$

Represents whether the control is visible to the end user or not.  Replaced with the Visible property value from the client message.

$checkedValue$

Represents the user-defined value when a check box control is checked. Replaced with the CheckedValue property value from the client message.

$uncheckedValue$

Represents the user-defined value when a check box control is not checked. Replaced with the UncheckedValue property value from the client message.

$validateAttrs$

Represents the HTML5 validation attributes. Replaced with settings from MinValue, MaxValue, StepValue, Required, and Pattern properties from the client message.

Refer to "Adding HTML5 Validation Attributes" later in this topic, for more information.

Selecting the ControlNamespace

Many of the HTML templates for a Web Forms Application Project have the property ControlNamespace. The templates for a Web Forms Mobile Application Project never have the property ControlNamespace, so the information below does not apply to mobile applications.

When the property ControlNamespace is available, you can select either asp or ePortal. If you select asp, the HTML template for the control uses the standard ASP control provided by Microsoft. If you select ePortal, the HTML template for the control uses the ePortal control provided by Unisys. The ePortal control optionally adds a built-in label to the control. The label text for an ePortal control comes from the Label property for the corresponding field in a client message. The ePortal control may provide additional functionality as well, such as input validation.

If you select asp for the ControlNamespace, the control is not labeled. This is appropriate for cases where the imported application already provides static text to label the fields, such as an MCP T27 application or an AB Suite/EAE application. However, for other application types, or for cases where you elect not to include the static text, you probably want to set ControlNamespace to ePortal, so the control is labeled. In addition, for a TextBox, if you want to take advantage of HTML5 input validation, available in some HTML5 browsers, you should also set ControlNamespace to ePortal.

Adding HTML5 Validation Attributes

Some browsers can use new HTML5 attributes to perform range validation for numeric input, check for required input, or verify that user input matches a particular pattern. Refer to the topic Validation Performed by HTML5-Compatible Browsers for more information.

To enable HTML5 validation, set the property IncludeValidationAttributes to True.

Note: This applies to the TextBox template only. In addition, for a Web Forms application project, ControlNamespace must be set to ePortal.