Posts Tagged ‘Script’

23 Apr 2008 7 comments so far

Inline Google Maps

Written by Alessandro on 23 Apr 2008 — Tagged with: Google, Maps, S-Controls, Script

Update 18/03/2010: There’s a newer version of this code, see how to add Inline Google Maps using Visualforce.

Many have asked me how to integrate Google Maps in a Salesforce.com page to pinpoint a specific address on the map. The example we’re going to see today is how to add an inline map to pinpoint an Account billing address.

The finished product

Here’s a screenshot of what we are going to get:
Inline Google Maps

Let’s get started

Right so, let’s see what we need:

First off you need a Google Map API Key you can obtain for free from here; it’s necessary to embed Google Maps in your own web pages. When requested to insert your website URL, enter the name of the instance you’re on, complete with https:// (e.g.: https://emea.salesforce.com/ )

Then, within Salesforce.com, navigate to Setup > Customize > Develop > S-Controls > New S-Control; specify a Label (e.g.: “Inline GMaps”), set the Type to be HTML, in the HTML Body section paste the following code (don’t forget to substitute YOUR-GOOGLE-MAPS-API-KEY-HERE with the Google Maps API Key you created in step #1), then Save.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=YOUR-GOOGLE-MAPS-API-KEY-HERE" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;

var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";

function initialize() {
if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("map_canvas"));
  map.addControl(new GSmallMapControl());
  geocoder = new GClientGeocoder();
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        document.getElementById("map_canvas").innerHTML = address + " not found";
      } else {
        map.setCenter(point, 13);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.bindInfoWindowHtml("{!Account.Name}");
      }
    }
  );
}
}
</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:100%;height:300px"></div>

</body>
</html>

Next, navigate to Setup > Customize > Accounts > Page Layouts and click on Edit next to the correct page layout (you might only have one). Click on Create New Section with Name “Google Maps”, “Single” Columns, leave the two checkboxes checked and click Ok.
Now, on the right hand side of the screen, from the View dropdown list, select Custom S-Controls; you’ll see the newly created S-Control (e.g.: “Inline GMaps”) and all you need to do is to drag and drop that component into the newly created section.
Lastly, double-click on the S-Control component now in the section: a popup window will appear. Make sure the Width (in pixels or %) is 100%, set the Height (in pixels) to 300 and untick both the underneath checkboxes.
All done! Navigate to one of your Account records and verify the map is displaying correctly!

I’m not going to analyse the S-Control line by line, with a little knowledge of HTML and JavaScript you should be able to modify it to suit your needs, but please let me know if you have any issues.

31 Jan 2007 18 comments so far

Play with Custom Links: Part 2

Written by Alessandro on 31 Jan 2007 — Tagged with: Custom Links, Formulas, Script, URLs

In my last post I explained how to build a simple web custom link; more complex custom links can be used to pass data from your Salesforce records, user information, or company information to another website or application; it can also be used to pass variables from one Salesforce object to another.

Let’s see how to create a custom link to pass fields values from a Salesforce object to another.

Scenario

We give support to different companies and accordingly to what kind of support type a company has, their cases have to be handled differently. We’ve created a custom field for the Account object called Support Type, of type Picklist, containing the variables: “Silver, Gold, Platinum“; we created the same Support Type field for the Case object, same type, same picklist values. We now need to create a custom link in the Account object so when we click on it, we get redirected to a Case page where Account Name and Support Type are filled accordingly to the values present on the Account record.

How to proceed – a step by step guide

First of all we need to find out where in the Case record page our values are going to be “written” to; we basically need to find out the ID of the HTML INPUT fields: Support Type and Account Name.

UPDATE: In order to find a field’s ID please check this post

Let’s now move to: Setup > App Setup > Customize > Accounts > Buttons and Links, click on the New button, specify a Label (eg: “New Case”), the Name will be filled in automatically, select the Display Type, the Behavior, make sure the Content Source is URL.

We’re now about to start writing our custom link; the last thing we need is the Object’s code for the Case object: 500 (where did I get this from? Did you read all the old posts? ).

Our custom link will start with: /500/e? which points to the edit page of a new case record.

Now we can pass the variables: cas4, the ID of the Account Name INPUT field in the Case object, will have to contain the actual account name, so we can write cas4= and select Account Name from the Insert Field drop-down list. This will automatically insert {!Account.Name}.
So far we have:
```
/500/e?cas4={!Account.Name}
```
We have to add an & (ampersand) within the variables.

00N20000000thpg, the ID of the Support Type INPUT field in the Case object, will need to contain the value of the selected account’s Support Type field, so we can write 00N20000000thpg= and select Support Type from the Insert Field drop-down list. This will automatically insert {!Account.SupportType__c} in the textarea. So far we have:
```
/500/e?cas4={!Account.Name}&00N20000000thpg={!Account.SupportType__c}
```
Doesn’t it look good? And it’s almost complete. We can add a retURL to point the user back to the account’s page when the case is saved. Just add retURL=/{!Account.Id} and we’re done! All together!:
```
/500/e?retURL=/{!Account.Id}&cas4={!Account.Name}&00N20000000thpg={!Account.SupportType__c}
```

This should give you an idea of how a custom link works. I hope I’ve been clear enough, if you have any question, just add a comment.

16 Jan 2007 3 comments so far

Play with Custom Links: Part 1

Written by Alessandro on 16 Jan 2007 — Tagged with: Custom Links, Formulas, Script

From Salesforce’s Help&Training: “Your organization’s Administrator can set up Custom Links for Home, Campaigns, Leads, Accounts, Contacts, Opportunities, Cases, Contracts, Solutions, Products, Assets and Users. These Custom Links allow your organization to link salesforce.com data with your back-end office systems. They can be directed to external URLs or to your company’s intranet. In addition, the administrator can specify fields to be included as tokens within the URL. For example, you could include an account name in a URL that searches your accounts-payable system“.

These “tokens” are normally called Merge fields; “Merge fields serve as placeholders for data that will be replaced with information from your records, user information, or company information“.

Suggested trainings

A simple web custom link

We can create a simple custom link to search on google.com for an account name:

http://www.google.com/search?q={!Account_Name}

where:

http://www.google.com/search?q= is the URL we use to search on google;
{!Account_Name} is the merge field for the account name.

We are ready now to create the custom link, so login to your Salesforce organization and:

Click on: Setup > App Setup > Customize > Accounts > Buttons and Links > New
Specify a Label (eg: “Google Account Name”)
The Name will be auto populated
Select the Display Type
Select the Behavior
Make sure the Content Source is URL
Copy&paste the custom link:
http://www.google.com/search?q={!Account_Name}
Click Save

You can display all the available Merge fields by selecting the Object in the Select Field Type picklist, and the relative field in the Inster Field picklist.

The Link URL you enter can be up to 3000 bytes. When data is substituted for the tokens in the URL, the link may exceed 3000 bytes. Your browser may enforce additional limits for the maximum URL length. Maximum URL Length is 2083 Characters in Internet Explorer, not sure about Firefox, definitely more than 65536.

Update: the 2nd part of the tutorial is available here.

Page 3 of 4«1 234 »

Decoding Salesforce