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
- Add records in the client:
- Open the client, navigate to the Contacts screen, and then click the Contact List link.
- Add the following contact.
|
|
Last Name |
Aamos |
First Name |
Ray |
- Click the link in the Last Name.
- Click the Affiliations link.
- In the Affiliations list, add four affiliations.
- Make sure you choose a different value in the Account field for each record. Accept default values for all other fields.
- Log out of the client.
- Add the JavaScript files that Siebel Open UI uses to render the carousel:
- 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.
- 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.
- Add the CSS file that the third-party uses:
- In Windows Explorer, navigate to the following folder:
INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\3rdParty
- Add the following subfolder hierarchy to the
3rdParty folder:
\jcarousel\skins\tango\
- 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.
- Add files to the manifest:
- Log in to a Siebel client with administrative privileges.
For more information about the screens that you use in this step, see Configuring Manifests.
- Navigate to the Administration - Application screen, and then the Manifest Files view.
- 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.
- Administer the manifest for the applet:
- Navigate to the Administration - Application screen, and then the Manifest Administration view.
- In the UI Objects list, specify the following applet.
|
|
Type |
Applet |
Usage Type |
Physical Renderer |
Name |
Pharma Professional Affiliation From List Applet |
- In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a desktop platform.
|
|
Expression |
Desktop |
Level |
1 |
- In the Files list, add the following file:
siebel/custom/carouselrenderer.js
- Administer the manifest for the Aurora theme:
- Navigate to the Manifest Expressions view.
- In the Expressions list, add the following expression.
|
|
Name |
Aurora Theme |
Expression |
LookupName (OUI_THEME_SELECTION, Preference ("Behavior","DefaultTheme")) = "AURORA_THEME" |
- Navigate to the Manifest Administration view.
- In the UI Objects list, specify the following object.
|
|
Type |
Application |
Usage Type |
Theme |
Name |
PLATFORM DEPENDENT |
- In the Object Expression list, add the following subexpression.
|
|
Group Name |
Leave empty. |
Expression |
Aurora Theme |
Level |
1 |
Operator |
Leave empty. |
Web Template Name |
Leave empty. |
- In the Files list, add the following files:
files/theme-aurora.css
3rdParty/jcarousel/skins/tango/skin.css
- Test your modifications:
- Clear the browser cache.
- Open the Siebel application, and then navigate to the contact that includes the affiliations that you added in Step 1.
- 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.
- Modify the styling that Siebel Open UI uses to render the view:
- Use a JavaScript editor to open the carouselrenderer.js file that you copied in Step 2.
- Locate the following code:
itemMarkup += "</span><br>";
- Modify the code you located in Step b to the following. You remove the break:
itemMarkup += "</span>";
- Use a JavaScript editor to open the skin.css file.
- Locate the following code:
.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}
- 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;
}
- Locate the following code:
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 10px;
}
- 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;
}
- Test your modifications:
- Clear the browser cache.
- Refresh the view that you examined in Step 7.
- Make sure the styling no longer contains carousel data that overlaps, and that each record is displayed in its own block.
|