Ye Meri Life Hai - Chirag Mehta

Be Good & Do Good!

Tag: jquery

Visualforce Jquery Select List with Search feature

Lets say you have a requirement where-in you are displaying a select-list (picklist) on a visualforce page for user selection. Based on user selection you are doing some operation. Now if this select list is too big (i.e., is list of  50+ items), then its really hard to select a particular item as visualforce select list doesn’t support searching of options inside a select list.

Inorder to provide similar functionality, I google’d and found a really nice jquery plugin – Chosen. Convert long, unwieldy select boxes much more user-friendly.

Below is simple to follow steps to incorporate same in a visualforce page.

Step1 : Import necessary Jquery+Chosen JS & CSS into Static Resource. Download @ https://github.com/harvesthq/chosen/releases

Step2 : Include above imported js and css in visualforce page

<!– Include Chosen JQuery Plugin Javascript and CSS Files –>
<apex:includeScript value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘chosen.jquery.js’)}”/>
<apex:includeScript value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘chosen.jquery.min.js’)}”/>
<apex:includeScript value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘docsupport/prism.js’)}”/>
<apex:stylesheet value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘docsupport/prism.css’)}”/>
<apex:stylesheet value=”{!URLFOR($Resource.chosen_jquery_plugin, ‘chosen.css’)}”/>

Step3: Include script to convert select into select with search

<script>
j$ = jQuery.noConflict();
j$(document).ready(function() {
j$(“select[id*=’IdOfSelectElement’]”).chosen();
});
<script>

Javascript (jQuery) code to fetch Salesforce Lead Convert Custom Field Mappings (in terms of API Names)

Yesterday came across a requirement to list down Lead Convert Custom Field Mappings in terms of API Names ie Lead Field1__c maps to Account/Contact/Opportunity Field1__c. Salesforce UI doesn’t give that option to extract same. Neither any metadata API got that, really strange that there’s no way I can extract Lead Convert Custom Field Mappings (in terms of API Names). Is there any? please help in case I’m missing some standard way of extracting that out?

Easiest option could have been that I sit down and do manual and tedious way of reading each field label finding its API Name and record the same in excel, but this doesn’t seem viable option for an org with 100+ lead convert field mappings. As I couldn’t find one using all standard approaches, I started thinking of wicked ways of achieving it. And as usual Javascript (jQuery) comes to rescue party!

Login to Salesforce Org in Chrome or FF Browser,
Navigate to lead convert field mappings page (Select Your Name | Setup | Customize | Leads | Fields | Map Lead Fields),
Open Javascript Console,
Now load jQuery first (you can do same by loading any existing jQuery booklet or userscript too) by executing below code in JS Console.


var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
$j=jQuery.noConflict();

Now comes the main code which will output LeadFieldAPIName, Account/Contact/Opportunity Field APIName, Account or Contact or Opportunity. Execute below code too in JS Console.

//Traverse across all Select elements
$j("select").each(function () {

//Consider only the ones with a mapping selected
if (this.value != '') {

//Fetch Object Name to which this particular Lead field is mapped, whether its Account or Contact or Opportunity
var objectname = $(this).find('option:selected').text().split(".")[0];

//Tricky Part : As this lead convert field mappings page doesn’t store Lead field API Names, it only contains lead field ID (15 digit SFDC ID) so we will have to do AJAX request of LEAD field detail webpage to fetch LEAD API Name corresponding to lead field ID
var contentText = $.ajax({url: "/" + this.name,async: false}).responseText;

//In fetched content, search and extract field API Name
var fromfield = $(contentText).find('td').filter(function () {
return $(this).text().indexOf('API Name') === 0;
}).closest('td').next().html();

//Similarly AJAX request for Account/Contact/Opportunity field detail page to fetch respective field API Name
contentText = $.ajax({url: "/" + this.value,async: false}).responseText;

//In fetched content, search and extract field API Name
var tofield = $(contentText).find('td').filter(function () {
return $(this).text().indexOf('API Name') === 0;
}).closest('td').next().html();

//Output LeadAPIName, Account/Contact/Opportunity APIName, Account or Contact or Opportunity
console.log(fromfield + ',' + tofield + ',' + objectname);

}});

Please Note:

  • This isn’t most neat and recommended way, so if you come across something really clean and less network consuming solution please share your solutions in comments below
  • I’m not an expert in jQuery, so there might be obvious and recommended ways of coding jQuery and my above coding might sound nascent way of handling jQuery, so please ignore my lack of knowledge around jQuery and help me to optimize same.
  • Fetching Lead/Account/.. Field API Name from Field ID might be done using other ways too (describe API Calls?), but thought of doing it in just one script, so did that using AJAX calls and parsing retrieved webpage content
  • As always, feedback/suggestions are always welcome