Alternatives to OnClick Javascript buttons : Way to replace OnClick Javascript buttons across all objects with Single VF page

We always prefer onclick javascript button to perform different operations like updating fields on same records or on other records with single click by user. In order to do this, we either use ajax toolkit to either perform logic or to call apex method.

We can also perform these operation even by redirecting user to VF page on click of button and call apex method on VF page load (by specifying action attribute on <apex:page>) and redirecting User back to record details page.

Developers usually not use this approach as they do not want to create new VF page every time for these kind of requirements.

After the launch of lightning, onclick javascript buttons are not recommended and everyone is finding alternative for onclick javascript buttons functionality but sometime these alternative results in more than 1 click for end user.

Through this blog, I just to share one approach through which we can utilize single VF for all custom buttons. We just need to pass recordId and apex class name which contains your logic for operation in URL. This approach also involves single click from user and user will get notified about success and failure of operation (in onclick javascript we user alert to notify).

Different steps involved for this approach:

• Create a VF page and controller. Create wrapper in this controller to store redirect url (to redirect user after performing operation), success and failure message which you want to display to user.
• Create an Interface with method name executeLogic (return type will be wrapper of VF controller).
• Create a new apex class which implements interface and will contain logic in executeLogic method.
• Create a custom button and specify URL. pass recordid and apex class name where you have written your logic.

Sample Requirement:

I need to create a custom button on Account. When user click on that, I need to check if billing country and billing postalcode in not blank, then change the type field to 'Prospect'.

Traditional Approach:

Create a onclick Javascript button and call apex method from that to perform operation. Dispaly success/error message using alerts.

New Approach:

Below are code related to new approach:

Now create custom button on Account as mentioned in below image

URL will be like:

/apex/OnClickJSUtilityVF?rid={!Account.Id}&cname=AccountUtility

here "AccountUtility" is apex class name which contain logic.

If we use this approach then, going forward we just need to create apex class with method and implement the interface.

If we consider the both approaches, the amount of code that we need to write for any new custom button functionality will remain same.

Demo snapshots:

When I click on Change to Prospect button with billing country and billing postal code as blank, getting below message:

When clicking on Change to Prospect button after specifying values for billing country and postal code, getting below message:

These success and error message are specified in apex method in apex class. So you can specify different message based on different requirements.

Also you can specify the redirect URL in apex method where user will navigate after performing the requested action.

You can style your VF page as per your org need and all users will have same user experience.

Hope this will help!!!

Looking forward for everyone comments and suggestions.

Onclick Javascript-AJAX Toolkit

When working with small amounts of data, use the AJAX Toolkit.

AJAX works best with relatively small amounts of data (up to 200 records, approximately six fields with 50 characters of data each). The larger the data set returned, the more time it will take to construct and deconstruct a SOAP message, and as the size of an individual record gets larger, the impact on performance becomes greater. Also, as more HTML nodes are created from the data, the potential for poor performance increases. Because browsers are not efficient, careful consideration needs to be given to browser memory management if you intend to display a large amount of data.

The following are examples of appropriate uses:

• Updating a single record.
• Modifying few fields of related child records.
• Perform one or more simple calculations and then update a record.

Here I will be sharing basic sample code for 3 scenarios mentioned above.

1. Updating a record

Support users can assign cases (assign to queue) to themselves by clicking on "Accept" button present in Case detail page. On click on "Accept" button, system will change the case ownerid to current logged in user. Below is sample code:

1. Updating child records or list of records

Notify Contacts of Account to update their Contact details. Create a checkbox field(contact_update_required__c) in Contact. Create a workflow rule which will send email to all contacts to update their contact details whenever checkbox field is true. Create a related list button for Contact object “Update Contact Details” and add it to Contact related list on Account page layout. Whenever this button is clicked, onclick javascript modify the checkbox field to true in all related contacts of Account.

1. Performing logic by calling apex method

There are few scenarios where you want to perform complex logic in apex class and want to execute that logic on click of button. For example, you want send notifications to attendees of event based on some logic. For this, you need to create global class and create webservice method and then call it from onclick javascript.

Others capabilities of AJAX  toolkit are:

• Performing synchronous and asynchronous calls.
• Query,create,edit,delete,undelete,merge and search records. 
• Convert lead,send email and initiate approval process.
• Use describe to get object and fields information.

Refer below URL for more reference on AJAX toolkit:

AJAX Toolkit Developer guide

                            Click here for Salesforce Interview Questions