Communication between Lightning Component and VisualForce

I have been playing with lightning components. Now it has confirmed that Salesforce is going to use only lightning and will provide most of its features via lightning experience. So how can we move from visualforce to lightning. Visualforce and lightning components uses different design methodologies MVC vs MVCC. So its not very easy to get migrated from visualforce to lightning once. There is a hope, salesforce has provided lightning out by which we can add lightning component in visualforce page. Isn’t that great? So we can start building lightning component and start including it in visualforce and gradually replace visualforce with lightning.

But in this migration process we would have some functionality in visualforce and some of the functionality in lighting. Now here we would want that visualforce should be able to communicate with lightning components and lightning components should be able to communicate with visualforce page. By this there are limitless possibilities of mashup of lightning components with visualforce.

Here below code demonstrates how lightning event model could be used to have communication between visualforce component and lightning component.

Code for LightningOutExampleController

Code for LightningOutExample component:

Code for LightningOutExampleController.js

Code of lightning out events:



Visualforce page:

In the code you can see we have used lightning event model to call methods from visualforce which are in lightning and vice versa.

I tried to have this as demo by exposing this page on site but unfortunately lightning out is currently not supported on pages hosted on public site.

This code is also present on public repo which you can check:


Now you can experiment with lighting components in visualforce and create awesome implementations.


Code Comparison Utility

What happens when the code gets pushed to production which you don’t want to. Crisis !!!. This normally happens when developer A works on some file and developer B make changes to same file (mostly for bug fix/new req). So developer A thinks that only he had worked on the file and it is safer to move changes to production but when page is pushed to production unexpected things starts because of unwanted changes being pushed to production. How such situations can handled? Before any code movement to production comparing the code copy from Sandbox with Production. There are good tools available to do that like WinMerge,SVN, Eclipse inbuilt code comparison. This takes time to take fresh copy from sandbox and production and then comparing to find out which changes are getting pushed. I normally do this code comparison before moving any code to production. Being a lazy person sometimes I skip comparison because it takes time (most precious commodity :P). So to make this process faster I have used tooling api to make things automated. Here is the page developed which takes Source org (Sandbox) and Target Org (Production Org) credentials for signing in. Once you are logged in, it provides list of metadata components (currently ApexClasses,ApexPages and Triggers) to select. On selection of component it pulls the fresh code from both the orgs and gives a code comparison.

For comparing code I have used this awesome library Mergely created by Jamie Peabody Github repo :

Here is the demo url :

You will be able to see code comparison in below manner:compare

Here left panel would be Target org (Production) and right panel would be source org (Sandbox)

Source code:

1. Controller

2. Page

If you find this utility useful, please comment and let me know your views/suggestions on it.

Salesforce Integration with external Systems

In Salesforce for integrations before deciding on any approach ask yourself following questions so that you can make a better decision about an approach.

A. What is expectation of response. Is it instantaneous or can user wait? If user can wait then what is the threshold value for which user will wait?
Why: 1. If the response is returned in the same call then its very good, but if is giving request identifier then for fetching results you will need Schedulable batch option which can make callout and get the results for you. Always remember that this will delay the completion of whole cycle by min 2 mins to 15 min depending upon how sales force executes batch.
2. There is very hard limit of 10 callouts in a transaction so consider this before doing any architecture.

A. Generating XML by String concatenating?
1. Try to divide XML generation by dividing whole logic in methods.
2. Have one method for every kind of XML generation which cleans up the value based on type. Eg. Applying appropriate date format, handling null values. This gets varied based on the system with which you are integrating. So it gives you the ability to keep formatting things at common place.

B. What is the expected time of the response?
There is a limit of 120 seconds limit for overall call out time in a transaction and cap of 60 seconds for a single callout.

C. Are you sending any DB generated data in integration?
If you are sending any DB generated data like autonumber, then you need break transaction, since sales force does not allow any dml before the call out. Normally changing transaction means normally doing ajax call after the DML making transaction is done.

D. Do you need to store information received after making callout and handling network failure or system error?
So basically you are doing a DML after call out which is allowed, but just think what if the dml fails and you rolled back everything. But my friend you can not rollback the call out you had done, so have planning for such scenario like submitting the data again and asking the other end system to ignore the first call. This save lot of efforts and panic when system goes live.

If you have any integration related question please comment below. Happy learning!!

Notifications for Scheduler if they don’t run.

Hi all, We use schedulers and batches in salesforce for many reasons like daily cleanup, daily processing of data and there comes the need of checking that if your scheduler is running properly with the specified time interval. Here is the solution to get the notification if your scheduler did not run within a particular interval. You will get a nice email alert if the scheduler is not running.

Follow the following steps.

1. Create one object Notification with name as text field and a checkbox as notify (Notify__c).

2. Create the “Notify_after_one_hour__c” datetime field in the notification object.

3. Create the following method in your Notification class.

4. Create the workflow rule as follows


This workflow rule adds an action to send the email after one hour of the “Notify_after_one_hour__c” date time field from the notification object. Here just call the method from the notification method and specify the greater time interval in minutes than the duration between two consecutive executions of scheduler. Call this Notification.addNotificationFor(‘<JobName>’,<duration in minutes>). Let’s say there is a scheduler which runs at the interval of two hours and you want to get notified it the scheduler did not run after 2 hours. Then just add this line to the start of the schduler as


