Configuring Siebel Open UI > Customizing Siebel Open UI > Customizing List Applets >

Customizing a List Applet to Render as a Carousel Without Compiling the SRF

This topic describes how to modify the appearance and behavior of the user interface without compiling the SRF. As an example, it describes how to configure Siebel Open UI to render a list applet as a carousel without compiling the SRF.

To customize a list applet to render as a carousel without compiling the SRF

1. Download the sociallyawarerenderer.js file into the following folder:

   client_root\PUBLIC\language_code\release_number\scripts\siebel\custom

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

2. Copy the following code into the sociallyawarerenderer.js file that you downloaded in Step 1:

   if( typeof( SiebelAppFacade.SociallyAwarePR ) === "undefined" ){
   SiebelJS.Namespace( "SiebelAppFacade.SociallyAwarePR" )
   SiebelApp.S_App.RegisterConstructorAgainstKey( "CarouselPRenderer","SiebelAppFacade.SociallyAwarePR" );
   SiebelAppFacade.SociallyAwarePR = ( function(){
   function SociallyAwarePR( pm ){
   SiebelAppFacade.SociallyAwarePR.superclass.constructor.call( this, pm );
   }
   SiebelJS.Extend( SociallyAwarePR, SiebelAppFacade.PhysicalRenderer );
   SociallyAwarePR.prototype.SetCellEdit = function(){
   };
   SociallyAwarePR.prototype.SetCellValue = function(){
   };
   return SociallyAwarePR;
   }());
   }

3. Locate the following code in the sociallyawarerenderer.js file:

   SiebelJS.Extend( SociallyAwarePR, SiebelAppFacade.PhysicalRenderer );

4. Add the following code immediately below the code you located in Step 3. The code that you add in this step adds the rendering implementation methods:

   functionGetCurrentCarouselItems(dbRec,linkedInRec){
   varpm=this.GetPM();
   varlistCols=pm.Get("ListOfColumns");
   varitemMarkup="<div>";
   itemMarkup+="<imgsrc='"+(linkedInRec["pictureUrl"]||"http://static02.linkedin.com/scds/common/u/img/icon/icon_no_photo_80x80.png")+"'>";
   itemMarkup+="</div><div>"
   for(varkeyindbRec){
   if(dbRec.hasOwnProperty(key)){
   varcontrolIndex=GetControlIndex.call(this,key,listCols);
   if(controlIndex!==-1){
   itemMarkup+="<spanclass='siebui-col-value"+key.replace(/g,"_")+"'>"+dbRec[key]+"</span>";
   }
   }
   }
   itemMarkup+="<spanclass='siebui-col-valuelinkedin header'>"+(linkedInRec["headline"]||"")+"</span></div>";
   returnitemMarkup;
   }
   functionGetControlIndex(key,listCols){
   varresult=-1;
   for(vari=0;i<listCols.length;i++){
   if(listCols[i].name===key){
   result=i;
   break;
   }
   }
   returnresult;
   }

5. Locate the following code in the sociallyawarerenderer.js file:

   SiebelJS.Extend( SociallyAwarePR, SiebelAppFacade.PhysicalRenderer );

6. Add the following code immediately below the code you located in Step 5:

   SociallyAwarePR.prototype.ShowUI = function(){
   SiebelAppFacade.SociallyAwarePR.superclass.ShowUI.call( this );
   var pm = this.GetPM();
   var placeHolder = pm.Get( "GetPlaceholder" );
   $( "#" + placeHolder ).append( "<ul class='siebui-list-carousel jcarousel-skin-tango'></ul>" );
   var recordSet = pm.Get( "GetRecordSet" );
   var recordLength = recordSet.length;
   var linkedInRecSet = pm.Get( "linkedINRecordSet" );
   var markup = "";
   for( var i = 0; i < recordLength; i++ ){
   markup += "<li>" + GetCurrentCarouselItems.call(
   this,
   recordSet[i],
   ( pm.ExecuteMethod( "GetConnectionByName", recordSet[i][ "First Name" ], recordSet[i][ "Last Name" ] ) || {})) + "</li>";

   }
   $( "ul.siebui-list-carousel", "#" + placeHolder ).html( "" ).append( markup ).jcarousel({
   itemFallbackDimension: 300
   });
   };

7. Locate the following code in the sociallyawarerenderer.js file:

   function GetControlIndex( key, listCols ){
   var result = -1;
   for( var i = 0; i < listCols.length; i++){
   if( listCols[i].name === key ){
   result = i;
   break;
   }
   }
   return result;
   }

8. Add the following code immediately below the code you located in Step 7:

   SociallyAwarePR.prototype.BindData = function(){
   var pm = this.GetPM();
   var placeHolder = pm.Get( "GetPlaceholder" );
   var recordSet = pm.Get( "GetRecordSet" );
   var recordLength = recordSet.length;
   var linkedInRecSet = pm.Get( "linkedINRecordSet" );
   var markup = "";
   for( var i = 0; i < recordLength; i++ ){
   markup += "<li>" + GetCurrentCarouselItems.call(
   this,
   recordSet[i],
   ( pm.ExecuteMethod( "GetConnectionByName", recordSet[i][ "First Name" ], recordSet[i][ "Last Name" ] ) || {})) + "</li>";
   }
   $( "ul.siebui-list-carousel", "#" + placeHolder ).html( "" ).append( markup ).jcarousel({
   itemFallbackDimension: 300
   });
   };

9. Make sure the custom_manifest.xml contains the following code. If it does not contain this code, then add it:

   <KEY Name = "CarouselPRenderer">
   <FILE_NAME> 3rdParty/jcarousel/lib/jquery.jcarousel.min.js </FILE_NAME>
   <FILE_NAME> siebel/phyrenderer.js </FILE_NAME>
   <FILE_NAME> siebel/custom/sociallyawarerenderer.js </FILE_NAME>
   </KEY>

   Siebel Open UI uses this code when it downloads the physical renderer files to the Web browser. For more information, see Mapping Server Objects to Client Code.

10. Test your changes.