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

Customizing Mobile Lists

This topic describes how to configure Siebel Open UI to create a custom mobile list.

To customize mobile lists

1. 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/jqmcustomlistrenderer.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	LS Pharma Account Calls List Applet - Mobile

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

      Field	Value
      Expression	Mobile
      Level	1

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

   siebel/jqmcustomlistrenderer.js

   8. 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	2

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

   siebel/jqgridrenderer.js

2. Configure the list renderer:
   1. Download the jqmlistrenderer.js file to the following folder:

   CLIENT_HOME\SWEApp\PUBLIC\language_code\files\custom

   To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.

   2. Rename the file you downloaded in Step a to jqmcustomlistrenderer.js.
   3. Use a JavaScript editor to open the jqmcustomlistrenderer.js file.
   4. Modify the following code that resides in the jqmcustomlistrenderer.js file. Bold font indicates the code that you must modify.

      Replace This Old Code. . .	. . .With This New Code
      SiebelApp.S_App.RegisterConstructorAgainstKey(SiebelApp.Constants.get("SWE_UIDEF_LIST_PRENDR"),"SiebelAppFacade.JQMCustomListRenderer");	define("siebel/jqmcustomlistrenderer", ["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"], function () { Use the Define method to identify the physical renderer file. You must use the Define method to make Siebel Open UI can identify the constructor. You must include the relative path and the name of the presentation model file without the file name extension. For more information, see Define Method.
      Locate the following code in the JQMCustomListRenderer.prototype.ShowUI method: this.GetJQMList().html("<ul id='" + listId + "'></ul>");	this.GetJQMList().html("<ol id='" + listId + "'></ol>");
      JQMListRenderer.prototype.GetListHeightreturn $("#" + this.GetScrollcontainer()).children("ul").height();	return $("#" + this.GetScrollcontainer()).children("ol").height();
      Locate the second occurrence of the following code: for (index = 0; index < ColList.length; index++) {...}	Delete the entire section.

3. Test your modifications:
   1. Log in to the ePharma application.
   2. Reset the Safari browser so that it uses mobile mode.
   3. Navigate to the Calls screen.
   4. Make sure the Calls applet uses the new physical renderer when in mobile mode. This renderer displays calls in the following numbered list.
4. Modify the style:
   1. In Windows Explorer, navigate to the following folder:

   CLIENT_HOME\PUBLIC\language_code\files

   2. Use an editor to open the theme-black.css file.
   3. Locate the following code:

   .ui-li-heading {
   font-family: Helvetica, Neue;
   font-size: 15pt; /15pt;/ /*100%; */
   font-weight: bold;
   display: block;
   margin: .5em 0 0 .4em;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   }

   4. Modify the code that you located in Step c. You modify the display from block to inline. See the following bolded code:

   ui-li-heading {
   font-family: Helvetica, Neue;
   font-size: 15pt; /15pt;/ /*100%; */
   font-weight: bold;
   display: inline;
   margin: .5em 0 0 .4em;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   }

5. Test your modifications:
   1. Restart the Safari browser.
   2. Navigate to the Calls screen.
   3. Make sure the Calls applet uses the following inline display.