Simple JavaScript Salesforce Validation - jSFValidation

Thursday, September 12, 2013 by Aslam - The Alexendra
Hi All,
Today I am going to give a demo for JS validation for VF pages which works mostly like native SFDC field validation. Here you can find the working demo.

Right now i have implemented the validation for "Required" type. If any text box values are empty , i am adding the error. You simply need to add the jSFValidation component and then you need to add the class "jSF_Required" on the fields you want to add validation for. In given demo, only "Mailing Country" is not required. Rest of the fields are marked for required.

You can download the code from here.

Provide your suggestions to improve this :)

Aslam Bari

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

Salesforce Remoting & jQuery Drag/Drop Mash-up

Wednesday, February 27, 2013 by Aslam - The Alexendra
Hi All,
Today I am going to show you a good useful mash-up using jQuery Drag/Drop feature with Salesforce Remoting. I have created a simple application where user can see a Dashboard where all Un-Assigned tasks are shown on left side. All available contacts will be available on right side.
Now, user can drag any task from left side list and drop on right side, for any contact. Internally the Task will be assigned to that particular Contact. This is done internally using Salesforce Remoting.
This type of applications are very convenient to use and do the work smoothly.

You can test the application here.

Here are few assumptions/points regarding above demo;

1) I have used Contacts to assign the Task but actually we must use Users
2) I have given demo for Tasks, but we can use this application for other useful things like Cases, Leads and Opportunity assignments
3) The demo actually will not update the records in database. I have commented actual database update because of demo purpose. You can only check the drag and drop and assignments.

Mail me if you need the code for above demo.

Your suggestions to improve this app , are always appreciated.

Aslam Bari

Salesforce JQuery Mobile Demo

Tuesday, February 12, 2013 by Aslam - The Alexendra
Hi All,
Here I am going to show you a demo of jQuery Mobile development which is using Salesforce Sites. Its very easy and convinient to integrate both technologies which is natively compatible with your mobile. It comes with a very cool native look and feel UI, responsive UI themes and APIs. With couple of tags you can build up your site compatible with multiple devices.

Here is a working demo. I am showing contact list from salesforce. You can search contacts. You can click any contact to see the detail.

Open web browser in your mobile phone and open the above url to see in action.

If you need source code for above, drop me an email:

Aslam Bari

Salesforce Calendar Component - SFC

Wednesday, February 6, 2013 by Aslam - The Alexendra
Hi All,
Recently I had a requirement where a client wanted to show complete year calendar on page with following requirements.

1) We can pass any year to calendar and it must print the complete year (12 month) calendar
2) It must have provision to highlight the holidays
3) It must be printed or saved or emailed as PDF also

To achieve it, i first find the jQuery UI DatePicker best fit. But there is a issue with this approach. JS does not work properly when we do RenderAs pdf in vf pages. So, this approach will not work.
Then finally I come up with my own solution by making native salesforce approach -  SFC Component. Feature for this are as below:

1) We can pass the component year and month
2) We can pass the component holidays list as well

Here is the syntax how you can use this:

<c:SFC_MonthComponent month="7" year="2013"/>

Above syntax will print July, 2013 calendar

<c:SFC_MonthComponent month="7" year="2013" holidays="25,30"/>

Above syntax will print July, 2013 calendar. In addition it will also highlight the 25th and 30th of the month as holidays

You can download the code from here:

You can see the working demo here

You can change the year parameter from url to see the calendar for different years on the above demo. For demo purpose i have highlighted few dates as holidays (orange color).

In the code, i have used some styles for printing calendar like holidays highlight. You can simply change those style to match up your theme.

The above code is for version 1. As this is native vf/apex, you can simply use "renderAs=pdf" to get the output in PDF format.

In next version , here is my plan to enhance it with following features.

1) Different preset of themes for styling the calendar component
2) Give Event feature for clicking on any date. You can do different operations on that click of any date

As always, your suggestions are welcome to enhance this tool

Aslam Bari

Simple jQuery Dependent Picklist

