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
- Log in to the client.
- 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.
- Open Windows Explorer, and then navigate to the following folder:
INSTALL_DIR\eappweb\PUBLIC\language_code\build_number\scripts\siebel
For example:
C:\23044\eappweb\PUBLIC\enu\23044\scripts\siebel
For more information about the language_code, see Languages That Siebel Open UI Supports.
- Rename the existing jqgridrenderer.js file that resides in the folder you accessed in Step 3 to jqgridrenderer_original.js.
- 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.
- Rename the jqgridrenderer_tile.js file to jqgridrenderer.js.
- In the Siebel Open UI client, press the F5 key to refresh the screen.
- In Windows Explorer, navigate to the following folder:
INSTALL_DIR\eappweb\PUBLIC\language_code\files\custom
- Use an editor to open the my-style.css file.
- 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 */ /*---------------------------------------------*/
- Navigate to the Siebel Open UI client, and then press the F5 key to refresh the screen.
The client displays the modified layout.
|