Salesforce: List View Button With Visualforce Page

Telegram logo Join our Telegram Channel
Hello Trailblazers!!

Today I am going to share a sample list view button with Visualforce Page.

Summary:
  • Create a visualforce page with a standard controller, extension(if needed), and recordsetvar.
  • Create a list view button
  • Add the list view button to Listview layout by going to the Search Layout setting.

First, we need to create a Visualforce page. The page should use the Standard controller for the Object that you want to have a list view button and 'recordsetvar' must be set.

Visualforce Page: ListViewButtonDemo 
So here is the sample Visualforce page for this.

<apex:page standardController="Opportunity" recordSetVar="opportunities" extensions="ListViewButtonDemo">
    <apex:form >
        <html>
            <head>
            </head>
            <body>
                <apex:pageMessages />
                <table>
                    <tr>
                        <th>Name</th>
                    </tr>
                    <apex:repeat value="{!opportunities}" var="o">
                        <tr>
                            <td>
                                <apex:inputField value="{!o.Name}"/>
                            </td>
                        </tr>
                    </apex:repeat> 
                </table>
            </body>
            
            <apex:commandButton value="Save Changes" action="{!save}"/>
        </html>
    </apex:form>
</apex:page>

On this page, I have created a table for editing opportunity names for selected opportunities, you can add additional fields as per requirement. I have rendered this table using apex:repeat tag.

Controller: ListViewButtonDemo 
Below is the controller for visualforce page.

public class ListViewButtonDemo {
    public List<Opportunity> opportunities{get;private set;}
    public ListViewButtonDemo(ApexPages.StandardSetController stdSetController){
        // Returns all selected records
        opportunities = (List<Opportunity>) stdSetController.getSelected();
    }
    
    public PageReference save(){
        // Some fancy stuff here.
        try{
         update opportunities;
        } catch(Exception e){
            System.debug('Exception: ' + e);
        }
        return null;
    }
}

In the above controller, I have just fetched selected records using a standard function from ApexPages.StandardSetController, which returns the selected records from the Listview.

Save method is just saving the updated records. Here you can add your customization logic if you want to filter data, put some validations, automation, etc.


Create a Listview Button:
VF list view button - Salesforce

1. Go to Setup
2. Opportunities
3. Buttons, Links, and Actions.
4. New Button or Link.
5. Enter the name for the button.
6. Select the display type as List Button
7. Select Content Source = Visualforce Page
8. Select your VF page from the Content drop-down.


Finally, add the button on Listview Layout:

1. Go to Setup
2. Opportunities
3. Search Layouts
4. Edit Opportunities List View
5. Select the button from Available Buttons
6. Click Save.
Note: For custom objects, you will find layouts, buttons on the Objects setting page.


Now go to list view for Opportunities.
There you will see the button we just created.
Select records and it will take you the VF page.

Congratulations you have created a Listview button for Salesforce Object.
Please let me know in the comments box if any queries.
Thanks!!


2 comments:
  1. This was super useful! Thank you .. No need for the flows and it was very clear to understand. I'm now the proud creator of a Mass Convert Lead Button with an extension (custom convert lead)

    ReplyDelete

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com