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

Customizing List Applets to Display a Box List

This topic describes how to customize a list applet to display a box list. You customize how Siebel Open UI renders an applet, the content it displays, and the style that it uses in the client.

To customize list applets to display a box list

1. Log in to the client.
2. Navigate to a view that displays a typical Siebel list applet.

   For example, navigate to the Accounts screen, and then the Accounts list.

   Notice that Siebel Open UI displays the typical predefined list.

3. Open Windows Explorer, and then navigate to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\siebel

   For example:

   C:\16.0\applicationcontainer\webapps\siebel\scripts\siebel

4. Rename the existing jqgridrenderer.js file that resides in the folder you accessed in Step 3 to jqgridrenderer_original.js.
5. Download the jqgridrenderer_tile.js file to the folder you accessed in Step 3.

   The jqgridrenderer_tile file prevents Siebel Open UI from initializing the jqgrid control and from rendering other fields in the grid. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.

6. Rename the jqgridrenderer_tile.js file to jqgridrenderer.js.
7. In the Siebel Open UI client, press the F5 key to refresh the screen.
   
8. In Windows Explorer, navigate to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\files\custom

9. Use an editor to open the my-style.css file.
10. Copy the following code into the theme_base.css file. This code configures Siebel Open UI to display account names in a series of vertical boxes:

    /*---------------------------------------------*/

    /* Styles for alternate List display demo */

    /*---------------------------------------------*/

    .siebui-boxlist {

    width: 100%;

    height: 100%;

    overflow: auto;

    }

    .siebui-boxlist-pager,.siebui-boxlist-items{

    display: table-row;

    white-space: nowrap;

    width: 100%;

    }

    .siebui-boxlist-item, siebui-boxlist-item-selected {

    padding: 100px 0px;

    height: 40px;

    border-radius: 5px;

    float: left;

    width: 120px;

    overflow: hidden;

    margin: 5px 12px;

    color: #222!important;

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);

    text-align: center;

    }

    .siebui-boxlist-item {

    background: rgb(250, 250, 250);

    background: -moz-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(225, 225, 225, 1) 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(250, 250, 250, 1)), color-stop(100%, rgba(225, 225, 225, 1)));

    background: -webkit-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(225, 225, 225, 1) 100%);

    border-bottom: 1px solid #AAA;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);

    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);

    }

    .siebui-boxlist-item-selected {

    background: rgb(250, 250, 250);

    background: -moz-linear-gradient(top, rgba(249, 238, 167, 0.5) 0%, rgba(251, 236, 136, 0.5) 100%)!important;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249, 238, 167, 0.5)), color-stop(100%, rgba(251, 236, 136, 0.5)))!important;

    background: -webkit-linear-gradient(top, rgba(249, 238, 167, 0.5) 0%, rgba(251, 236, 136, 0.5) 100%)!important;

    border-bottom: 1px solid #AAA;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);

    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);

    }

    /*---------------------------------------------*/

    /* Styles for alternate List display demo */

    /*---------------------------------------------*/

11. Navigate to the Siebel Open UI client, and then press the F5 key to refresh the screen.

    The client displays the modified layout.