How to create custom list button in Salesforce and send data to external API?

Ever needed to create your very own custom button in Salesforce? If yes, read below.

In our example we will use leads to show how to do this, but you can add your button on almost every list (except Users which are special objects).

First open Developer Console from here:

That will open something like this:

This is Salesforce built-in editor for custom code, also for Apex classes and Visualforce Pages which we will use.

So next step is creating Apex class which will handle our data. From “File” memu, choose “New” and then “Apex class”. Give it a name, our example will be called “myExternalCall”. At beginning, you will see only some initial boilerplate:

public class myExternalCall {

}

What we need to do, is to fill it to look like this:

public class myExternalCall {
    public myExternalCall(ApexPages.StandardSetController controller) {
        List<Object> obj = new List<Object>();
		for ( Lead acc : (Lead[])controller.getSelected() )
        {
            Lead acct = [SELECT id, Company, PostalCode, Street FROM Lead WHERE Id=:acc.Id];
            Map<String, String> theObj = new Map<String, String>();
			theObj.put('PostalCode', acct.PostalCode);
			theObj.put('Street', acct.Street);
			obj.add(theObj);
        }
        String JSONStr = JSON.serialize(obj);
        HttpRequest req = new HttpRequest(); 
        string url = 'https://salesforce1.free.beeceptor.com';
	    req.setEndpoint( url );
	    req.setMethod('POST');
        req.setBody(JSONStr);
        try {
            Http http = new Http();
            HttpResponse response = http.send(req);    
            System.debug( response); 
        } catch( System.Exception e) {
            System.debug('ERROR: '+ e);
        } 
    }
}

What we have there? Basically we need to create only one method – constructor, which will be called upon our request. Inside we need to pass StandardSetController from which we will extract selected leads. Beacuse on list we have only ID, we need to fetch required data from Salesforce using ordinary SELECT. Next our data is added to Salesforce List object which is finally serialized into JSON and sent to external API.

Next step is Visualforce Page. Go to Setup (which is visible in screenshot from step 1) and this will open something like this:

In “Quick find” type “pages” and on left choose “Visualforce Pages”. In middle of screen you should see “New” button, press it. Give your page a label and name, check “Available for Lightning Experience, Lightning Communities, and the mobile app|, and in code editor put this:

<apex:page standardController="Lead" extensions="myExternalCall" recordSetVar="Lead">
  <h1>Congratulations</h1>
  Your data was sent!
</apex:page>

Check below if your pages looks like this:

If yes, save it. Now, still in “Service setup”, choose “Object Manager” tab, and find “Lead” object. From left menu choose “Buttons, Links, and Actions”, then “New Button or Link” button. Fill required data and choose your Visualforce page as shown on screen:

We’re almost there. Save your button, and go to “Search Layouts” and then open “Default Layout”. In “Custom Buttons” section move your “External Call” button from “Available Buttons” to “Selected Buttons”.

Save your layout and open “Search Layouts for Salesforce Classic” and edit “List View”. Then again in “Custom Buttons” add our button to active as shown:

Save, and finally we can go to Leads page, where our button will be visible:

You can choose few leads, push our button and you should see something like this:

If anything will be different, you can go back to Developer Console, and check “Logs” tab at bottom. Open last entry and check if there is any message inside. For sure you will find something like:
20:14:21:076 EXCEPTION_THROWN [20]|System.CalloutException: Unauthorized endpoint, please check Setup->Security->Remote site settings. endpoint = https://beeceptor.com/console/salesforce1

To avoid this, just go to “Service Setup”, in quick find type “remote” and open “Remote Site Settings”. Add new site and fill form:

In case you want to use Beecaptor for testing, just change your URL both in security and Apex class to something like:
https://salesforce1.free.beeceptor.com
You can register your own endpoint, but anyway you should see something like:

And we’re done.