You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Creating a Custom Button with JavaScript in Salesforce


By: Radha

Custom buttons in Salesforce are used to achieve additional functionality apart from the standard functions in Salesforce. The action can be defined for the custom button when it is clicked by the user. In page layouts.  the custom button can be placed based on the business needs.

Custom button are displayed at the top or bottom of the detail page–to the right side of all standard buttons. To replace a standard button with a custom button, define the custom button and customize the page layout to hide the standard button and display the custom button in place of the Standard button in the page layout.

The following example explains the steps to create a custom button with JavaScript. The scenario for the example is that there are three custom objects named Projects, Team members and Timesheets. Master detail relationship exists between the Team Member and the Timesheet objects, and Lookup relationship exists between Project and Timesheets, and Team member and Time sheets.

Steps:  

1.From Setup enter Objects in the Quick Find box, select Objects, and then click Timesheet.

2.Scroll down to the Buttons, Links, and Actions section and click New Button or Link.

3.In the Label field, enter Create Timesheet.

4.For Display Type, choose List Button.

5.For Behavior, choose Execute JavaScript.

6.For Content Source, choose OnClick JavaScript.

7. The list button executes java script. The JavaScript code is specified below

     {!REQUIRESCRIPT("/soap/ajax/30.0/connection.js")}  

     {!REQUIRESCRIPT("/soap/ajax/30.0/apex.js")}  

a = sforce.apex.execute("timeclass","method1",{tid:"{!teammember__c.Id}"});  

if(a == "Timesheet Exists or project completed"){  

alert(a);  

}  

else{  

location.reload();  

}

The REQUIRESCRIPT code lines are the default code for using JavaScript in Salesforce. The sforce.apex.execute code has the apex class name ‘timeclass’ and ‘method1’ is the function name in the apex class. The ‘tid:teammember__c.Id’ specifies the parameter that is passed to the apex class method.

Creating Custom Button in Salesforce

The Timeclass apex class will check the existing timesheet of the team member and the project, and displays an alert message. If there are no timesheets for the member, a new timesheet gets created for the member with the project.

Timeclass.apxc 

global class timeclass {  

    webservice static String method1(ID tid){ 

        list<timesheet__c> timesheetlist=new list<timesheet__c>(); 

        map<id,id> projmap=new map<id,id>();         

        for(timesheet__c tim :[select id,proj__c,teammember__c from timesheet__c where teammember__c=:tid and startdate__c=:Date.today().toStartOfWeek() and enddate__c=:Date.today().toStartOfWeek().addDays(6)]){ 

            projmap.put(tim.proj__c, tim.teammember__c); 

        } 

        list<proj__c> projectlist=[select id,name,status__c,teammember__c from proj__c where teammember__c=:tid and status__c =:'inprogress']; 

        teammember__c tmb= [select id,name from teammember__c where id =:tid ]; 

        for(proj__c pro:projectlist){ 

            if(!projmap.containsKey(pro.Id)){ 

                timesheet__c tsheet=new timesheet__c(); 

                tsheet.proj__c=pro.Id; 

                tsheet.startdate__c=Date.today().toStartOfWeek(); 

                tsheet.enddate__c=Date.today().toStartOfWeek().addDays(6); 

                tsheet.teammember__c=pro.teammember__c; 

                tsheet.Name =tmb.Name; 

                timesheetlist.add(tsheet); 

            } 

        } 

        insert timesheetlist; 

        if(timesheetlist.isEmpty()){ 

            return 'Timesheet Exists or project completed'; 

        } 

        else{ 

           return null; 

        } 

    } 

}

 

The id of the team member is passed to the method in the apex class from the JavaScript code on the custom button and the execution takes place.

To summarize, the custom button is used to create functionality based on the requirement of the business logic in an easy way in Salesforce.

Reference Link: https://help.salesforce.com/apex/HTViewHelpDoc?id=customize_enterprise.htm