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

1. Identify the list applet that you must modify. For example:
   1. Log in to the client, and then navigate to the Products screen.
   2. Click Help, and then click About View.
   3. Make a note of the applet name.

      For example, SIS Product List Applet.

2. Configure the manifest:
   1. Log in to the Siebel client with administrative privileges.

      For more information about the screens that you use in this step, see Configuring Manifests.

   2. Navigate to the Administration - Application screen, and then the Manifest Files view.
   3. In the Files list, add the following files.

      Field	Value
      Name	siebel/jqmgridrenderer.js
      Name	siebel/jqmtabletgridrenderer.js
      Name	siebel/jqgridrenderer.js
   4. Navigate to the Administration - Application screen, and then the Manifest Administration view.
   5. In the UI Objects list, specify the following applet.

      Field	Value
      Type	Applet
      Usage Type	Physical Renderer
      Name	My Applet

   6. In the Object Expression list, add the following expression. The physical renderer uses this expression to render the applet on a phone.

      Field	Value
      Expression	Phone
      Level	1

   7. In the Files list, add the following file:

   siebel/jqmgridrenderer.js

   8. In the Object Expression list, add the following expression. The physical renderer uses this expression to render the applet on a tablet.

      Field	Value
      Expression	Tablet
      Level	2

   9. In the Files list, add the following file:

   siebel/jqmtabletgridrenderer.js

   10. In the Object Expression list, add the following expression. The physical renderer uses this expression to render the applet on a desktop.

       Field	Value
       Expression	Desktop
       Level	3

   11. In the Files list, add the following file:

   siebel/jqgridrenderer.js

3. Verify your work:
   1. Log in to the client, and then navigate to the Products screen.
   2. 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: