Configuring Siebel Open UI > Customizing Styles, Applets, and Fields > Customizing Applets >

Customizing List Applets to Render as a Carousel

The example in this topic describes how to customize Siebel Open UI to render a list applet as a carousel. To view different example carousel styles and get source code for these styles, see the http://sorgalla.com/projects/jcarousel Web site. For an alternative configuration, see Customizing List Applets to Render as a Carousel without Compiling the SRF.

To customize list applets to render as a carousel

1. Add records in the client:
   1. Make sure the application configuration file for Siebel Call Center includes the following setting:

   [Siebel]
   RepositoryFile = siebel_sia.srf

   For more information, see Modifying the Application Configuration File.

   2. Open the client, navigate to the Contacts screen, and then click the Contact List link.
   3. Add the following contact.

      Field	Value
      Last Name	Aamos
      First Name	Ray

   4. Click the link in the Last Name.
   5. Click the Affiliations link.
   6. In the Affiliations list, add four affiliations.
   7. Make sure you choose a different value in the Account field for each record. Accept default values for all other fields.
   8. Log out of the client.
2. Modify the JavaScript files:
   1. Copy the carouselrenderer.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.

   The carouselrenderer.js file is a physical renderer that bridges a JCarousel third-party control plug-in to the list presentation model that the listpmodel.js file defines. The List Applet and the Carousel applet use the same presentation model as the business logic for each user interface representation. The only difference is how Siebel Open UI renders each applet.

   2. Download the jquery.jcarousel.js file into the following folder:

   CLIENT_HOME\PUBLIC\language_code\release_number\scripts\3rdParty

   To get a copy of this file, see Article ID 1494998.1 on My Oracle Support. Oracle downloads and integrates this 3rdParty Carousel package into Siebel Open UI through the physical renderer. You must never modify these third-party plug-in files. If you require a configuration that the third-party plug-in does not meet, then you must modify the physical renderer instead of the third-party plug-in.

3. Configure Siebel Open UI to use the CSS file that the third-party uses:
   1. In Windows Explorer, navigate to the following folder:

   CLIENT_HOME\PUBLIC\language_code\release_number\scripts\3rdParty

   2. Create the jcarousel, skins, and tango subfolders in the 3rdParty folder using the following hierarchy:

   CLIENT_HOME\PUBLIC\language_code\release_number\scripts\3rdParty\jcarousel\skins\tango\

   3. Download the skin.css file into the following folder:

   CLIENT_HOME\PUBLIC\language_code\release_number\scripts\3rdParty\jcarousel\skins\tango\

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

   4. Navigate to the following folder:

   CLIENT_HOME\PUBLIC\language_code\release_number\scripts\siebel

   5. Use a JavaScript editor to open the theme.js file.
   6. Modify the following code. You add the jcarousel code lines. Make sure you add a comma to the end of the code line that immediately precedes the jcarousel line. If you copy and paste code, make sure your JavaScript editor pastes straight quotation marks ("), not smart quotation marks ("):

   /*globals SIEBEL_BUILD */
   SiebelApp.ThemeManager.addTheme(
       "GRAY_TAB",
       {
         css : {
           "sb_theme" : "files/theme-base.css",
         "sc_theme" : "files/theme-gray.css",
         "sn_theme" : "files/theme-nav-tab.css",
         "sca_them" : "files/theme-calendar.css",
         "jcarousel" : "SIEBEL_BUILD + "3rdParty/jcarousel/skins/tango/skin.css"
         },
         objList : [ ]
       }
     );
   
   SiebelApp.ThemeManager.addTheme(
       "TANGERINE_TAB",
       {
         css : {
           "sb_theme" : "files/theme-base.css",
         "sc_theme" : "files/theme-tangerine.css",
         "sn_theme" : "files/theme-nav-tab.css",
         "sca_them" : "files/theme-calendar.css",
         "jcarousel" : "SIEBEL_BUILD + "3rdParty/jcarousel/skins/tango/skin.css"
       },
       objList : [ ]
     }
   );

   7. Use a JavaScript editor to open the themetree.js file.
   8. Modify the following code. You add the jcarousel code lines:

   /*globals SIEBEL_BUILD */
   SiebelApp.ThemeManager.addTheme(
     "GRAY_ACCORDION",
     {
       css : {
         "sb_theme" : "files/theme-base.css",
         "sc_theme" : "files/theme-gray.css",
         "sn_theme" : "files/theme-nav-accordion.css",
         "sca_them" : "files/theme-calendar.css",
         "dyt_them" : "files/3rdParty/themes/dynatree/skin/ui.dynatree.css"
         "jcarousel" : "SIEBEL_BUILD + "3rdParty/jcarousel/skins/tango/skin.css"
       },
       objList : [ ]
       }
   );
   

   SiebelApp.ThemeManager.addTheme(
     "TANGERINE_ACCORDION",
     {
       css : {
         "sb_theme" : "files/theme-base.css",
         "sc_theme" : "files/theme-tangerine.css",
         "sn_theme" : "files/theme-nav-accordion.css",
         "sca_them" : "files/theme-calendar.css",
         "dyt_them" : "files/3rdParty/themes/dynatree/skin/ui.dynatree.css"
         "jcarousel" : "SIEBEL_BUILD + "3rdParty/jcarousel/skins/tango/skin.css"
       },
       objList : [ ]
       }
   );

4. 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/custom/carouselrenderer.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	Pharma Professional Affiliation From List Applet

   6. 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	1

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

   siebel/custom/carouselrenderer.js

5. Test your modifications:
   1. Clear the browser cache.

      For more information, see Clearing the Browser Cache.

   2. Open the Siebel application, and then navigate to the contact that includes the affiliations that you added in Step 1.
   3. Make sure the affiliations view is similar to the following.

      Notice that the carousel data runs together because no styling is defined for the carousel content. To fix this problem, do Step 6.
6. Modify the styling that Siebel Open UI uses to render the view:
   1. Use a JavaScript editor to open the carouselrenderer.js file that you copied in Step 2.
   2. Locate the following code:

   itemMarkup += "</span><br>";

   3. Modify the code you located in Step b to the following. You remove the break:

   itemMarkup += "</span>";

   4. Use a JavaScript editor to open the skin.css file.
   5. Locate the following code:

   .jcarousel-skin-tango .jcarousel-item {
     width: 75px;
     height: 75px;
   }

   6. Modify the code you located in Step e to the following. Bold font indicates the code that you must modify:

   .jcarousel-skin-tango .jcarousel-item {
     width: 318px;
     height: 75px;
   }

   7. Locate the following code:

   .jcarousel-skin-tango .jcarousel-item-horizontal {
     margin-left: 0;
     margin-right: 10px;
   }

   8. Modify the code you located in Step g to the following. Bold font indicates the code that you must modify:

   .jcarousel-skin-tango .jcarousel-item-horizontal {
     margin-left: 10;
     margin-right: 10px;
     color: black;
   }

7. Test your modifications:
   1. Clear the browser cache.
   2. Refresh the view that you examined in Step 5.
   3. Make sure the styling is similar to the following.