Friday, January 18, 2013 by Aslam - The Alexendra

Hi All,
Today I am going to show you how to make dependent picklist on visualforce page with some few lines of code. This is client side dependent list. So it has following benefits:

1) No Action Function or Ajax, means we dont need to call server side script to filter the list of records.
2) Its based on javascript so its fast
3) We can extend the level of dependency

The idea here to use jQuery and one small method to make the dependency. I have got this idea from here.
1) First make your parent select list as below

<select id="accountList" size="1"> <option value="">-Select-</option> <apex:repeat value="{!accounts}" var="acc"> <option value="{!acc.Id}">{!acc.Name}</option> </apex:repeat> </select>
2) Make your child select list. Make sure to give option a class name like this "child_{parent_record_value}".

<select id="contactList" size="1"> <apex:repeat value="{!contacts}" var="con"> <option class="child_{!con.accountid}" value="{!con.Id}">{!con.Name}</option> </apex:repeat> </select>
3) Put the below code in your head section

function prepareList(parent,child,isSubselectOptional){ $("body").append("<select style='display:none' id='"+parent+child+"'></select>"); $('#'+parent+child).html($("#"+child+" option")); $('#'+child).html("<option> — </option>"); $('#'+parent).change(function(){ var parentValue = $('#'+parent).attr('value'); $('#'+child).html($("#"+parent+child+" .child_"+parentValue).clone()); if(isSubselectOptional) $('#'+child).prepend("<option> — Select — </option>"); }); }
4) Call the below method on load of the page. Make sure to pass proper parent and child select list ids.
$(function() { prepareList('accountList','contactList', false); });

Thats it. Now you can see on the page the dependency is created automatically.

You can download the code from here

You can see the working demo here

Aslam Bari

Simple Context-Menu For Web Page

Tuesday, January 1, 2013 by Aslam - The Alexendra
Hi All,
Here I am going to give a demo for how you can make a context menu on your web page using few lines of code. Many times such web applications needed where user can do many operations on different kind of records. In that scenario making lot of buttons or checkboxes are easily avoided if you go with context menu.


How to implement Context-Menu:

1) Make your context-menu html code and put that at the end of body.

<ul id="menu" class="custom-menu"> <li><a href="javascript:alert('Clicked Add Notes');" onclick="addnote();">Add Notes</a></li> <li><a href="javascript:alert('Clicked Add Memos');" id="menu_2">Add Memos</a></li> <hr style="clear:both;color:#E6E6E6" /> <li><a href="javascript:alert('Clicked View Order');" id="menu_4">View Order</a></li> <li><a href="javascript:alert('Clicked View Invoice');" id="menu_5">View Invoice</a></li> <li><a href="javascript:alert('Clicked View Employee');" id="menu_3">View Employee</a></li> </ul>

2) Include jQuery main js file, in our case i have used jquery-1.8.3.js

3) Put below code in your head section of html file

<script> $(function() { $(".emp").bind("contextmenu", function(event) { event.preventDefault(); $("#menu").show(); $("#menu").css({top: event.pageY + "px", left: event.pageX + "px"}); }); $(document).bind("click", function(event) { $("#menu").hide(); }); }); </script>

Here #menu is Id of your html menu area, ".emp" is the class name of element on which you want to bind this context-menu on right click.

4) Give some good look to your menu, put below code in your head section style tag

<style> .custom-menu { z-index:1000; position: absolute; background-color:#FFF; border: 1px solid black; padding: 5px; list-style: none; width:150px; display:none; } .custom-menu a{ text-decoration: none; padding:5px; font-size:13px; width:100px; display:block; color:#000; } .custom-menu a:hover{ text-decoration: none; border:1px solid #ccc; background-color:greenyellow; } .custom-menu li{ margin:5px; } </style>

5) Now, design your web page and give class "emp" to the elment where you want this context menu to open.

Here is working demo:
Click the names of employee on the page, you will see the context-menu

You can download complete code here:

Let me know your thoughts

Aslam Bari