Hire Us

Visualforce PageMessage Samples

by | Nov 24, 2017 | Apex, Visualforce

I can never remember what the different Visualforce page message options look like between the severity and strength so here are the options along with the code.

<apex:page title="Visualforce pageMessage Samples"> 
<apex:form > 
<apex:pageMessage title="Message Title" summary="Strength:0, Severity:Confirm" strength="0" severity="confirm" /> 
<apex:pageMessage title="Message Title" summary="Strength:1, Severity:Confirm" strength="1" severity="confirm" /> 
<apex:pageMessage title="Message Title" summary="Strength:2, Severity:Confirm" strength="2" severity="confirm" /> 
<apex:pageMessage title="Message Title" summary="Strength:3, Severity:Confirm" strength="3" severity="confirm" /> 
<apex:pageMessage title="Message Title" summary="Strength:3, Severity:Info" strength="3" severity="info" /> 
<apex:pageMessage title="Message Title" summary="Strength:3, Severity:Warning" strength="3" severity="warning" /> 
<apex:pageMessage title="Message Title" summary="Strength:3, Severity:Error" strength="3" severity="error" /> 
</apex:form> 
</apex:page>

Visualforce Date Popup

by | Apr 10, 2017 | Visualforce

If you work with Visualforce and the first field on your page is a date you’ll notice that when the page loads it’ll automatically open the date picker which is often not desirable. To fix this simply place this Javascript on your page:

<Script>
function setFocusOnLoad() {}
</Script>

Add Embedded Google Maps on Leads, Accounts, and Contacts

by | Jul 29, 2014 | Salesforce Tips, Visualforce

Here’s how we can get a very nice looking Google map tied to the current Lead, Account, or Contact that you are currently viewing.

 

Saleforce Google Map 1

First create a new Visualforce page (Setup > Develop > Page) for each of the types, here is the code for each:

Leads:

[html]
<apex:page standardController="Lead">
<apex:pageBlock >
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

var myOptions = {
zoom: 20,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true
}

var map;
var marker;

var geocoder = new google.maps.Geocoder();
var address = "{!Lead.Street}, " + "{!Lead.City}, " + "{!Lead.Postalcode}";

var infowindow = new google.maps.InfoWindow({
content: "<b>{!Lead.Name}</b>"
});

geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);

//center map
map.setCenter(results[0].geometry.location);

//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Lead.Name}"
});

//add listeners
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow, ‘closeclick’, function() {
map.setCenter(marker.getPosition());
});

}

} else {
$(‘#map’).css({‘height’ : ’15px’});
$(‘#map’).html("Oops! {!Lead.Name}’s address could not be found, please make sure the address is correct.");
resizeIframe();
}
});

function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}

});
</script>

<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:500px;
background:transparent;
}
</style>

</head>

<body>

<div id="map"></div>

</body>
</apex:pageBlock>
</apex:page>
[/html]

Accounts:

[html]
<apex:page standardController="Account">
<apex:pageBlock >
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

var myOptions = {
zoom: 20,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true
}

var map;
var marker;

var geocoder = new google.maps.Geocoder();
var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalcode}";

var infowindow = new google.maps.InfoWindow({
content: "<b>{!Account.Name}</b>"
});

geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);

//center map
map.setCenter(results[0].geometry.location);

//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Account.Name}"
});

//add listeners
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow, ‘closeclick’, function() {
map.setCenter(marker.getPosition());
});

}

} else {
$(‘#map’).css({‘height’ : ’15px’});
$(‘#map’).html("Oops! {!Account.Name}’s address could not be found, please make sure the address is correct.");
resizeIframe();
}
});

function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}

});
</script>

<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:500px;
background:transparent;
}
</style>

</head>

<body>

<div id="map"></div>

</body>
</apex:pageBlock>
</apex:page>
[/html]

Contacts:

[html]
<apex:page standardController="Contact">
<apex:pageBlock >
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

var myOptions = {
zoom: 20,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true
}

var map;
var marker;

var geocoder = new google.maps.Geocoder();
var address = "{!Contact.MailingStreet}, " + "{!Contact.MailingCity}, " + "{!Contact.MailingPostalcode}";

var infowindow = new google.maps.InfoWindow({
content: "<b>{!Contact.Name}</b>"
});

geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);

//center map
map.setCenter(results[0].geometry.location);

//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Contact.Name}"
});

//add listeners
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow, ‘closeclick’, function() {
map.setCenter(marker.getPosition());
});

}

} else {
$(‘#map’).css({‘height’ : ’15px’});
$(‘#map’).html("Oops! {!Contact.Name}’s address could not be found, please make sure the address is correct.");
resizeIframe();
}
});

function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}

});
</script>

<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:500px;
background:transparent;
}
</style>

</head>
<body>

<div id="map"></div>

</body>
</apex:pageBlock>
</apex:page>
[/html]

Then you’ll want to go to the page layout for each of the objects.  Create a new section that’ll hold the map.

Salesforce Google Map 2

Then add the Visualforce page to that section.  You can adjust the size of the map by changing the settings of the Visualforce page by using the wrench icon after it’s been dropped onto the layout.

 

Salesforce Google Map 3