Integrate Google maps in < 30 minutes

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

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