Configuring Siebel Business Applications > Configuring Siebel Web Templates and Siebel Tags > Customizing an HTML Control Type >

Examples of Customizing an HTML Type

This topic describes examples of customizing an HTML type. You might use this feature differently, depending on your business model.

Example of Customizing an HTML Type for a Control

To create a custom HTML type for the LabelRed control that displays the caption of the control in red, use the following code:

<swe:htmltype name="LabelRed">

<font color="red"> <swe:this property="DisplayName"/> </font>

</swe:htmltype>

Example of Customizing an HTML Type for an Applet Mode

You use the Mode attribute of the swe:htmltype tag to define a custom format for the Base, Edit, New, and Query applet modes. If you define a mode, then the Siebel Web Engine uses the format you define only if the current show mode matches the value defined for this attribute. For example, assume you create a new HTML type named SiebelText to display a control that Siebel CRM displays in the following ways:

• As a label and a text field in Edit mode
• As read-only text in Base mode

In this situation, you use the following code:

<swe:htmltype name="SiebelText">

<swe:this property="Data" type="Text"/>

</swe:htmltype>

<swe:htmltype name="SiebelText" mode="Edit">

<swe:this property="DisplayName"/>:&nbsp;<swe:this property="Data" type="Text"/>

</swe:htmltype>

For more information, see Options to Control How the User Creates, Edits, Queries, and Deletes CRM Data.

Example of Customizing an HTML Type when Siebel CRM Cannot Call a Method

To display a different image depending on the state of a control or list column, you can define an optional attribute of the swe:htmltype tag, such as State. You can use the following states:

• Disabled. For a control or list column that calls a method, when Siebel CRM cannot call the method on the record.
• Required. For a control or list column that is required.

For example, to display a gray button when Siebel CRM cannot call a method, add the following code in addition to the default definition described earlier in this topic:

<swe:htmltype name="MiniButton" state="Disabled">

<img src="images/graybtn_left.gif" border=0 height=15 width=2>

<swe:this property="Data" type="Link" />

<img src="images/graybtn_right.gif" border=0 height=15 width=2>

</swe:htmltype>

Note how Siebel CRM handles calls differently:

• If Siebel CRM cannot call a method with a predefined HTML type, then Siebel CRM does not display the control or list item.
• With a custom HTML type, Siebel CRM always uses the format defined in the SWF file to display the control or list item. The HTML that Siebel CRM generates for the following Data property when Siebel CRM cannot call a method is the caption of the control or list item without any href tags:

  swe:this property="Data" type="Link"

If Siebel CRM cannot call a method, then you can use a custom HTML type to hide a control or list column. For example, you can create the following empty swe:htmltype tag for the Disabled state:

<swe:htmltype name="MiniButton" state="Disabled"></swe:htmltype>

This code hides only the swe:control tag or the swe:this tag that calls the FormattedHtml property.

Example of Customizing an HTML Type to Indicate a Required Field

To display the SiebelText type with an asterisk (*) to indicate a required field, you can add the following code in addition to the definitions for this type described earlier in this topic:

<swe:htmltype name="SiebelText" mode="Edit" state="Required">

*&nbsp;

<swe:this property="DisplayName"/>

:&nbsp;

<swe:this property="Data" type="Text"/>

</swe:htmltype>

The Siebel Web Engine uses the following order of precedence when it looks up HTML Type definitions in the SWF file:

1. Mode
2. State

It is recommended that you always create a default format definition for all custom HTML types. To create a default format definition, you define it without specifying the mode attribute and state attribute.

Example of Using the Data Property of the SWE This Tag

The Data property of the swe:this is similar to a macro that casts the current, custom type to one of the intrinsic types, then inserts the FormattedHtml property of the intrinsic type. To use the Data property, you add a Type attribute to the swe:this tag. This Type attribute names the intrinsic type. For example, use the following code to create a new type named MiniButton. This code adds a special format to the Web Engine intrinsic type named Link:

<swe:htmltype name="MiniButton">

<img SRC="images/btn_left.gif" border=0 height=15 width=2>

<swe:this property="Data" type="Link" />

<img src="images/btn_right.gif" border=0 height=15 width=2>

</swe:htmltype>

The following code outputs the same HTML as if the template included a separate swe:this tag, where the property is FormattedHtml and the HTML type of the control is the predefined Link type:

swe:this property="Data" type="Link"

You can only define a predefined type and not a custom type for the type attribute of a Data element.