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 Applets

Siebel Open UI comes predefined to display a maximum of four list columns in a Siebel Mobile phone client, and eight list columns in a tablet. This topic describes how to write a custom renderer that overwrites this number of maximum columns. You can customize the number of columns at the following different levels for tablets and for phones:

• Applet level. Maximum number of list columns.
• Globally. Default maximum number of list columns. The custom renderer modifies only the global configuration.

To customize the number of columns in mobile applets

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, locate the applet 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 number. For example, to display a maximum of five columns in a phone, enter the number 5.
      Max List Columns Tablet	Enter a number. For example, to display a maximum of seven columns in a tablet, enter the number 7.
      ClientPMUserProp	Enter the following value: Max List Columns Phone, Max List Columns Tablet You add a series of applet user property names. Use a comma to separate each name. Siebel Open UI sends these applet user properties from the Siebel Server to the client at run time. In this example, you add the other applet user properties that you specify in this step.

   6. Compile your modifications.
2. Add custom physical renderers.

   Siebel Open UI comes predefined to use the jqmlistrenderer.js file for the phone and the jqmtabletlistrenderer.js file for the tablet to determine the maximum number of columns. Siebel Open UI derives the jqmtabletlistrenderer.js file from the jqmlistrenderer.js file. You can create a custom physical renderer to overwrite the SetDefaultMaxListColumns method that these files specify. Do the following:

   1. Create a JavaScript file in the following folder:

   scripts\siebel\custom

   You must use this folder. You can use any file name. For this example, use custom_phone_renderer.js. For more information, see Organizing Files That You Customize.

   2. Add the following code to the file you created in Step a. This code overwrites the methods that Siebel Open UI uses to render columns in a phone:

   if (typeof (SiebelAppFacade.JQMPhoneListRenderer) ===
   "undefined") {
     SiebelJS.Namespace('SiebelAppFacade.JQMPhoneListRenderer');
     define("siebel/jqmphonelistrenderer", ["order!3rdParty/jqmobile/mobiscroll.custom-2.5.0.min",
     "order!3rdParty/jqmobile/jquery.swipeButton.min", "order!3rdParty/jqmobile/jquery.easing.1.3",
     "order!3rdParty/jqmobile/jquery.mobile.scrollview", "order!3rdParty/jquery.mobile.scrollview-ext",
     "order!siebel/jqmsearchctrl", "order!siebel/jqmformrenderer", "order!siebel/jqmscrollcontainer", "order!siebel/jqmlistrenderer"],
     function () {
       SiebelAppFacade.JQMPhoneListRenderer = (function() {
         function JQMPhoneListRenderer(pm) {SiebelAppFacade.JQMPhoneListRenderer.superclass.constructor.call(
           this, pm);
       }
       SiebelJS.Extend(JQMPhoneListRenderer, SiebelAppFacade.JQMListRenderer);
       JQMPhoneListRenderer.prototype.SetDefaultMaxListColumns = function() {
         this.m_defaultMaxListColumns = 5;
       //overwritten value
     for phone maximum list columns
       };
       return JQMPhoneListRenderer;
       };
     }());
       return "SiebelAppFacade.JQMPhoneListRenderer";
     });
   }

   3. Create a new JavaScript file named custom_tablet_renderer.js in the following folder:

   CLIENT_HOME\PUBLIC\language_code\build_number\scripts\siebel\custom

   You must create a separate file for each platform.

3. 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 file.

      Field	Value
      Name	siebel/jqmphonelistrenderer.js

      You add the custom files that you created in Step 2.

   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	Specify the name of the applet that you modified in Step 1.

   6. In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a phone platform.

      Field	Value
      Expression	Phone
      Level	1

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

   siebel/jqmphonelistrenderer.js

   8. In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a tablet platform.

      Field	Value
      Expression	Tablet
      Level	2

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

   siebel/jqmtabletlistrenderer.js

   10. In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a desktop platform.

       Field	Value
       Expression	Desktop
       Level	3

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

   siebel/jqmlistrenderer.js

4. Test your modifications:
   1. Log in to the client through a phone, and then verify that Siebel Open UI displays the maximum number of columns that you specified for the phone.
   2. Log in to the client through a tablet, and then verify that Siebel Open UI displays the maximum number of columns that you specified for the tablet.