Configuring Siebel Open UI > Customizing Siebel Open UI for Siebel Mobile > Customizing Layout, Views, Menus, Lists, and Controls >

Customizing the Number of Columns in Mobile Tables

Siebel Open UI comes predefined to display a maximum of four list columns in a phone and eight list columns in a tablet. You can use applet user properties or JavaScript to modify the number of columns that Siebel Open UI displays.

Siebel Open UI uses the JQMListRenderer physical renderer to render an applet in a telephone. The JQMGridRenderer is a list physical renderer that renders controls in a table, such as a combo box, pick list, check box, date and time control, or text control. It is read-only, by default. However, the user can click an editable cell in a table to update the value in this cell. You can configure the manifest so that Siebel Open UI uses the JQMGridRenderer instead of JQMListRenderer. For more information, see Configuring Manifests.

Figure 33 includes an example of the Contacts list that the JQMTabletGridRenderer renders in a tablet. The JQMTabletGridRenderer is a physical renderer that Siebel Open UI uses to render an applet in a tablet.

Figure 33. Example of a List That the JQMTabletGridRenderer Renders in a Tablet

Using Applet User Properties to Modify the Number of Columns in Tables

This topic describes how to use applet user properties to modify the number of columns that Siebel Open UI displays in a table that it renders in a list applet.

To use applet user properties to modify the number of columns in tables

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

      For more information, see Using Siebel Tools.

   2. In the Object Explorer, click Applet.
   3. In the Applets list, query the Name property for the applet that contains the table that you must modify.
   4. In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
   5. In the Applet User Properties list, add the following applet user properties.

      Name	Value
      Max List Columns Phone	Enter a numeric value. For example, enter the following value to configure Siebel Open UI to display three columns for this list applet: 3 This applet user property controls the number of columns that Siebel Open UI displays in a list applet that it renders in a phone.
      Max List Columns Tablet	Enter a numeric value. For example, enter the following value to configure Siebel Open UI to display six columns for this list applet: 6 This applet user property controls the number of columns that Siebel Open UI displays in a list applet that it renders in a tablet.
      ClientPMUserProp	Specify the list of user properties that Siebel Open UI sends to the presentation model that it uses for the applet. For this example, you specify the other applet user properties that you added in this step: Max List Columns Phone, Max List Columns Tablet

   6. Compile your modifications.
2. Configure the manifest:
   1. Log in to the Siebel application.
   2. Navigate to the Administration - Application screen.

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

   3. Click Manifest Administration.
   4. In the UI Objects list, add the following UI applet.

      Field	Value
      Type	Applet
      Usage Type	Physical Renderer
      Name	My Applet

      This step defines the user interface object for My Applet.

   5. In the Object Expression list, add the following expressions. Use the File list to add each file.

      Expression	Level	File
      Phone	1	siebel/jqmgridrenderer.js
      Tablet	2	siebel/jqmtabletgridrenderer.js
      Desktop	3	siebel/jqmgridrenderer.js

Using JavaScript to Modify the Number of Columns in Tables

This topic describes how to use JavaScript to modify the number of columns that Siebel Open UI displays in a table that it renders in a list applet.

To use JavaScript to modify the number of columns in tables

1. Copy one of the following files to your custom folder:
   • jqmgridrenderer.js. Copy this file to modify a table that Siebel Open UI displays in a phone.
   • jqmtabletgridrenderer.js. Copy this file to modify a table that Siebel Open UI displays in a tablet.

     You must copy these files only to the following folder:

   CLIENT_HOME\SWEApp\PUBLIC\language_code\files\custom

   For more information about where these JavaScript files reside and the folders that you can use to store your customizations, see Organizing Files That You Customize.

2. Use a JavaScript editor to open the file that you copied in Step 1.
3. Add the following code:

   if (typeof (SiebelAppFacade.JQMCustomGridRenderer) === "undefined") {
     SiebelJS.Namespace('SiebelAppFacade.JQMCustomGridRenderer');
     //Module with its dependencies
     define("siebel/jqmcustomgridrenderer ", ["order!3rdParty/jqmobile/  mobiscroll.custom-2.5.0.min", "order!3rdParty/jqmobile/  jquery.swipeButton.min", "order!3rdParty/jqmobile/
     "order!3rdParty/jqmobile/jquery.mobile.scrollview", "order!3rdParty/  jquery.mobile.scrollview-ext", "order!siebel/jqmsearchctrl", "order!siebel/  jqmformrenderer", "order!siebel/jqmscrollcontainer", "order!siebel/  jqmgridrenderer"],
       function () {
       SiebelAppFacade.JQMCustomGridRenderer = (function() {
         SiebelJS.Extend(JQMCustomGridRenderer, SiebelAppFacade.JQMGridRenderer);
         JQMCustomGridRenderer.prototype.SetDefaultMaxListColumns = function() {
           this.m_defaultMaxListColumns = 3;
         };

4. Save your modifications.
5. Add the physical renderer that you modified in Step 3 to the manifest:
   1. Log in to the Siebel application.
   2. Navigate to the Administration - Application screen, and then the Manifest Files list.
   3. In the Files list, add the following file.

      Field	Value
      Name	siebel/jqmcustomgridrenderer.js

   4. Do Step 2, and also add the siebel/jqmcustomgridrenderer.js file to each platform that you add in Step e.