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

Customizing List Applets to Render as Carousels

The example in this topic describes how to customize Siebel Open UI to render a list applet as a carousel in Siebel Call Center. To view different example carousel styles and to get the code for these styles, see the http://sorgalla.com/projects/jcarousel Web site.

To customize list applets to render as carousels

1. Add records in the client:
   1. Open the client, navigate to the Contacts screen, and then click the Contact List link.
   2. Add the following contact.

      Field	Value
      Last Name	Aamos
      First Name	Ray

   3. Click the link in the Last Name.
   4. Click the Affiliations link.
   5. In the Affiliations list, add four affiliations.
   6. Make sure you choose a different value in the Account field for each record. Accept default values for all other fields.
   7. Log out of the client.
2. Add the JavaScript files that Siebel Open UI uses to render the carousel:
   1. Save the carouselrenderer.js file to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\siebel\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 for the business logic that it uses to display each user interface. The only difference is how Siebel Open UI renders each applet.

   2. Save the jquery.jcarousel.js file to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\3rdParty\jcarousel

   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. Add the CSS file that the third-party uses:
   1. In Windows Explorer, navigate to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\3rdParty

   2. Add the following subfolder hierarchy to the 3rdParty folder:

   \jcarousel\skins\tango\

   3. Save the skin.css file to the tango folder that you added in Step b:

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

4. Add files to the manifest:
   1. Log in to a 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 files. You must add a separate record for each file:

   siebel/custom/carouselrenderer.js

   3rdParty/jcarousel/skins/tango/skin.css

   files/theme-aurora.css

   Files that reside in the files folder are predefined files that you use in this example.

5. Administer the manifest for the applet:
   1. Navigate to the Administration - Application screen, and then the Manifest Administration view.
   2. In the UI Objects list, specify the following applet.

      Field	Value
      Type	Applet
      Usage Type	Physical Renderer
      Name	Pharma Professional Affiliation From List Applet

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

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

   siebel/custom/carouselrenderer.js

6. Administer the manifest for the Aurora theme:
   1. Navigate to the Manifest Expressions view.
   2. In the Expressions list, add the following expression.

      Field	Value
      Name	Aurora Theme
      Expression	LookupName (OUI_THEME_SELECTION, Preference ("Behavior","DefaultTheme")) = "AURORA_THEME"

   3. Navigate to the Manifest Administration view.
   4. In the UI Objects list, specify the following object.

      Field	Value
      Type	Application
      Usage Type	Theme
      Name	PLATFORM DEPENDENT

   5. In the Object Expression list, add the following subexpression.

      Field	Value
      Group Name	Leave empty.
      Expression	Aurora Theme
      Level	1
      Operator	Leave empty.
      Web Template Name	Leave empty.

   6. In the Files list, add the following files:

   files/theme-aurora.css

   3rdParty/jcarousel/skins/tango/skin.css

7. Test your modifications:
   1. Clear 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 contains carousel data that runs together because no styling is defined for the carousel content. To fix this problem, do Step 8.
      
8. 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;

   }

9. Test your modifications:
   1. Clear the browser cache.
   2. Refresh the view that you examined in Step 7.
   3. Make sure the styling no longer contains carousel data that overlaps, and that each record is displayed in its own block.