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

Creating a Custom Mobile List

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

To create a custom mobile list

1. Map the rendering key. You add the following code to the manifest_extensions.map file:

   [Physical_Renderer]
   LS Pharma Account Calls List Applet - Mobile=CustomListPR

   For more information, see Mapping Server Objects to Client Code.

2. Use an XML editor to open the Manifest File.

   For more information, see Mapping Server Objects to Client Code.

3. Locate the following code:

   <KEY Name = "ListPR">
   ...
   </KEY>

   This code resides in the following PLATFORM Name section:

   <PLATFORM_KEY_SPECIFIC>
   . . .
   <PLATFORM Name="Mobile">

4. Modify the following code in the section that you located in Step 3. Bolded font indicates the code you modify:

   <KEY Name = "CustomListPR">
   <FILE_NAME> 3rdParty/jqmobile/mobiscroll-1.5.3.min.js </FILE_NAME>
   <FILE_NAME> 3rdParty/jqmobile/jquery.swipeButton.min.js </FILE_NAME>
   <FILE_NAME> 3rdParty/jqmobile/jquery.mobile.simpledialog.min.js </FILE_NAME>
   <FILE_NAME> 3rdParty/jqmobile/jquery.easing.1.3.js </FILE_NAME>
   <FILE_NAME> 3rdParty/jqmobile/jquery.mobile.scrollview.js </FILE_NAME>
   <FILE_NAME> siebel/jqmsearchctrl.js </FILE_NAME>
   <FILE_NAME> siebel/jqmformrenderer.js </FILE_NAME>
   <FILE_NAME> siebel/jqmscrollcontainer.js </FILE_NAME>
   <FILE_NAME> siebel/jqmcustomlistrenderer.js </FILE_NAME>
   <FILE_NAME> 3rdParty/jquery.signaturepad.min.js </FILE_NAME>
   </KEY>

5. Locate the following code:

   <KEY Name = "ListPR">
   ...
   </KEY>

   This code resides in the following PLATFORM Name section:

   <PLATFORM_KEY_SPECIFIC>
   . . .
   <PLATFORM Name="Desktop">

6. Modify the following code in the section that you located in Step 5. Bolded font indicates the code you modify:

   <KEY Name = "CustomListPR">
   <FILE_NAME> 3rdParty/JQueryGrid/javascript/jquery.jqGrid-4.2.0/js/i18n/grid.locale-en.js </FILE_NAME>
   <FILE_NAME> 3rdParty/JQueryGrid/javascript/jquery.jqGrid-4.2.0/js/jquery.jqGrid.src.js </FILE_NAME>
   <FILE_NAME> 3rdParty/jqgrid-ext.js </FILE_NAME>
   <FILE_NAME> siebel/phyrenderer.js </FILE_NAME>
   <FILE_NAME> siebel/jqgridrenderer.js </FILE_NAME>
   </KEY>

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

   client_root\PUBLIC\language_code\release_number\scripts\siebel

   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 jqmcustomlistrenderer.js file using values from the following table. Bold font indicates the code you must modify.

      Replace This Old Code	With This New Code
      SiebelApp.S_App.RegisterConstructorAgainstKey (SiebelApp.Constants.get("SWE_UIDEF_LIST_PRENDR"), "SiebelAppFacade.JQMListRenderer");	SiebelApp.S_App.RegisterConstructorAgainstKey ("CustomListPR", "SiebelAppFacade.JQMCustomListRenderer"); Note that JQMCustomListRenderer matches the key that the core_manifest.xml file contains.
      Locate the following code in the JQMCustomListRenderer.prototype.ShowUI function: this.GetJQMList().html("<ul id='" + listId + "'></ul>");	this.GetJQMList().html("<ol id='" + listId + "'></ol>");
      Locate the following code in the JQMCustomListRenderer.prototype.BindData function: $('div.ui-btn, .aSwipeBtn', $(this).parent('ul')).remove();	$('div.ui-btn, .aSwipeBtn', $(this).parent('ol')).remove();
      Locate the second occurrence of the following code: for (index = 0; index < ColList.length; index++) { ... }	Delete the entire section.

   5. In Windows Explorer, use a JavaScript editor to open the jqgridrenderer.js file.
   6. Locate the following code:

   SiebelApp.S_App.RegisterConstructorAgainstKey (SiebelApp.Constants.get("SWE_UIDEF_GRID_PRENDR"), "SiebelAppFacade.JQGridRenderer");

   7. Add the following code immediately after the code you located in Step f:

   SiebelApp.S_App.RegisterConstructorAgainstKey ("CustomListPR", "SiebelAppFacade.JQGridRenderer");

8. Test your work:
   1. Log into the ePharmace application.
   2. Reset the Safari browser so that it uses mobile mode.
   3. Navigate to 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.
9. Modify the style:
   1. In Windows Explorer, navigate to the following folder:

   client_root\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 change the display from bock 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;
   }

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