Already a member?
Sign in
Mashup your CRM with Google maps in < 30 minutes
Overview
Hello, what if you wanted to show your customer this?

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

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.

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).

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....
Hello, what if you wanted to show your customer this?
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
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.
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).
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
Rename
- dipdastardly
No content added or deleted.
- complete history)
Rename
- dipdastardly
No content added or deleted.
- complete history)
More Info: links to this page
| 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 |
||||
