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

Creating custom lookup field in VF page for objects

Recently I got requirement in which I have to store information like Email template name, frequency of sending emails and few other fields in custom object. While selecting email template, salesforce standard look up pop should open which usually comes while creating Email Alerts (for selecting email template). Already custom fields like EmailTemplateid (text), and EmailTemplateName(text) were created in custom object. Also user want flexibility to create many records at once.

Below is sample code to create custom look up in VF page for email template:

Explanation:

First look at input elements:

• Input text with id='Template_lkid' stores email template id.
• Input text with id="Template_lkold" stores email template name.

Now look at javascript function:

JavaScript:openLookup('/_ui/common/data/LookupPage?lkfm=editPage&lknm='+templatenameid+'&lkrf=&epf=1&lktp=00X',670,'1','&lksrch=' + escapeUTF(getElementByIdCS(templatenameid).value.substring(0, 80)))";

About parameters which need to be set for replicating standard look up behaviour:

• lknm : This specify the id of input text where selected value in pop up will display
• lktp : This is object prefix( first 3 characters). in my case '00X' prefix for Email Template
• lksrch : This is search parameter. If you specify text, then in pop up system will search and show results.
• In order to store id of record selected in pop up, this function search input text field with id equal to value passed for lknm parameter appended by '_lkid'. For example, if we pass 'Template' as value for lknm parameters, then selected record id will be populated in input text field with id='Template_lkid'.

I have used <apex:inputtext/> tag inside pageblocktable, salesforce generate unique ids while rendering page. As it is repeating element, salesforce append numbers(index) starting from 0 (for first element) in front of id specified in apex:input tag. So in order to populate selected values to correct input text elements, I have created a counter variable in my wrapper. So whenever user clicks on lookup icon, I am passing the element id in javascript and extracting index (counter value) from it and then creating requird id which will be passed for lknm parameter.

In order to implement custom look up for other object, just change object prefix in javascriot openLookup function and it will work. For example, Account object prefix is '001'. Just change '00X' to '001' in order to open pop up for account records.

Snapshot

Hope this will help someone.
looking forward your comments and suggestions...