Displaying Data from External Applications in Siebel Open UI

This topic describes how to configure Siebel Open UI to interact with other applications. It includes the following information:

"Displaying Data from External Applications in Siebel Views"
"Displaying Data from External Applications in Siebel Applets"

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

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.
Replace the SRF that the Mobile Web Client uses in the following folder:
```
INSTALL_DIR\eappweb\Objects\enu
```
This SRF includes the Siebel Tools modifications that this example requires.
Download the sociallyawarepmodel.js file into the following folder:
```
INSTALL_DIR\eappweb\PUBLIC\language_code\files\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. For more information about the language_code, see "Languages That Siebel Open UI Supports".
Use a JavaScript editor to open the sociallyawarepmodel.js file that you downloaded in Step 3.

Locate the following code:

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

Add the following code immediately under the code you located in Step 5:
```
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.
Add the following code immediately after the code you added in Step 6:
```
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 8.

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 uses the first name and last name to get the connection information stored on the client. Siebel Open UI gets this information 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 set of records from server. For more information, see "Notifications That Siebel Open UI Supports" and "GetActiveView Method".

Add the following code immediately below the AddProperty methods you added in Step 6:
```
this.AddMethod("QueryForRelatedContacts", QueryForRelatedContacts);
this.AddMethod("GetConnectionByName", GetConnectionByName);
```
These AddMethod calls add the QueryForRelatedContacts method and the GetConnectionByName method so that Siebel Open UI can call them from the presentation model.
Configure 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 file.
  
  Field Value
  
  Name siebel/custom/sociallyawarepmodel.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 Presentation Model
  
  Name Enter any value.
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/sociallyawarepmodel.js
```
Test your modifications.

Field	Value
Name	siebel/custom/sociallyawarepmodel.js

Field	Value
Type	Applet
Usage Type	Presentation Model
Name	Enter any value.

Field	Value
Expression	Desktop
Level	1

Displaying Data from External Applications in Siebel Applets

The example in this topic describes how to configure Siebel Open UI to display data from an external application in a Siebel applet. Siebel Open UI can use a symbolic URL open this external application from an applet. For example, to display a Google Map or a Linked In view as an applet in a Siebel application.

The example in this topic configure Siebel Open UI to display a Google map as a child applet in the Account detail page. The Map displays a location according to the Zip Code of the account record. If the Zip Code is empty, then it displays the default Google map.

To display data from external applications in Siebel applets

Configure the business component:

Open Siebel Tools. For more information, see Using Siebel Tools
In the Object Explorer, click Business Component.
In the Business Components list, query the Name property for Account.
In the Object Explorer, expand the Business Component tree, and then click Field.

In the Fields list, add the following field.

Property	Value
Name	You can use any value. For this example, use the following value: SymbolicURLGoogleMap
Calculated	TRUE
Type	DTYPE_TEXT
Calculated Value	Enter the name of any Symbolic URL enclosed in double quotation marks. For this example, enter the following value: SymbolicURLGoogleMap You define this Symbolic URL later in this example.

Configure the applet:
1. In the Object Explorer, click Applet.
2. In the Applets list, query the Name property for SSO Analytics Administration Applet.
  
  In a typical configuration, you create an applet that Siebel Open UI can to use to display the external content. This applet must reference the business component that you configured in Step 1.
3. Copy the applet that you located in Step b, and then set the following properties for this copy.
  
  Property Value
  
  Name GoogleMap
  
  Business Component Account
  
  Title GoogleMap
4. In the Object Explorer, expand the Applet tree, expand the List tree, and then click List Column.
5. In the List Columns list, set the following properties for the single record that the list displays.
  
  Property Value
  
  Name SymbolicURLGoogleMap
  
  Field SymbolicURLGoogleMap
  
  Field Retrieval Type Symbolic URL

Property	Value
Name	SymbolicURLGoogleMap
Field	SymbolicURLGoogleMap
Field Retrieval Type	Symbolic URL

Configure the view:

In the Object Explorer, click View.
In the Views list, query the Name property for the view that must display the Google map.

For this example, query the Name property for the following value:
```
Account Detail - Contacts View
```
In the Object Explorer, expand the View tree, expand the View Web Template tree, and then click View Web Template Item.

In the View Web Template Items list, add the following view web template item.

Property	Value
Name	GoogleMap
Applet	GoogleMap
Field Retrieval Type	Symbolic URL
Item Identifier	Enter the next highest number in the sequence of numbers that Siebel Tools displays for all records in the View Web Template Items list.

Note that you cannot drag, and then drop an applet into the Web Layout Editor in Siebel Tools. You must add it manually to the web page.

Compile your modifications.
Examine the URL that Siebel Open UI must integrate:
1. Open the URL that Siebel Open UI must integrate.
  
  For this example, open http://maps.google.com/ in a browser.
2. View the source HTML.
  
  For example, if you use Internet Explorer, then click the View menu, and then click Source. Alternatively, save the file to your computer, and then use an HTML editor to open it.
3. Identify the input fields.
  
  It is recommended that you search for the input tag.
  
  In this example, the source displays the name in the following way:
```
name="q"
```
  You use this value when you define the arguments for the Symbolic URL.
4. Determine if the method attribute of the page is one of the following:
  - POST. You must define the PostRequest command as an argument of the symbolic URL.
  - GET. you do not need to define a symbolic URL command.
  In this example, the method is GET.
5. Determine the target of the from action attribute, which is typically specified as action = "some string". In this situation, it is '/maps'. It is appended to the predefined URL.

Configure the symbolic URL:

Log in to the Siebel client with administrator privileges.
Navigate to the Administration - Integration screen, and then the WI Symbolic URL List view.
In the Fixup Administration dropdown list, choose Symbolic URL Administration.
In the Symbolic URL Administration list, add the following symbolic URL.

Field Value

Name SymbolicURLGoogleMap

URL http://maps.google.com/maps

Fixup Name Default

SSO Disposition IFrame

Field	Value
Name	SymbolicURLGoogleMap
URL	http://maps.google.com/maps
Fixup Name	Default
SSO Disposition	IFrame

In the Symbolic URL Arguments list, add the following symbolic URL argument.

Field	Value
Name	q This value is the input tag in HTML for the Google map.
Required Argument	N You set this argument to N because the account might not include a zip code.
Argument Type	Field Siebel Open UI must send the value in the zip code field of the account to the Google map.
Argument Value	Postal Code You set this argument to the name of the business component field that contains the value that Siebel Open UI must send to the Google map.
Append as Argument	Y
Substitute in Text	N
Sequence#	1

In the Symbolic URL Arguments list, add the following symbolic URL arguments. Siebel Open UI uses this argument to embed the Google map in the applet.

Field Value

Name output

Required Argument Y

Argument Type Constant

Argument Value embed

Append as Argument Y

Substitute in Text N

Sequence# 2

Test your modifications:
1. Navigate to the Accounts screen, and then click Accounts List.
2. In the Accounts List, create a new account and include a value in the Zip Code field.
3. Drill down on the Account Name field.
4. Make sure Siebel Open UI displays a Google map and that this map includes a push pin that identifies the zip code that you entered in Step b.

Field	Value
Name	output
Required Argument	Y
Argument Type	Constant
Argument Value	embed
Append as Argument	Y
Substitute in Text	N
Sequence#	2