Friday, January 2, 2015

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

6 comments:

  1. Great Post Sunil .Thank u Soo much.

    ReplyDelete
  2. It's better to understand and learn realtime senario's . Thanks
    will u share new senario's

    ReplyDelete
  3. Thank you Sunil.

    ReplyDelete
  4. Thanks Sunil. Great Post!

    I am trying to accomplish the same but just using html/js inside a visualforce. Everything looks fine but when click the template from the pop up nothing happens...

    Have you tried anything similar? Or may have a clue of what's going on?

    Thansk!

    ReplyDelete
  5. Great post, thanks.
    Can this lookup be used to save multiple values to same text field ? I am creating a custom page for sending an email. I need to save multiple email id in CC and BCC field.

    ReplyDelete
    Replies
    1. Hi Neha,

      You can use onchange event on lookup field and store selected records in some javascript variables. In this way user can select multiple values and you can also display selected values stored in javascript to user to confirm what he has selected.

      Thanks.

      Delete