ylliX - Online Advertising Network

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:

salesforce list button step1
salesforce list button step1

That will open something like this:

salesforce list button step2
salesforce list button step2

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:

salesforce list button step3
salesforce list button step3

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:

salesforce list button step4
salesforce list button step4

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:

salesforce list button step5
salesforce list button step5

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”.

salesforce list button step6
salesforce list button step6

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:

salesforce list button step7
salesforce list button step7

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

salesforce list button step8
salesforce list button step8

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

salesforce list button step9
salesforce list button step9

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:

salesforce list button step10
salesforce list button step10

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:

salesforce list button step11
salesforce list button step11

And we’re done.

Leave a Reply