Configuring Siebel Open UI > Customizing Styles, Applets, Fields, and Controls > Customizing Applets >

Expanding and Collapsing Applets

This topic describes how to configure Siebel Open UI to display an applet as expanded or collapsed, by default.

To expand and collapse applets

1. Modify the applet:
   1. Open Siebel Tools.

      For more information about using Siebel Tools, see Using Siebel Tools.

   2. In the Object Explorer, click Applet.
   3. In the Applets list, query the Name property for the applet that you must modify.

      For example, query for SIS Account Entry Applet.

   4. In the Object Explorer, expand the Applet tree, and then click Applet User Property.
   5. In the Applet User Properties list, create two new applet user properties. Use values from the following table.

      Name	Value
      ClientPMUserProp	Default Applet Display Mode
      Default Applet Display Mode	Use one of the following values: Expanded. Siebel Open UI displays the applet in an expanded state, by default. Collapsed. Siebel Open UI displays the applet in a collapsed state, by default.

   6. Compile your work.
2. Modify the Web template:
   1. Identify the Web template that you must modify, and then open it for editing.
   2. Add the following code:

   <div od-type="form">
   <div od-if="Web Engine State Properties, IsPrintOff">
   <div class="od-context-SelectStyle">
   </div>
   <div class="siebui-collapsible-applet">
   <table datatable="0" summary="" width="100%" cellpadding="0"cellspacing="0" border="0" align="center"
   <div class="siebui-collapsible-applet-header">
   <div od-include="CCTitle_Named"/>
   <div od-include="CCFormButtonsTop"/>
   <div od-type="error" type="Popup">
   <table datatable="0" summary="" class="od-context-Applet" width="100%" cellpadding="0"
   </div>
   <div class="siebui-collapsible-applet-content">
   <div od-type="form-applet-layout">
   </div>
   <div>
   <div>
   <table>
   <div>

   where:

   • siebui-collapsible-applet. Identifies the applet body.
   • siebui-collapsible-applet-header. Identifies the section where Siebel Open UI adds the expand button or the collapse button.
   • siebui-collapsible-applet-content. Identifies the section that Siebel Open UI expands or collapses.
3. Test your work:
   1. Log in to the client.
   2. Navigate to the applet that you modified in Step 1.
   3. Verify that Siebel Open UI displays the applet as expanded or collapsed according to the value that you set for the Default Applet Display Mode applet user property in Step 1.
   4. Verify that Siebel Open UI displays the expand and collapse button correctly.

      If Siebel Open UI expands the applet, then it must display the following collapse icon in the the applet:

      

If Siebel Open UI collapses the applet, then it must display the following expand icon in the applet: