Google Map Integration in Siebel Open UI

In this post I am going to show how Google map can be intgrated in Siebel Open UI. There is a white paper available at Oracle support you can also refer to that. But his one below is much simpler and can be integrated easily.

I am going to show the Google map on hover of "Show Map" (custom control).

Steps to be followed.

1. Identify the Applet on which we need to take the address and show it. 

    View:  All Accounts across Organizations

     Applet: SIS Account Entry Applet

2. First Add the Custom Control hover on which will show the Google Map. 

In the above image "Show Map" in red is a custom control. On Hover of which Google Map would be shown.

3. Create PR File as below

if( typeof( SiebelAppFacade.SISAccountEntryAppletPR ) === "undefined" ){

SiebelJS.Namespace( "SiebelAppFacade.SISAccountEntryAppletPR" );

SiebelApp.S_App.RegisterConstructorAgainstKey( "SISAccountEntryAppletPR", "SiebelAppFacade.SISAccountEntryAppletPR" );

SiebelAppFacade.SISAccountEntryAppletPR= ( function(){

var FullAddress;

function SISAccountEntryAppletPR( pm ){

SiebelAppFacade.SISAccountEntryAppletPR.superclass.constructor.call( this, pm );

/*Declare the PM binding here */

 this.GetPM().AttachPMBinding("ShowSelection", SelectionChange, {

            scope : this

         });

}

SiebelJS.Extend( SISAccountEntryAppletPR, SiebelAppFacade.PhysicalRenderer );

/*---------- Custom Code Goes Here ------------*/

function SelectionChange()

{

var pModel = this.GetPM();

var Data = pModel.Get("GetRecordSet");

 var Address = Data[0]["Street Address"];

 var City = Data[0]["City"];

 var State = Data[0]["State"];

 var Country = Data[0]["Country"];

 var ZipCode = Data[0]["Postal Code"];

  FullAddress = Address+" "+City+" "+State+" "+Country+" "+ZipCode;

}

SISAccountEntryAppletPR.prototype.ShowUI = function () {

      SiebelAppFacade.SISAccountEntryAppletPR.superclass.ShowUI.call(this);

 var pModel = this.GetPM();

 var controls = pModel.Get("GetControls");

 var Data = pModel.Get("GetRecordSet");

 var ShowMap ="<span id='ShowMap' style='color:#F76585;cursor:pointer;cursor:hand;'>Show Map</snap>";

 $("input[name='"+controls["StreetAddress"].GetInputName()+"']").parent().after(ShowMap);

 var Address = Data[0]["Street Address"];

 var City = Data[0]["City"];

 var State = Data[0]["State"];

 var Country = Data[0]["Country"];

 var ZipCode = Data[0]["Postal Code"];

  FullAddress = Address+" "+City+" "+State+" "+Country+" "+ZipCode;

  alert(FullAddress);

 //alert("Address "+Address+City+State+Country+ZipCode);

 $("#ShowMap").hover(function(){

var URL = 'http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q='+FullAddress+'&ie=UTF8&z=12&t=m&iwloc=near&output=embed';

window.open(URL,'ShowMap','width=400,height=400');

 },function(){});

 

}

return SISAccountEntryAppletPR;

}());

}

/*--------------------- Start Custom Manifest Details ----------------------*/

/*

<KEY Name="SISAccountEntryAppletPR">
<FILE_NAME>siebel/phyrenderer.js</FILE_NAME>
<FILE_NAME>siebel/custom/SISAccountEntryAppletPR.js</FILE_NAME>
</KEY>

*/

/*--------------------- End Custom Manifest Details ----------------------*/

/*--------------------- Start Extension Map Details ----------------------*/

/*

[Physical_Renderer]

SIS Account Entry Applet=SISAccountEntryAppletPR

/*--------------------- End Extension Map Details ----------------------*/

4. Restart the Application and on Hover of the "Show Map" Control google map should open as below. Remember to have an valid address to get the Map correctly.