Welcome! Wikis are websites that everyone can build together. It's easy!

Mashup your CRM with Google maps in < 30 minutes

Overview

Hello, what if you wanted to show your customer this?

Google Mashup

What if it did not require a single line of code????? What - don't believe? Then read on....

This shows Siebel’s ability to use portal integration capabilities to send contextual information to an external Web site and display the (rather interesting) user interface content inside of Siebel.
Of course, as you move from Account record to record, the map will update with the appropriate information. This article will explore the underlying architecture to this and go through a working example of how to set this up inside of Tools.

[-------------- skip this section if you don't want the theory-------------------------]

Configuration versus Symbolic URL.

There are a couple ways to do this. Technically this can be done by creating a Symbolic URL in one of the administration screens. However, even though a Symbolic URL can be driven from fields in a business component, in our case, we need a combination of fields, which means there is configuration work. Additionally there is configuration work anyways to create the calculated fields in either scenario, and expose them on an applet. Plus, we need a new applet web template anyways, so, it was just much easier to keep it all in Tools.


Architecture

Simple UI Architecture


Let’s explain the architecture here, from the bottom up:

SWT File – we need to create a new physical Siebel web template file that contains only a control placeholder
Google Web Template – simply a Tools object which points to the new SWT file
Google Maps Applet – uses the Google Web Template object, and is based on new fields from the Account buscomp
Account BusComp – new fields are added here to create an HTML tag which points to the Google URL dynamically based on Address

Then finally we need to create a view, modify a screen, and update responsibilities, but that’s all regular Siebel and is not included here.

Let's get started ....

Step 1: Create New Siebel Web Template (SWT)

We need to actually create a new Siebel Web Template because there are no templates that exist out-of-the-box which simply contain a placeholder for a single Applet Control. There’s always some other junk in there for formatting or what-have-you. So:

Open up Notepad
Enter in the following text:
<swe:control id="999"><swe:this property="FormattedHtml" /></swe:control>
Save the file as “SingleControl.swt”, into the client/webtempl or siebsrvr/webtempl folder
If you want to be able to see this template in Tools, save it to tools/webtempl as well

Now we have a physical Web template that will take up the maximum amount of space possible. Also, remember the number 999, we’ll need to use that later on as our Item Identifier.

Step 2: Create Web Template Object in Tools

Just like any other metadata, we need to create an object to use our template:

In Tools, create a new Project called “Google Maps” and lock it
Select the Web Template object
Create a new record:
Name = Single Control Template
Project = Google Maps
Type = Applet Template – Form
For the Web Template File child object, create a new record:
Name = Name
Filename = SingleControl.swt


Step 3: Add Some Fields to a Business Component

Create a field in the Account business component (for this example) that will have this value format:

http://maps.google.com/maps?q=45%20dunfield%20avenue,%20toronto,%20ontario,%20canada

We do that with Calculated Fields. First note that within the Account BC, we have the following fields at our disposal:

Street Address
City
Postal Code
State

Change the project of the Account BC to “Google Maps”. Let’s use these fields while putting together our new Calculated Field. Create a new calculated field called “Google Address” with the following Calculated Value:

[Street Address] + ", " + [City] + ", " + [Postal Code] + ", " + [State]


We’ve added in spaces and commas between the fields to create a buffer between variables, and increase probability of hits.

Now we need to create another Calculated Field called “Google Map” that uses this one. Make sure to include the double quotes as seen below:

"<iframe src='http://maps.google.com/maps?q=" + [Google Address] + "' width='100%' height=650>"

This is just a simple IFrame, but we are dynamically referring to the current address values of the Account BC so it is in fact pretty powerful. We now have a fully functioning Calculated Field and simply need to go through the exercise of exposing it on an Applet.

Step 4: Create Applet

Time to create an applet that uses this field:

In Tools, select File > New Object
Select the Applets tab
Choose Form Applet
Project = Google Maps
Name = Google Map Applet
Title = Google Map
BC = Account
Uncheck the Grid Layout box, and click Next
Select “Applet Form 1 Column (Base/Edit/New)” for the Base Mode only
Click Next
The only field you should select is “Google Map”
On the next page, move all controls over to the left-hand side
Click Next and Finish

Note: Remember to create a symbolic string for your new text entries (e.g. Google Map)

Now shut down the Applet Layout Editor – we need to change some Control properties and some Applet Web Template properties as well.

Find the applet control
Change “HTML Display Mode” to DontEncodeData
Locate Applet Web Template object
Change Web Template to “Single Control Template”
Locate Applet Web Template Items
Change the Item Identifier to 999

Now we’ve ensured that the HTML will render correctly and is mapped to the correct placeholder in our template.

Step 5: Create View & Modify Screen

We need a new Account detail view, so, copy the view “Account Detail - Contacts View”, then do the following to the new view:

Name = Account Google Map View
Project = Google Maps
Under View Web Template Items:
For Applet with Identifier 2, change the Applet & Name properties to “Google Map Applet”
Applet Mode = Base

Now, we need to add the view to the Accounts Screen – create a new Screen View record:

View = Account Google Map View
Type = Detail View
Sequence = 8
Parent Category = Account List
Display In Page = TRUE
Viewbar Text – String Override = Google Map
Menu Text – String Override = Google Map

Make sure to change the Screen project to the new one. Compile this project to the correct SRF, as we are done modifying Design-Time objects.

Don’t forget to add the new view to the administration screen and give a responsibility to the right users. I will leave this as an exercise.

Note: turn off the message broadcast bar (at the bottom of the screen) as this affects the UI when the applet is displayed. You get the old black and white TV image with a rolling screen.

Closing Remarks

Let’s recap. The goal here is to show a Siebel Google Mashup – but it really demonstrates the flexibility of Siebel to embed any content.

1. Display an external Web site inside of the Siebel GUI
2. Do it in a way that is contextual to the Siebel data currently on the screen
3. Without any script



Extra Credits


Imagine that you are setting up a customer meeting. You know the general location of the customer – but perhaps you want to get directions for a customer meeting.

Get directions (yawn... OK this is simple...)

Follow the steps above, but in step 3, use the following URL:

"<iframe src='http://maps.google.com/maps?f=d&hl=en&saddr=1 Market Street, San Francisco, CA&daddr=" + [Google Address] + "' width='100%' height=650>"

(Note; I have hardwired the starting address here – but this you can configure to be the HQ of the customer or the employee address).

That's better - find some food .... and beer ... we like beer...


We can clearly do more that just get directions and find nice restaurants. With the brilliant work the Google has done with Google Earth and KML - we can now start to overlay information on the map, such as sales targets or a salesperson's territory. I'd recommend reading some of the Google Maps mashups books (with Rails for example)to get more insight into the kinds information that you can convey and visualise on a map.

Have fun....


Latest page update: made by dipdastardly , May 9 2008, 6:27 PM EDT (about this update About This Update dipdastardly Rename - dipdastardly

No content added or deleted.

- complete history)
Keyword tags: mashups Web 2.0
More Info: links to this page

Anonymous  (Get credit for your thread)


Started By Thread Subject Replies Last Post
GeorgeMitchom Refresh 3 Jun 24 2008, 12:26 PM EDT by dipdastardly
Thread started: May 12 2008, 11:59 AM EDT  Watch
This is a nice demo. However, using the steps above the address does not refresh when moving to another account record. Did you also find that to be the case?

Thanks,
George Mitchom
Do you find this valuable?    
Keyword tags: mashups Web 2.0
Show Last Reply

Related Content

(what's this?Related ContentThanks to keyword tags, links to related pages and threads are added to the bottom of your pages. Up to 15 links are shown, determined by matching tags and by how recently the content was updated; keeping the most current at the top. Share your feedback on Wetpaint Central.)
Top Contributors