Salesforce, Google Map 3 and jQuery with Clusters

Monday, March 18, 2013 by Aslam - The Alexendra
Hi All,
In past i have posted one blog regarding google map, using jquery and google map version 2. Now since, google have version 3 so i have upgraded my plugin with latest version and also used more featured jquery plugin i found which is gMap3. You can check it here:

I recommend you first refer my earlier version of google map component here:

I used this jQuery plugin and implemented my own new version of sfGmap, called sfGmap3

 This component has all features like previous component but have one more new feature called Clusters. You can turn On and Off this feature in my component using attribute "useCluster".

Here is a basic usage of this component:
<c:sfgmap3 addressmodel="{!addressmodel}" height="500px" usecluster="true" uselatlng="false" width="100%" zoom="2" />

I used this plugin and created one demo to show historical places in Rajasthan. Thanks to my collegue Rajendar Rathore, who helped me to make database for these places which included lat, long, pictures etc. Here the link for online demo:

You can see each cluster is identified by a image, i used Camel image. Once you zoom in, you will keep go inside the cluster and finally you can find the actual place. You can click on each marker and you can find a info window containing image of that place and name like below.

Hope you will like it. Mail me for full code of this demo and let me know suggestions to improve it as always.

Aslam Bari

Extend Salesforce Rich Text Editor as Multi-Purpose

Sunday, March 10, 2013 by Aslam - The Alexendra
Hi All,
Recently one of client wants some enhancement to existing 'Send Email' screen. They want some functionalities which standard email editor does not support and even salesforce Rich Text Editor also does not support.
I did some research and found that we can extend standard salesforce Rich Text Editor in many ways. One of the enhancement which I did, I am going to show you all.

Client wants a way to fetch all related contacts and opportunities from current account in the email editor on the place he wants and editable and also wants to control as many times as he needed. To achieve this task, I came up with the custom button solution which can be embedded into standard Rich Text Area of salesforce and can attach some event handlers to them.

I created one component called "AddButtonToolbar". In this component, for demo purpose i have created two custom buttons for showContacts and showOpportunities. But you can make as many as you want. Here is the basic configuration you can do:

<apex:component> <apex:attribute name="accountId" type="string" description="passed account id"/> <script src="{!URLFOR($Resource.ckeditor,'ckeditor/jquery-1.4.2.min.js')}"></script> <script> //Event Handler for ShowContacts button //Fetch and prepares the contact table in editor function showContacts(){ // invoke your sfdc method here } //Event Handler for ShowOpportunities button //Fetch and show the opportunities in RTE function showOpportunities(){ // invoke your sfdc method here } /**** Custom buttons configuration Provide name, label, command (js function), and Image for the button */ var config = { "Buttons": [ { "Name" : "Contacts", "Label" : "Show Contacts", "Command": "showContacts", "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/16-cube-green.png')}" }, {"Name" : "Opportunities", "Label" : "Show Opportunities", "Command": "showOpportunities", "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/contact.png')}" } ] } function initialize(){ for(var i=0; i<config.Buttons.length;i++){ addButton(config.Buttons[i].Name, config.Buttons[i].Image, config.Buttons[i].Command, config.Buttons[i].Label); } } function addButton(name,image,command,label){ $('#cke_21').append('<span class="cke_toolbar_start"></span>'+ '<span role="presentation" class="cke_toolgroup">'+ '<span class="cke_button">'+ '<a onclick="'+command+'();" onblur=" =;" role="button" hidefocus="true" title="'+label+'" class="cke_button_outdent cke_disabled" id="'+name+'" aria-disabled="true">'+ '<span class="cke_icon" style="background-image:url('+image+');background-position:center;">&nbsp;</span>'+ '<span class="cke_label" id="'+name+'">'+label+'</span>'+ '</a>'+ '</span>'+ '</span>'+ '<span class="cke_toolbar_end"></span>' ); } var defaultFunc = window.onload; window.onload = function() { if(defaultFunc) defaultFunc (); setTimeout("initialize()",1000); } </script> </apex:component>

Line #21-#35 shows configuration option for your buttons.
initialize() method starts creating the buttons.

Here is a working demo for above functionality:

You will see two buttons on right side. Click on those buttons to see things in action.

Additionaliy you can put your email address and try to send email to your account to see how email will look.

Mail me for full code as always :)

Aslam Bari