Configuring Siebel Open UI > Customizing Siebel Open UI for Siebel Mobile > Customizing Layout, Views, Menus, Lists, and Controls >

Adding the Show More Button to Your Custom Form Applets

This topic describes how to configure Siebel Open UI to add the Show More Button to your custom form applets. This button allows the user to view controls that the applet contains, but that Siebel Open UI does not come predefined to display in the visible area of the screen.

To add the Show More Button to your custom form applets

1. Modify the Web template file:
   1. Open Siebel Tools.

      For more information, see Using Siebel Tools.

   2. Choose the View menu, Windows, and then click Web Templates Window.
   3. Scroll down in the Web Templates window, and then click the following file:

   CCViewDetail_Mobile_RelatedItems

   You modify a .swt file to add the Show More button. For this example, you modify the CCViewDetail_Mobile_RelatedItems.swt file that controls the contact form. For an example that includes details about how to identify and modify a web template, see Configuring Views to Use Landscape or Portrait Layout.

   Note that Siebel Open UI comes predefined to enable the Show More button for these .swt files. It uses these .swt files for all mobile form applets.

   4. Right-click the window that displays the HTML code, and then choose Edit Template.
   5. Locate the div element that Siebel Open UI uses to display the Show More button for the form applet container.

      In this example, you modify the div element that contains the following code:

   swe:applet hintMapType="Applet"

   6. Add the following code to the div element that you located in Step e:

   <div id="_FormParentRelatedItems" class="SiebelDetailParentContainerRelatedItems siebui-NoScrollFormContainer">
     <swe:applet hintMapType="Applet" id="1" hintText="Parent Form Applet" property="FormattedHtml" var="ParentWithPointer"/>
   </div>

   The siebui-NoScrollFormContainer class that resides in the .swt file controls the Show More feature. This class determines whether or not to display the Show More icon every time the user changes the orientation or resizes the window on the mobile device.

2. Test your modifications:
   1. Use a mobile device to log in to the client, and then navigate to the Contact form.
   2. Verify that Siebel Open UI displays the Show More icon.

      For example, Siebel Open UI displays the Show More icon to the right of the Comments field in the following image, as indicated by the red box.
   3. Click the Show More icon.
   4. Verify that Siebel Open UI expands the applet container, displays more fields, and displays the Show Less icon.

      Note that if all controls that the form applet contains fit into the visible area of the screen, then Siebel Open UI does not display the Show More icon.

   5. Click the Show Less icon.
   6. Verify that Siebel Open UI contracts the applet container, displays fewer fields, and displays the Show More icon.