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

Customizing List Applets 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. It gets information from LinkedIn, a 3rd party resource.

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

1. Download the sociallyawarerenderer.js file into 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.

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

   SiebelJS.Extend(SociallyAwarePR, SiebelAppFacade.PhysicalRenderer);

3. Add the following code immediately below the code you located in Step 2. 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;
   }

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

   SiebelJS.Extend(SociallyAwarePR, SiebelAppFacade.PhysicalRenderer);

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

   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
     });
   };

6. 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;
   }

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

   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
     });
   };

8. 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/sociallyawarerenderer.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/sociallyawarerenderer.js

9. Test your modifications.