Here I have set time as 130 minutes. Here first time when this method gets executed it will add an action to send email after 2hours and 10 minutes. If the scheduler runs properly after 2 hour then this method will get again executed and the time dependent action will get recalculated and email notification will be forwarded ahead by 2 hours and suppose if scheduler did not run after 2 hours then email notification will not get again forwarded and you will get email notification after 2hours and 10 minutes.

This can be used in schedulers, regularly running jobs.

I hope this will help to get notified if your important job is not running after specified time interval.


Guidelines for developing components in VisualForce

Lately I have been developing many visual force components so that they could be reused again and again. While developing components you will face many issues which comes when you integrate them in VisualForce pages. So here are some guidelines for newbies which can save your time later fixing bugs when component is in use.

1. Identify all the required parameters which will be required for the functionality of the component.

This is important because when component is in use then its very hard to add a required attribute for the component which can break the pages where this component has been used. So its a good think to spend a bit amount of time thinking for the required values.

2. Consider the fact that parameters will not be available in constructor of the components controller.

There is a normal issue which every newbie will face that parameters passed to the component will not be available to the constructor of the components controller. This is because sf server first creates instance of components constructor and later assign passed variables to the components variables. To solve this put every logic which expects parameters passed to component in a method and call this method when the component loads.

3. Identify if support for multiple component is required in a single page.

If you are developing a component which will be used multiple times in a page then special care needs to be taken. E.g. If you define some javascript variables then the inclusion of every component will override the values and you will find it very difficult to debug it. So if it is the case I would suggest find something which is unique which will be passed to the component and use it as prefix to every javascript variable that you create in component.

4. Don’t include js/css libraries inside a component.

It’s a good thing to develop component which can be used in a page without need to add any external libraries in page. So in that process if you are including jQuery in a component then it can cause problem when component is used in a page where already a other version of jQuery is used. So its a good thing to keep this dependency and document about the libraries required.

5. Always give default value to the non required parameters.

Its a good practice if you give default value to the parameters so that you will know what will be coming in parameters if value is not passed. This approach leads to less null and blank string checks and makes code more clear and gives predictable behavior.

6. Use  JavaScript variable based namespacing.

It’s said JavaScript is easy to learn and very easy to miss use it. Create only one variable for component and add every thing to that variable. It means your all variables will be scoped to a particular namespace which makes sure that your code will not break because of others JavaScript code. If you are using multiple components in same page then you will need to follow some convention which makes sure that every component has different JavaScript variable name.

7. Handle the reRendering functionality.

This is important. If you are developing component then you should have an assumption that the developer using our component may reRender the component. In that case if you have some JavaScript directly in the script tag then it might get executed again which might have some side effects. So its better to keep in mind that the component can get reRendered by the client while designing the component.

8. Don’t use assignTo when it is not required.

<apex:attribute name=”myValue” description=”This is the value for the component.” type=”String” required=”true”/>

There is an extra attribute assignTo where you can mention the variable name from components controller to which value gets assigned. But if
you are using that variable only on the page then there is no need to use assignTo. You can directly use that variable anywhere in the page like {!myValue}.

Custom Picklist

Hi all, In Picklist you can not have more than 1k entries. But I ran into a scenario where I wanted to show State, City and Pincodes as Picklist which were more than 1K. So the option was to create City a dependent picklist of State and a Pincode which is dependent of City. States were very less, but the cities count exceeded the limit of 1k entries and Pincodes were way higher. So went with the decision of making Custom Objects for state, city and pincode and manage dependencies with lookups. City will have lookup to State and Pincode will have lookup to City. But then came the problems of writting much code on the side of controller and as well as page to populate State,City and Pincode options in controller and then managing action support so that when state changes City needs to be also changed. So I thought why not to create a component which takes care of all issues. I have created a Picklist component which can show any lookup as picklists and also manages dependencies.


1: You can use with fieldset and every lookup can be changed to picklist.

2: Picklist(sobject) dependencies can be maintained. In demo page only those contacts are shown which are under selected account.

3. Fast response because Js Remoting is used.

4. No need to write any extra apex code to populate options and action supports to manage picklist dependencies.

5. View state less.


Here is the code for Custom Picklist Component


Here is the code for Custom Piklist Controller

Demo Page Code


Executing common Javascript code at the end of every ajax request :)

Have you ever encountered a situation where you had to call some javascript code after a ajax request is complete and some area of page is reRendered. This normally is the case when your events, some extra UI related javascript gets vanished when elements gets reRendered. For that the solution is to have code inside a javascript function and call it on page load and in oncomplete of commandButton, commandLink, actionFunction etc (all these are ajax request). So for this kind of situation there is a better solution which provides you a place where you can write code which will get called when ever a ajax request is made from page. The trick is that when we do ajax request from page (by any means – commandButton, commandLink, actionFunction etc ) a instance of XMLHttpRequst is created and the ajax request is performed with the help of it. So we can override the method which gets called when the request is completed and put our Javascript code there to get executed. So say bye bye to overload of writting common and duplicate code in oncomplete of every ajax calling commandButton, commandLink etc 🙂 Hope this helps someone.