SF Uploadify: File Uploading Utility for Salesforce

Tuesday, September 13, 2011 by Aslam - The Alexendra
Hi All,
I have created a very cool file uploading utility which can be integrated with any system, but mainly I focused on Salesforce. This utility is built using Uploadify Tool and PHP integration. You can find more info about Uploadify here. It supports multiple file uploading with progress bar and uploads the file to your external server (php server where your site or this utility is hosted.) Then it makes the Attachment record in salesforce and links to actual file on server. So you can directly (natively) access your files.


How it works:

  1. User opens any record in salesforce , lets say "Account" record.
  2. There will be a custom button (given in below code), user clicks on button
  3. One file uploading screen opens, click on 'Select Files" button and select multiple files at same time (using control button)
  4. As soon as, user select and close dialog, it starts uploading files with progress bar
  5. The files will be stored on the Server where this utility exists, for now it saves to my server.
  6. It will show finally a screen with close button.
  7. Click on close button , it will refresh the parent window (if not, manually refresh the parent record)
  8. Open the attachments section, you will find the new files (attachments created, which actually a link for actual files on the server)
  9. Click on any file and click on "View" link.
  10. And you will see it opens your uploaded actual file :)

More Details and Updates on my site:
http://www.aslambari.com/sf_uploadify.html

Installation:
1) Button code:
Make one custom button (detail screen button), on any object, for example , account object, see below code.
a. Behavior must be "Open in new window"
b. Content Source will be "URL"
The url for the button will be as below

http://labs.aslambari.com/sf_file_uploader/sf_setup_uploader.php?sessionid={!$Api.Session_ID}&serverurl={!$Api.Partner_Server_URL_220}&recordid={!Account.Id}

2) Utility Code:
The utility is on my server for now, it is in BETA, once all is tested and working , i will make it public :)

Note: For commercial use this tool, you first need to go to Uploadify site and check its license type if any. Because my tool uses the Uploadify internally.

See the screen cast how it works:
http://screencast.com/t/ibDqgMBbfQ

Hope you will like it. :)

Thanks
Aslam Bari

Heat Map using Google Map in Salesforce

Saturday, September 10, 2011 by Aslam - The Alexendra
Hi All,
Recently i came across for one requirement with my client where he wants to see density of his shops across US. For example he has a lot of branches of his coffee shops across US like in CA, TX, MB etc. He want to see a good way on map to see density of his branches. I found the way how to show this, this type of maps are called HeatMaps.

Heat Maps are used to show density of your prouduct, services and any useful information on Geaographical area, based on your addresses.




The another example may be like, i want to know Starbucks shops across the US and want to know which area has density (number of shops) more.
So, i created one example in Salesforce VF page to show, how we can make it.

1. Copy paste below code in your VF page

<apex:page showHeader="false" sidebar="false">
<script src="http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=86123b76-2190-4a4b-b182-86e7199b0406" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA09SA9e7gW5A4Mpy3VCJQjxQfiV3Wc4AiuMkI_RwI0dk2dVyy7hQWusr2PE1VCubWNkTco2njprfSxg" type="text/javascript"></script>

<script src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js" type="text/javascript"></script>
<script type="text/javascript"
src
="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var m = null;
var batch = "";
var myHM = null;
var request = GXmlHttp.create();
var TOTAL_COUNT = 0;
var INDEX = 0;
function loadGoogle()
{
if (GBrowserIsCompatible())
{
m
= new GMap2(document.getElementById("map"));
m.setCenter(
new GLatLng(38.5, -95.8), 3);
m.setUIToDefault();
initHeatmap();
}
else
alert(
'Your Internet browser is not compatible with this website.');
}



function initHeatmap()
{
// Heatmap Scripts
try
{
myHM
= new GEOHeatmap();
myHM.Init(
400, 400); // Must be same as map size, or same ratio
addMarkersFromXml();





}
catch(e)
{
alert(e);
}
}

