White Paper

Open UI Modification
Duncan Ford January 2013

Google Map API Integration

Contents
Disclaimer...................................................................................................................................................... 3
Outline .......................................................................................................................................................... 3
How It Works ................................................................................................................................................ 4
The Details & Installation .............................................................................................................................. 4
Import SIF .................................................................................................................................................. 4
Expose Applet on Existing View ................................................................................................................ 4
Ensure Field Exists on BC .......................................................................................................................... 4
Compile Changes....................................................................................................................................... 5
Place New Web Template ......................................................................................................................... 5
Place Custom PR Code .............................................................................................................................. 5
Place markerclusterer.js ........................................................................................................................... 5
Inform Siebel of Location of New Code .................................................................................................... 5
Inform Siebel to Use New Code ................................................................................................................ 5
Test............................................................................................................................................................ 6
Limitations .................................................................................................................................................... 6

White Paper Google Map API Integration

Disclaimer
This document is provided as-is with no promise of support. Your mileage may vary.

Outline
This white paper details a basic integration between Siebel Data and the Google Map API to integrate a
fully usable Google Map into Siebels UI. This is how the integration looks:

In this example, addresses are plotted on the map and then clustered depending on the size of the map.
This screenshot shows account addresses being mapped, but it is not limited to this use. Anywhere an
address (or lat,long) is available, a map can be generated based on that data. Some other interesting
uses might include:
Assets
Quote Line Items for complex network orders
Activitys lat long captured coordinates (i.e. location someone took a photo and attached it to an
SR)
Walk Routes or Activity routes for todays work or meetings
White Paper Google Map API Integration

How It Works
Looking at the screenshot once more, what we are essentially seeing is exactly the same data rendered
in two different ways. The top list applet uses the standard ListPR to display the data in the jQuery Grid
control. The bottom applet is still a list applet, but uses a custom PR to take the records in the list applet
and send the address information to Google for geo-coding and plotting.
An IFRAME is used to keep the Google Map HTML and functionality separate from the Siebel OUI
Framework. This is important and is done in order to isolate the behavior of the two systems.
As a result of both applets being based on the same BC, records added to the list applet at the top are
automatically added to the list applet at the bottom, causing the map to move in accordance with the
new data. The same thing happens during deletes and queries and as we move through the list of
records. We get this behavior essentially for free from the OUI framework.

The Details & Installation

OK. You got this far. Youre ready to install. Heres what to do next.
The zip file this document came in contains three files. One is a SIF file containing an Applet and a Web
Template. The next file contains the file for the Web Template. Then we have the custom physical
renderer which takes addresses, geo-codes, and plots them. The final file is a copy of the marker
clustering library.
Lets step through the configuration of your environment to leverage this new capability.

Import SIF
Import the SIF without fear. It contains a single Applet that almost certainly doesnt exist in your
environment already. Its called Account Address Google Map API Applet. In addition, a new Web
Template is added called Applet List No Menu. Its possible this may exist in your system already, but
unlikely.

Expose Applet on Existing View

Add the applet to an existing view; e.g. using the view Account Detail - Business Address View will
duplicate the example image in the Outline section of this document.

Ensure Field Exists on BC

The custom PR assumes that the field containing the address will be called Full Address. If you use the
imported applet above as is (i.e. without changing the BC), then you need take no further action. If
however you wish to use the map elsewhere in the system, ensure that the BC from which the applet

White Paper Google Map API Integration

pulls address data has a field called Full Address. See the CUT Address BC for a typical definition for this
field:

Compile Changes
Thats all of our changes in Tools complete. Next compile the following objects:
Applet: Account Address Google Map API Applet
Web Template: Applet List No Menu
View: Account Detail - Business Address View

Place New Web Template

Copy the file CCAppletList_No_Menu.swt and place it in client/webtempl/ouiwebtempl/custom.

Place Custom PR Code

Copy the file googlemapapipr.js to client/public/enu/<build>/scripts/siebel/custom.

Place markerclusterer.js
Copy markerclusterer.js to client/public/enu/<build>/scripts/3rdParty. You could also get this file
directly from Google here
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/

Inform Siebel of Location of New Code

The next step is to tell Siebel how to get the new code. To do this we edit the custom_manifest.xml file
in client/objects/custom_manifest.xml and add a new section to the desktop platform section.
<PLATFORM_KEY_SPECIFIC>
<PLATFORM Name="Desktop">
<KEY Name="GoogleMapApiPR">
<FILE_NAME> siebel/jqgridrenderer.js
</FILE_NAME>
<FILE_NAME> siebel/custom/googlemapapipr.js
</FILE_NAME>
</KEY>
The highlighted key gives Siebel a reference, which well use in the next step. Note that an additional file
is also referenced - jqgridrenderer.js. This is because the code in googlemapapipr.js extends the
functionality defined in that file.
Note that markerclusterer.js is loaded due to the code in the custom PR and not as a result of the
manifest.

Inform Siebel to Use New Code

At this point, Siebel knows where the new code is, but not when to use it. To do this, we use the
manifest_extensions.map. In addition to any other entries you have in there, add the following entry:
White Paper Google Map API Integration

[Physical_Renderer]
Account Address Google Map API Applet = GoogleMapApiPR

Test
Finally clear the cache and restart the application. You should now be able to navigate to the view you
altered and see the addresses being mapped.

Limitations
At present, all markers are identical. It would be a simple matter to extend the solution so that the BC
also contained a calculated field to determine the icon to use on the map. This can then be passed to
the map whilst adding the markers.
As this utilized Googles online facilities, Google must be visible to any client machines using this
extensions.
At present, the integration uses anonymous access to the Google API v3 library. This limits usage to the
request IP to 15,000 per day. If this were to be widely deployed in an organization, its likely that the
organization would need to sign up to Google for an enterprise account, which will then grant more
access.
Integration uses Chrome to achieve good looking integration; in particular the curved edges to the map
so that it fits in with the Siebel Open UI design. This has not been widely tested on other browsers, but it
is not expected to work on all browsers or look quite as good as on Chrome without some attention. The
styles for the map are inline styles defined in the custom PR.
Resizing is working if the browser is increased in size, but not if it is decreased in size.

White Paper Google Map API Integration