Configuring Siebel Open UI > Customizing Styles, Applets, and Fields > Customizing Applets >
Customizing List Applets to Render as a Table
The example in this topic describes how to customize a list applet to display as a table. The JQM Grid Renderer is an object that uses the jqmgridrenderer.js file to render data in a table in the client. It does the following:
- Renders controls according to the control type that the Siebel Server sends to the client. For example, a table can include a combo box, pick list, check box, date and time control, text box, and so on.
- Allows the user to use a table to edit data.
- Comes predefined to do an implicit save that saves data if the user steps out of a row to another row in the table.
- Allows the user to click a column heading to sort data in the table in ascending or descending order.
- Includes a Delete button that allows the user to delete each row of the table.
- Highlights the currently chosen row in a different color.
- Includes 4 or 5 columns.
- Displays some fields as text, such as the URL, mail to address, or phone number.
To customize list applets to render as a table
- Identify the list applet that you must modify. For example:
- Log in to the client, and then navigate to the Products screen.
- Click Help, and then click About View.
- Make a note of the applet name.
For example, SIS Product List Applet.
- Configure the manifest:
- Log in to the Siebel client with administrative privileges.
For more information about the screens that you use in this step, see Configuring Manifests.
- Navigate to the Administration - Application screen, and then the Manifest Files view.
- In the Files list, add the following files.
|
|
Name |
siebel/jqmgridrenderer.js |
Name |
siebel/jqmtabletgridrenderer.js |
Name |
siebel/jqgridrenderer.js |
- Navigate to the Administration - Application screen, and then the Manifest Administration view.
- In the UI Objects list, specify the following applet.
|
|
Type |
Applet |
Usage Type |
Physical Renderer |
Name
|
My Applet |
- In the Object Expression list, add the following expression. The physical renderer uses this expression to render the applet on a phone.
- In the Files list, add the following file:
siebel/jqmgridrenderer.js
- In the Object Expression list, add the following expression. The physical renderer uses this expression to render the applet on a tablet.
|
|
Expression |
Tablet |
Level
|
2 |
- In the Files list, add the following file:
siebel/jqmtabletgridrenderer.js
- In the Object Expression list, add the following expression. The physical renderer uses this expression to render the applet on a desktop.
|
|
Expression |
Desktop |
Level
|
3 |
- In the Files list, add the following file:
siebel/jqgridrenderer.js
- Verify your work:
- Log in to the client, and then navigate to the Products screen.
- Make sure Siebel Open UI displays the SIS Product List Applet as a table.
For example, in a mobile application, make sure the result is similar to the following screen capture:
|