21Configuring Siebel Web Templates and Siebel Tags

Configuring Siebel Web Templates and Siebel Tags

This chapter describes how to configure Siebel web templates and Siebel tags. It includes the following topics:

Configuring Siebel Web Templates and Siebel Tags

    Editing the Layout of a Web Page

    The Web Page Object is the top (highest) level object in the Web hierarchy that Siebel CRM uses to create Web pages, such as the following:

    • Login pages

    • Error pages

    • Container pages

    Similar to an applet or view, a Web page is associated with a Web template. Siebel CRM maps web page objects to placeholders in the template. The Web Page Editor allows you to view and edit web page objects. For more information, see Editing the Layout of a View.

    To edit the layout of a web page

    1. Make sure the configuration context is set.

    2. In Siebel Tools, in the Object Explorer, click Web Page.

    3. In the Web Pages list, locate the web page you must modify, right-click, and then click Edit Web Layout.

    4. Choose a custom control from the combo box on the toolbar, and then move it to a placeholder.

    5. Use the Properties window to set properties for the control, such as Caption, Method Invoked, and so on.

      After you add controls to the web page, you can choose the Web Page Item object type in the Object Explorer, and then use the Web Page Items list to modify the mappings you just created. For example, you can modify the caption for the Queries menu label, which is the FavoritesLabel Web page item.

      Multiple Image Display in the Web Layout Editor

      The layout editor might display multiple images because the template that the Web page references contains a conditional tag, such as <div od-if="<>"> or <div od-case="<>">. The template content varies depending on if one of the conditions is met or is not met. The layout editor displays the page as if all the conditions are true. This is useful if you must edit any of the pages. Only one condition is typically true in the Siebel client, so Siebel CRM does not display redundant images in the Siebel client.

        Adding Graphics to a Web Template

        To improve the appearance or navigation of your Siebel application, you can create a GIF file and include a link to it from an HTML page.

        To add graphics to a web template

        1. Place your graphic files in the following directory:

          public\images
          

          The Siebel Application Interface installer creates the applicationcontainer\webapps\siebel\files directory when you install the Siebel Application Interface. The Siebel client includes three directories for a Siebel application. These directories contain all the files that Siebel CRM uses, including the graphics files.

        2. Create a link to the graphic file from an HTML page.

        3. Compile and test your modifications.

          For more information, see Using Siebel Tools.

          Displaying Multiple Views on a Page

          The Siebel Web Engine can simultaneously display multiple views on a page. These views include the following main view and one or more alternate views:

          • Main view. Chosen from the link bar. Only one main view exists.

          • Alternate views. Other views that Siebel CRM displays with the main view. For example, the Search View that displays applets that it uses for find and search operations.

          You can display multiple views in the following ways:

          • Place multiple views in separate HTML frames.

          • Share multiple views in the same frame.

          • Display multiple views in the main view in the main browser window and display a single alternate view in a pop-up window.

          It is recommended that you define alternate views as simple views that do not contain complex navigation links.

          The examples in this topic describe how to create multiple view layouts if you use HTML frames. The procedure is similar to the procedure you use if you do not use HTML frames. If you do not use HTML frames, then to position the views, you can use HTML tables instead of frames and framesets.

          To support multiple views, you must modify the structure of frames and framesets.

          You cannot configure Siebel Open UI to display more than one view on a single page, but you can configure it to display multiple applets in a view. For more information, see Creating a View and Configuring Siebel Open UI.

          To display multiple views on a page

          1. Replace the first line of the <div od-type="frameset> code of the Page Container web template with the following example code:

            <div od-type="frameset htmlAttr="rows='80,50,50,*' border='0' 
            frameborder='No'">
            
          2. Replace the view frame in the container page with a content frame.

            This frame defines the area where Siebel CRM loads one or more views. Initially this frame contains a frameset that includes a view type frame. You can replace this view frame with the following example content frame:

            <div od-type="frame type="Content" htmlAttr="marginheight='0' marginwidth='0' 
            noresize scrolling='Yes'">
              <div od-include="CCMainView"/>
            <!--od section frame close–>
            </div>
            

            For more information, see Example Code of the CCMainView web template.

          3. Modify all the application container templates to use the content frame.

          4. To display more views in the content area, load a different content container page in the content frame:

            1. Call the LoadContentContainer method from a control or page item.

            2. Make sure the User Property container loads the content container.

            For more information, see Using the LoadContentContainer Method to Load Multiple Views.

          Siebel CRM behaves the same before and after you make this modification. You only add one more layer of frames in the content area. The unmodified application container page template included in the view frame without the outer content frame does not create errors. You cannot use it to display multiple views.

            Using the LoadContentContainer Method to Load Multiple Views

            You must use the Web Template Name of the content container page. For example, to display the search view with the main view, do the following:

            • Create a content container page, such as CCSMainAndSearchView.

            • Use the LoadContentContainer method to load this page.

            To load the main view and search view into two frames, the CCSMainAndSearchView web template contains the following tags:

            <div od-type="frameset htmlAttr="cols='100%' border='0' frameborder='No'">
              <div od-type="frame type="View" htmlAttr="noresize scrolling='Yes'">
                <div od-type="current-view/>
              <!--od section frame close–>
              </div>
              <div od-type="frame type="AltView" name="Search" htmlAttr="noresize 
              scrolling='Yes'">
                <div od-type="view name="Search View" id="Search" />
              <!--od section frame close–>
              </div>
            <!--od section frameset close–>
            </div>
            

            In this example, you still reference the main view in the <div od-type="current-view> tag. You reference alternate views in the <div od-type="view> tag.

            To switch from displaying the search and main views to displaying only the main view, you can call the LoadContentContainer method again, but this time reference the container page that references the CCMainView web template.

            OD View Tag

            The <div od-type="view> tag uses the following format:

            <div od-type="view name="xxx" id="yyy">
            

            The <div od-type="view> tag includes the following attributes:

            • Name. Name of the alternate view.

            • Id. Identifies the location that this view occupies. You use this Id to replace this view with another view.

            The <div od-type="frame> tag contains an alternate view named AltView. You can define only one alternate view for each frameset. If you add more than one alternate view, then you might encounter an error.

              Example Code of the CCMainView web template

              The CCMainView web template that you reference in the od-type=frameset code of the CCPageContainer page includes the following frameset. This frameset contains the main view:

              <div od-type="frameset htmlAttr="cols='100%' border='0' frameborder='No'">
                <div od-type="frame type="View" htmlAttr=" noresize scrolling='Yes'">
                  <div od-type="current-view/>
                <!--od section frame close–>
                </div>
              <!--od section frameset close–>
              </div>
              

                Configuring How Siebel CRM Displays an Error That Occurs on the Siebel Server

                If an error occurs on the Siebel Server when Siebel CRM submits a form, then the Siebel Web Engine displays the same page again and includes an error message. The <div od-type="error> tag specifies the location of this error message. If an error occurs outside of a form submission, then the Siebel Web Engine continues to use the value that is defined in the Error Web Page property of the application object.

                You can use the <div od-type="error> tag to configure how Siebel CRM displays an error that occurs on the Siebel Server. Note the following behavior:

                • If Siebel CRM encounters no errors when it displays a form, then it skips the contents of the <div od-type="error> tag.

                • The only attribute of the <div od-type="error> tag is a property whose value must equal FormattedHtml. This configuration configures Siebel CRM to display the contents of the error message.

                • If you do not use a <div od-type="error> tag in a Siebel web template, then the code creates an error node, which is an instance of the CSSSWEErrorSWX code. Siebel CRM inserts this error node as the first child of the enclosing page or form node.

                • Siebel CRM displays an error message in plain text. It displays each error message in a separate paragraph.

                • The enclosing HTML tags determine the font and style of the error message. If the font uses the same color as the background, then the error message is not visible.

                To configure how Siebel CRM displays an error that occurs on the Siebel Server

                1. To display the error message in a form, place the following tags in the <div od-type="form> tag:

                  <div od-type="error>
                  
                    <div od-property="FormattedHtml"/>
                  
                  <!--od section error close–>
                  
                  </div>
                  
                2. Make sure you use this tag in all <div od-type="form> tags.

                  Format of the OD Error Tag

                  The basic format of the <div od-type="error> tag is as follows:

                  <div od-type="error>
                  

                  The format of the <div od-type="error> tag with the FormattedHtml property is as follows:

                  <div od-type="error property="FormattedHtml"/>

                  or

                  <div od-type="error>
                    <div od-property="FormattedHtml"/>
                  <!--od section error close–>
                  </div>
                  

                    Example of Using the Error Tag

                    The following code is an example of using the <div od-type="error> tag:

                    <div od-type="form>
                      <div od-type="error>
                        <b><font color="red"> <div od-property="FormattedHtml"/> </font></b>
                      <!--od section error close–>
                      </div>
                    ...
                    <!--od section form close–>
                    </div>
                    

                    For another example, see Example Code of a Nongrid Form Applet Template.

                      Usage of the SWEErrMsg Item

                      You must use the <div od-type="error> tag instead of the <div od-type="pageitem> tag that is mapped to the _SWEErrMsg item in the Error Web Page property of the Siebel application. Siebel CRM version 7.0 and higher does not support _SWEErrMsg.

                        Configuring Web Templates to Display Menus, Toolbars, and Thread Bars

                        This topic describes how to configure web templates to display menus, toolbars, and thread bars. For more information, see About Menus and Toolbars. It includes the following information:

                          Using Web Templates to Display Menus and Buttons

                          If the user clicks a menu that is defined as button or link in a Siebel Web template, then the Siebel Web Engine uses the <div od-type="menu> tag to activate a list of menu items. The <div od-type="menu> tag displays menus in the following ways:

                          • Application container page for an application menu

                          • Applet for a applet menu

                          Siebel CRM displays an applet menu as an icon button, typically placed before other buttons, such as Edit and Delete. In the Siebel client, it uses the configuration in the Siebel runtime repository to create a set of menu items for an applet. The tag must be defined in an applet web template for applet menus.

                            Example Code to Display an Application Menu

                            To display an application menu, you can define the <div od-type="menu> tag in any type of template other than an applet web template. Siebel CRM uses the Menu and Menu Item object definitions in the Siebel repository to display a set of menus from a single <div od-type="menu> tag. The Menu property in the Application object definition references the Menu object definition. This Menu object definition specifies a set of application menus and menu items in each application menu. Siebel CRM predefines some menu items, such as the Logout menu item.

                            The following example code from the CCFrameBanner web template includes the <div od-type="menu> tag at the start of the definition for a banner:

                            <!--Start Banner-->
                            <div od-type="menu/>
                            <table class="banner" cellpadding='0' cellspacing='0' border='0'>
                            <tr>
                              <td width="50%">
                                <img src="images/SiebelLogo.gif" width="282" height="57" border="0" alt="" />
                              </td>
                              <td width="50%">
                                <img src="images/spacer.gif" width="100%" height="58" border="0" alt="" />
                              </td>
                            </tr>
                            

                              How the Menu Tag Displays a Menu

                              The <div od-type="menu> tag displays menu buttons or links for all menus for the following:

                              • Applications. Displays one button or link for each application menu that is defined for the Siebel application in the menu object definition and children of the menu object definition.

                              • Applets. Displays the applet menu button.

                              The od-type=menu tag uses the following format:

                              <div od-type="menu type="XXX" bitmap="XXX" width="XXX" height="XXX" bgcolor="XXX" 
                              fgcolor="XXX" />
                              

                              The <div od-type="menu> tag includes the following attributes:

                              • type. Can be set to one of the following values:

                                • Default. Siebel CRM displays the menu and the application menu items. If no value is defined for the type attribute, then it uses the default value.

                                • Button. Siebel CRM displays a button that displays a menu that includes the menu items if the user clicks the button.

                              • bitmap. Used only if the Type attribute is Button. It defines the name of a bitmap object that Siebel CRM uses as the label for the button. This bitmap is defined in Siebel Tools in the HTML Control Icons bitmap category.

                              • width. Defines the width of the menu in pixels. For more information, see Localizing an Application Menu.

                              • height. Defines the height of the menu in pixels.

                              • bgcolor. Defines the background color of the menu. You must use the hexadecimal triplet format that HTML requires. For example, #FFFFFF.

                              • fgcolor. Defines the foreground color of the menu. You must use the hexadecimal triplet format that HTML requires.

                                Example Code to Display Applet Buttons

                                The following code from the CCFormButtons web template is an example of the template that Siebel CRM uses to display applet buttons, including the menu button:

                                <!-- Buttons (Edit, Delete, Optional, Optional, Optional) --->
                                <!-- Menu,179 -->
                                  <td valign="middle" nowrap>
                                    <div od-type="menu/>
                                  </td>
                                  <td valign="middle"><img src="images/bttns/div.gif" height="13" border="0" 
                                  align="middle" alt=""></td>
                                <!-- EditRecord -->
                                <div od-type="control id="132">
                                  <td valign="middle" nowrap>
                                    <div od-property="FormattedHtml" hintText="Edit" hintMapType="Control"/>
                                  </td>
                                  <td>&nbsp;</td>
                                <!--od section control close–>
                                </div>
                                (and so on...)
                                

                                  Using Web Templates to Configure Toolbars

                                  Siebel CRM displays a toolbar as a customizable JavaScript toolbar.

                                  A JavaScript toolbar object resides in the JSSApplication hidden frame, which typically does not reload during the life cycle of the Siebel application. Siebel CRM does not redraw when a page refresh occurs. The user interface part of the JavaScript toolbar resides in a visible HTML frame and redraws when the HTML frame reloads. It is recommended that the visible HTML frame is a persistent frame that reloads infrequently. HTML toolbars reside in the topmost frame in the application template that Siebel CRM reserves for this purpose.

                                    Tags That You Use with a Toolbar

                                    This topic describes the toolbar tags that you use with a web template.

                                    OD Tag That Specifies a Toolbar

                                    The <div od-type="toolbar> tag specifies a toolbar where the name corresponds to the Name property in the Toolbar object definition. Siebel CRM currently supports two types of toolbars: HTML toolbars and Java applet toolbars, as defined in the javaapplet attribute.

                                    The <div od-type="toolbar“> tag uses the following format:

                                    <div od-type="toolbar name="XXX" javaapplet="true/false" width="XXX" height="XXX"/>
                                    

                                    The <div od-type="toolbar> tag includes the following attributes:

                                    • Name. The name of the toolbar as defined in Siebel Tools.

                                    • Javaapplet. Must be set to true for a Java toolbar, and false for an HTML toolbar.

                                    • Width. Width of the toolbar in pixels.

                                    • Height. Height of the toolbar in pixels.

                                    SWE Tag That Gets Toolbar Items

                                    The <div od-type="toolbaritem> tag recursively gets all of the toolbar items for that toolbar from the Siebel repository. It exists between the toolbar start tag and end tag.

                                    The od-type=toolbaritem tag uses the following format:

                                    <div od-type="toolbaritem>
                                    

                                    The <div od-type="toolbaritem> tag does not include any attributes.

                                      Using Templates to Configure HTML and JavaScript Toolbars

                                      You can define an HTML or JavaScript toolbar.

                                      To use templates to configure HTML and JavaScript toolbars
                                      1. Add the following code to the Siebel web template:

                                        <div od-type="toolbar name=xxx>   // where xxx is the name of toolbar in the 
                                        repository.
                                          // any HTML stuff here...
                                            <div od-type="toolbaritem>
                                          // any HTML stuff here...
                                        <!--od section toolbar close–>
                                        </div>
                                        
                                      2. For combo box items, make sure you target the command to a service.

                                        Configuring a Java Toolbar

                                        You use a Java applet to configure the toolbar. This applet includes all the toolbar controls and the threads that interact with the Siebel Server. The Java applet calls the following methods:

                                        • ShellUIInit method on the command target service when the applet attempts to initialize

                                        • ShellUIExit method when the applet exits

                                        A set of communication protocols is defined for the communication between the Java Applet and the service.

                                        To configure a Java toolbar
                                        • Add the following code to the Siebel web template:

                                          <div od-type="toolbar" od-name="xxx" javaapplet="true"/>
                                          

                                          Using Web Templates to Configure the Thread Bar

                                          The thread bar includes thread buttons that Siebel CRM displays in the following format:

                                          title: value
                                          

                                          You can omit the title or value. Separators separate thread buttons. For example, the greater than symbol (>) is a separator.

                                          If a thread applet or thread field is not defined for a view, then Siebel CRM does not update the thread button when it displays the view.

                                          The following table describes how Siebel CRM responds to actions the user performs in the thread bar. For more information, see Configuring the Thread Bar.

                                          Table How Siebel CRM Responds to User Actions in the Thread Bar

                                          User Action Siebel CRM Reply

                                          User requests a new screen.

                                          Siebel CRM creates a new thread to replace the current thread.

                                          User clicks a view button.

                                          Siebel CRM replaces the last thread with the new view that the user requested.

                                          User clicks a drilldown link.

                                          Siebel CRM appends a new step on the thread bar for the view that the user requested.

                                          User clicks a thread button.

                                          Siebel CRM deletes all the thread buttons after the thread button that the user clicked and proceeds to the step view that SWEBMCount indicates.

                                            How Siebel CRM Uses Bookmarks with the Thread Bar

                                            A thread button can display a link that navigates the user to a previous page. The link requires the GotoBookmarkView Siebel Web Engine command. The link for each thread button must contain at least the following parameters:

                                            SWECmd=GotoBookmarkView&SWEBMCount=2SWECount=3
                                            

                                            where:

                                            • SWEBMCount=2 indicates that Siebel CRM uses bookmark number 2 to create the view.

                                            • SWECount=3 is the bookmark ID for the current view.

                                            For example, Siebel CRM uses the od tags and thread link format to translate the thread button for the A.K. Parker account into the following HTML format:

                                            <a href="www.siebel.com/start.swe?SWECmd=GotoBookmarkView&SWEBMCount=2& 
                                            SWECount=3>Account: AK Parker</a>
                                            

                                            If the user clicks the thread button to display a bookmarked view that the user previously accessed, then Siebel CRM creates a new bookmark that identifies the view that it currently displays. The bookmark ID for the new view is the current od count increased by 1. The od count is the count that Siebel CRM sends to the Siebel Server in the request.

                                            Bookmark deletion policy is not modified with the bookmark ID assignment policy. Siebel CRM keeps the most recently created 20 bookmarks and deletes all other bookmarks, by default. If the od count in the user request is less than the od count on the Siebel Server, then Siebel CRM deletes all the bookmarks that contain a od count that is larger than the od count in the user request.

                                              Configuring the Thread Bar

                                              You can use the following od tags to configure an HTML thread bar:

                                              • <div od-type="threadbar>. Defines the start and finish of the thread bar section.

                                              • <div od-type="threadlink>. Defines the definition of a thread button on the thread bar. This tag includes the following properties:

                                                • FormattedHtml. Display the HTML link.

                                                • Title. Display the title and value pair of the thread button.

                                              • <div od-type="threadseparator">. Specifies the symbol that Siebel CRM displays to separate thread buttons.

                                              Use the <div od-type="threadlink> and <div od-type="threadseparator"> tags only in the <div od-type="threadbar> tag.

                                              The usage of these od tags is similar to that of the screen bar and view bar tags.

                                              To configure the thread bar
                                              • Insert thread bar definitions into a Siebel web template. Use the <div od-type="threadbar>, <div od-type="threadlink>, and <div od-type="threadseparator"> tags. For usage with frames, do the following:

                                                • Application does not use frames. Insert the definition in a container page. For example, CCPageContainer_NoFrames.

                                                • Application uses frames. Insert the definition in the Siebel web template for the Viewbar frame or the View frame.

                                                Example Code to Configure the Thread Bar

                                                The code in this topic creates a thread bar that uses the following format:

                                                Home > Consumer:PCs > PCs:Laptops 
                                                

                                                The following code provides an example of how to insert thread bar definitions into a Siebel web template:

                                                <!-- Begin Threadbar section -->
                                                <table class="Theadbar" width=100% border="0" cellspacing="0" cellpadding="0">
                                                <tr valign="left">
                                                  <td nowrap bgcolor="#6666CC" width=110>
                                                    <img src="images/spacer.gif" width="110" height="25" border="0">
                                                  </td>
                                                  <td width=99%>
                                                    <div od-type="threadbar>
                                                      <img src="images/spacer.gif" width="10" height="25" border="0" 
                                                      align="absmiddle">
                                                      <div od-type="threadlink property="FormattedHtml">
                                                      <font color="#000000"> <span >&nbsp;<nobr><div od-property="Title"/></
                                                      nobr> </span> </font>
                                                      <!--od section threadlink close–> 
                                                      </div>
                                                      <div od-type="threadseparator">&gt;<!--od section threadseparator close–> </div>
                                                    <!--od section threadbar close–>
                                                    </div>
                                                    <img src="images/spacer.gif" width="10" height="25" border="0" 
                                                    align="absmiddle">
                                                  </td>
                                                </tr>
                                                </table>
                                                <!-- End Threadbar section -->
                                                

                                                  Configuring an HTML Control Type

                                                  This topic describes how to configure an HTML control type. includes the following information:

                                                  Siebel CRM supports different control types. For example, Check Box, Button, Mail To, Text Area, and so on. You can add a definition to the SWF (Siebel Web Format) file to define your own HTML type.

                                                    Comparison of Using Cascading Style Sheets and Siebel Web Templates to Configure an HTML Control Type

                                                    You can use a cascading style sheet to define stylistic information about labels, titles, background colors, and so on.

                                                    You use the cchtmltype.swf file to define more complex attributes that determine the appearance or client functionality of a type of HTML element. For example, a button type that is associated with a GIF image, or a type of link that connects the user with an FTP site.

                                                    To add qualities to a page element, you can define tags and attributes in the Siebel Web template. You can define types in the cchtmltype.swf file that you can reference in Siebel Tools for a control on an applet web template or web page object. This configuration preserves the generality of the Siebel web template by avoiding the need to place HTML directly in the template. It reduces customization in the templates and stores more configuration information in the Siebel repository. This configuration reduces maintenance of Siebel CRM.

                                                      Creating a New HTML Type

                                                      You can create a new HTML type.

                                                      To create a new HTML type

                                                      1. Add the name of the new type to the List of Values used for the HTML Type property in Siebel Tools (REPOSITORY_HTML_CTRL_TYPE).

                                                        MiniButton is an example of a name.

                                                      2. Modify one of the SWF files that Siebel CRM uses:

                                                        1. Add the format information for the new type.

                                                          Siebel CRM uses two SWF files. The file you modify must use the SWF extension. It must reside in the same directory as the template files. One file contains the special types that Siebel CRM defines. The other file contains custom definitions that you define to add more types or to override Siebel types.

                                                          Use the swe:htmltype and <div od-property="<>"> tags to define how to display the custom type using the following format:

                                                          <swe:htmltype name="XXX" mode="AAA" state="BBB">
                                                            ..... HTML .....
                                                            <div od-property="<YYY"/.>
                                                            .... More HTML ....
                                                          </swe:htmltype>
                                                          
                                                        2. Set the UserSWFName parameter to the name of the SWF file that the Application Object Manager must use.

                                                          For more information about the Application Object Manager, see Siebel System Administration Guide.

                                                      3. In Siebel Tools, modify the HTML Type property of the control, list column, or page item to the new type.

                                                      4. In the template file, use the FormattedHTML property for the <div od-type="control> tag or the <div od-type="pageItem> tag.

                                                        How the Siebel Web Engine Uses a Custom HTML Type

                                                        If the HTML type of a control, list column, or page item is a custom type, then the Siebel Web Engine uses the SWF format when it displays any element that is mapped to the control, and that defines the FormattedHtml property. The Siebel Web Engine does not use the format with any other property, such as Display Name. In the SWF file, the <div od-property="<>"> tag can reference these properties, except the FormattedHtml property.

                                                        Note the following examples:

                                                        • <div od-type="control id="1" od-property="FormattedHtml"/>

                                                        • <div od-type="control id="1" ... od-property="FormattedHtml"/> ... <!--od section control close–> </div.

                                                        • <div od-type="pageitem id="1" od-property="FormattedHtml"/>

                                                        • <div od-type="pageitem id="1" ... od-property="FormattedHtml"/> ... <!--od section pageitem close–> </div>

                                                          Format Requirements of an SWF File

                                                          You must make sure each format specification in an SWF file includes the following parts:

                                                          • An enclosing XML element that names the type and optionally names the mode and state that Siebel CRM uses for the current format

                                                          • The enclosed format content

                                                          You must make sure the content format meets the following requirements:

                                                          • It must be a valid, regular Siebel Web Engine format.

                                                          • It can reference all the properties of the current control, except FormattedHtml. To prevent recursion, it cannot reference FormattedHtml.

                                                          • It can use the Data property in the <div od-property="<>"> tag.

                                                            Configuring an HTML Type

                                                            This topic describes examples of configuring an HTML type.

                                                              Configuring an HTML Type for a Control

                                                              The following example code creates a custom HTML type for the LabelRed control that displays the caption of the control in red:

                                                              <swe:htmltype name="LabelRed">
                                                                <font color="red"> <div od-property="DisplayName"/> </font>
                                                              </swe:htmltype>
                                                              

                                                                Configuring 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 example, you use the following code:

                                                                <swe:htmltype name="SiebelText">
                                                                  <div od-property="Data" type="Text"/>
                                                                </swe:htmltype>
                                                                <swe:htmltype name="SiebelText" mode="Edit">
                                                                  <div od-property="DisplayName"/>:&nbsp;<div od-property="Data" type="Text"/>
                                                                </swe:htmltype>
                                                                

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

                                                                  Configuring 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>
                                                                  
                                                                    <div od-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 it cannot call a method with a predefined HTML type, then it does not display the control or list item.

                                                                  • With a custom HTML type, it always uses the format defined in the SWF file to display the control or list item. The HTML that it creates for the following Data property when it cannot call a method is the caption of the control or list item without any href tags:

                                                                  <div od-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 <div od-type="control> tag or the <div od-property="<>"> tag that calls the FormattedHtml property.

                                                                    Configuring 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 example code in addition to the definitions for this type described earlier in this topic:

                                                                    <swe:htmltype name="SiebelText" mode="Edit" state="Required">
                                                                      *&nbsp;
                                                                      <div od-property="DisplayName"/>
                                                                      :&nbsp;
                                                                      <div od-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.

                                                                      Using the Data Property of the OD This Tag

                                                                      The Data property of the <div od-property="<>"> 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 <div od-property="<>"> 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>
                                                                        <div od-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 <div od-property="<>"> tag, where the property is FormattedHtml and the HTML type of the control is the predefined Link type:

                                                                      <div od-property="<Data>" type="Link">
                                                                      

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