function addMarkersFromXml(){

request.open(
'GET', '/apex/data', true);
request.onreadystatechange
= function() {
//alert(request.readyState);
if(request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.getElementsByTagName("store");
TOTAL_COUNT
= markers.length;
INDEX
= 0;
for(var i=0; i < markers.length; i++){
var state = markers[i].getAttribute("state");
var density = "1";//markers[i].getAttribute("density");
geocoder = new GClientGeocoder();
var address = state;
geocoder.getLatLng(address,
function(point) {
if (!point) {

}
else {
fullVal
= point.lat().toFixed(5) + "," + point.lng().toFixed(5) + "," + density + ",";
batch
+= fullVal;
INDEX
++;
if(INDEX >= TOTAL_COUNT){
startMap();
}
}
});
}

}
}


function startMap(){
document.getElementById(
"HMMapdata").value=batch;
myHM.SetData(batch);
myHM.SetBoost(.
5); // Optional, see documentation
myHM.SetDecay(0); // Optional, see documentation
//var proxyURL = "http://localhost/proxy.php";
//myHM.SetProxyURL(proxyURL);
var preUrl = myHM.GetURL();

// Now render in our Google Map
var heatmapOverlay = new HMGoogleOverlay(preUrl);
m.addOverlay(heatmapOverlay);
}
request.send(
null);

}





</script>

<apex:sectionHeader subtitle="Heat Map using Google Map" title="Aslam Bari (http://www.aslambari.com)"/>
<body onload="loadGoogle();">
<input type="hidden" id="HMMapdata" />
<input type="hidden" id="HMImageURL" name="HMImageURL"/>
<div id="map" style="width:400px;height:400px;"></div>
</body>
</apex:page>



2. Create another page called "data" and copy paste below code in that. Note: this page contains the addresses of your shops, offices etc which we want to see as density. So, change accordingly

<apex:page sidebar="false" showHeader="false" contentType="text/xml">
<stores>
<store state="IN,US"></store>
<store state="KY,US"></store>
<store state="WA,US"></store>
<store state="MB,US"></store>
</stores>
</apex:page>


Note: you need to go http://www.heatmapapi.com to get new Free API key and also for google free api key to get your code work.

Here is the working example of this. Click to see.
http://labsprojects-developer-edition.ap1.force.com/HeatMapExample

Hope you will need this sometime in your project.

Thanks
Aslam Bari

Make Firefox wise to remember Salesforce Credentials

Saturday, September 3, 2011 by Aslam - The Alexendra
Hi All,
I am back after a long break :). Today i want to share a good trick which help me to save my time in many ways. Thanks to my friend (Abdul Vahid) who given me hint for that.

Problem:
Most of you (developers) are aware that these days salesforce has disabled the remember password functionality. It does not save or prompt to save any password when you login to the org. It is very hectic to maintain some external doc or sheet for passowrd , for a developer who work and develop in many orgs. For example i work in 20 orgs (sandbox, production) some times. I maintain a separate doc to look and find password whenever i need to work in a org. That takes time and sometimes not easy.

Solution:
So here is the solution trick :)
  • Find out where you installed your firefox and go to Components folder. My location is like this "D:\Mozilla Firefox\components".
  • Find the "nsLoginManager.js" file and open this in any editor. Before doing this you need to close all instances of firefox.
  • Find out following line of code and comment it. I found it near line #805.

Before comment
_isAutocompleteDisabled : function (element) {
if (element && element.hasAttribute("autocomplete") &&
element.getAttribute(
"autocomplete").toLowerCase() == "off")
return true;

return false;
},




After comment
_isAutocompleteDisabled : function (element) {
//if (element && element.hasAttribute("autocomplete") &&
// element.getAttribute("autocomplete").toLowerCase() == "off")
//return true;

return false;
},



Save the file and start your firefox again.

(Note: The above steps given for Firefox 3.6 version. In other version it may differ)

Now see, whenever you try to login with username/pwd. Firefox will ask (prompt) you about "remember" password feature. Once you click on "Remember". It will save your username/password for your org. Next time when ever you try to login using your username, it will auto fill password like old days :)

Now, i do not need to maintain any external password doc. Isn't it cool :)


Thanks
Aslam Bari