Bookshelf v7.5.2: Understanding Customizable Product Web Templates

Product Administration Guide > Customizable Product Web Templates >

Understanding Customizable Product Web Templates

Customizable Product Web templates are files that control all aspects of how selection pages display. You customize the look and feel of selection pages by modifying these templates.

Customizable Product Web templates are stored in the installation subdirectory \webtempl. The templates that control display of selection pages begin with eCfg. There four types of Web templates used by eConfigurator.

Base Theme. The base theme defines an HTML table-based page layout. This layout is used for all selection pages and provides the basic look and feel. The base theme calls the required product theme, which displays in one or more table cells created by the base theme.

Product Theme. The product theme template defines how selection items and options are displayed. The one-page theme displays all the configurable items on one selection page. The tab themes display items on a series of tabbed pages. The wizard theme leads the user from one selection page to the next. Product themes also create table layouts that define how items display within the cells of the base theme. Product themes contain for-each loops that iterate through the customizable product and identify relationships, items, attributes, and so on. Product themes call group themes and control themes.

Group Theme. If you use a tab or wizard theme, you determine what items appear on a page by defining groups. All the items in one group display on one page. A group theme template specifies how a group displays on a page.

UI control template. UI control templates define what type of UI control is used for selecting items. You can choose from several types of check box, radio button, and text box controls. The control template iterates through each group, identifies all the items, and then creates a form that displays the items for selection. The forms display in the table cells created by the product theme.

You select a base theme and product theme template in the Versions tab. You select group themes and UI control templates in the Product UI Designer.

Web templates are not themselves HTML files, but they do contain a combination of HTML table commands, JavaScript, and Siebel Web Engine (swe) commands. The swe commands are in XML format. These commands are used in Web templates as follows:

HTML table commands. These commands are used to define page layout. Control templates create tables and then create forms that display in these tables. Control template tables display in the cells created by product theme templates. Product theme templates displays in cells created by the base theme template.

JavaScript. JavaScript commands are used to create arrays for storing data about the customizable product obtained from the UI service. They are also used in control templates to create forms.

swe:include. This command specifies the name of a template to include. This command links the Web templates together. During iterative processing this command causes the Web Engine to dynamically retrieve, insert, and parse the included Web template.

swe:for-each. This command provides iterative processing. It traverses the customizable product beginning at the product root and identifies specified parts for display. The CfgLoop Type specifies the type of items to be identified, such as group, relationship, or attribute.

swe:control. This XML element defines what control type to display with an item. To define a UI property, you substitute a variable name for the value of the CfgFieldName attribute in this element. Inserting UI property variables in Web templates is how you customize the way an item displays.

Web templates are used by the Frame Code Engine to create HTML selection pages, as shown in Figure 15.

Figure 15. Web Template Processing

When a customizable product is called for display, an instance is created and stored in memory. The Frame Code Engine requests information about the product from the UI service and uses it to provide the values required in the Web templates. The Frame Code Engine then builds selection pages and forwards them to the Web Engine Frame Manager. The pages are then provided to the Web Server.