Configuring Siebel Open UI > Customizing Siebel Open UI > Configuring Siebel Open UI to Interact With Other Applications >

Displaying Data from External Applications in Siebel Views

The example in this topic describes how to configure Siebel Open UI to get connection details from LinkedIn, find matching mutual contacts in Affiliation views, and then display the matching records in a Siebel view.

To display data from external applications in Siebel views

1. Set up the data:
   1. Log in to LinkedIn, and then identify two connections that include profile pictures and that allow you to reference them in your configuration.
   2. Write down the case-sensitive first name and last name for each LinkedIn profile.
   3. Log in to Siebel Call Center, navigate to the contacts Screen, and then the Contact List view.
   4. Click New and then enter the First Name and Last Name values for one of the profiles that you noted in Step b.

      The values you enter must match exactly. Make sure uppercase and lowercase usage is the same.

   5. Click New and then enter the First Name and Last Name values for the other profile you noted in Step b.
   6. Navigate to the Opportunity screen and then the Opportunity List view.
   7. Click New to create a new opportunity, and then add the contact that you created in Step d to this new opportunity.
   8. Click New to create another new opportunity, and then add the contact that you created in Step e to this new opportunity.
   9. Log in to the Siebel application using the sample database, and then repeat Step b through Step e.
   10. Navigate to the Contact Screen, and then the Contact List view.
   11. Drill down on the first contact and then navigate to the third level Affiliations view.
   12. Click New and then add the contact that you created in Step d.
   13. Click New and then add the contact that you created in Step e.
2. Replace the SRF that the Mobile Web Client uses in the following folder:

   client_root\Objects\enu

   This SRF includes the Siebel Tools modifications that this example requires.

3. Replace the custom_manifest.xml file in the following folder:

   client_root\Objects

   This Manifest File includes the changes required to load the JavaScript files for this example. For more information, see Mapping Server Objects to Client Code.

4. Download the sociallyawarepmodel.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. This code already contains the configuration that Siebel Open UI requires to authenticate the user with LinkedIn and to get the connections for this user from LinkedIn.

5. Use a JavaScript editor to open the sociallyawarepmodel.js file that you downloaded in Step 4.
6. Locate the following code:

   SociallyAwarePM.prototype.Init = function(){
   SiebelAppFacade.SociallyAwarePM.superclass.Init.call( this );

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

   this.AddProperty( "linkedINRecordSet", [] );
   this.AddProperty( "linkedINMarker", 0 );

   where:

   • linkedINRecordSet. Stores the connection details of the current user from LinkedIn.
   • linkedINMarker. Marks the position in the connection details record set for querying purposes in the Siebel database.
8. Add the following code immediately after the code you added in Step 7:

   this.AddMethod( "QueryForRelatedContacts", QueryForRelatedContacts );
   this.AddMethod( "GetConnectionByName", GetConnectionByName );

   This code allows the presentation model to call the GetConnectionByName method and the QueryForRelatedContacts method that you add in Step 9.

9. Add the following code immediately after the FetchConnectionFromLinkein method:

   function GetConnectionByName( fName, lName ){
   var connection = null;
   if( fName && lName ){
   var linkedInRecSet = this.Get( "linkedINRecordSet" );
   for( var i = 0; i < linkedInRecSet.length; i++ ){
   var current = linkedInRecSet[i];
   if( current.firstName === fName && current.lastName === lName )
   {connection = current;break; } }
   }
   return connection;
   }
   function QueryForRelatedContacts(){
   var currentMark = this.Get( "linkedINMarker" );
   var recordSet = this.Get( "linkedINRecordSet" );
   var firstName = "";
   var lastName = "";
   for( var i = currentMark; i < currentMark + 5; i++ ){
   var current = recordSet[i];
   firstName = firstName + current[ "firstName"];
   lastName = lastName + current[ "lastName" ];
   if( i < (currentMark + 4) )
   {firstName = firstName + " OR ";
   lastName = lastName + " OR ";

   } }
   if( firstName !== "" || lastName !== "" ){
   SiebelApp.S_App.GetActiveView().ExecuteFrame(
   this.Get( "GetName" ),
   [
   { field : "Last Name" , value : lastName },
   { field : "First Name", value : firstName}] );
   }
   }

   where:

   • GetConnectionByName. Given the first name and last name, gets the locally stored connection information that Siebel Open UI retrieved from LinkedIn.
   • QueryForRelatedContacts. Is the presentation model method that uses the subset of the LinkedIn connection record that Siebel Open UI sets to query the Siebel Server for matching records. The notification causes Siebel Open UI to call the BindData method of the physical renderer as part of the reply processing. The BindData method updates the user interface with the matching recordset from server. For more information, see Notifications That Siebel Open UI Supports.
10. Add the following code immediately below the AddProperty methods you added in Step 7:

    this.AddMethod( "QueryForRelatedContacts", QueryForRelatedContacts );
    this.AddMethod( "GetConnectionByName", GetConnectionByName );

    These AddMethod calls add the QueryForRelatedContacts method and the GetConnectionByName method, making them invokable on the presentation model.

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

    <KEY Name = "CarouselPModel">
    <FILE_NAME> siebel/applet.js </FILE_NAME>
    <FILE_NAME> siebel/listapplet.js </FILE_NAME>
    <FILE_NAME> siebel/pmodel.js </FILE_NAME>
    <FILE_NAME> siebel/listpmodel.js </FILE_NAME>
    <FILE_NAME> siebel/custom/sociallyawarepmodel.js</FILE_NAME>
    </KEY>

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

12. Test your changes.