Create Dynamic Picklists in Salesforce sControls
Have you ever created an sControl and needed to use a picklist? If you've done this and hard-coded the picklist values into the sControl code then you understand that it can be a pain if the picklist options (or business requirements) change.
If your a consultant or contractor and you hard-code those picklist options then it can be additional work when the client wants to make any changes. However, code practices dictate that you should always provide the client with ease of use in your original code. This would mean allowing picklist options to be dynamically generated based upon the picklict options dictated in the field setup with the salesforce.om application itself.
My sample code includes a function that you can reuse to pull picklist values from a specific object as dictated by the values used in the call to the function. That code is below:
//returns an array of picklist values for the passed table and field
function getPickVals(table,field) {
var returnArray = new Array(); //return array holding all values
var oTable = sforce.connection.describeSObject(table); //connect to table
var oFields = oTable.fields; //look at fields on table
for (var a=0; a<oFields.length; a++) { //loop through all the fields
if (oFields[a].name==field) { //if the field is the requested one
var oPicklistVals = oFields[a].picklistValues; //look at all the picklist values for field
for (var b=0; b<oPicklistVals.length; b++) { //loop through all picklist values
returnArray.push(oPicklistVals[b].value); //push all picklist options to return array
}
break; //we found field and picklist values so exit loop
}
}
return returnArray; //send back data
}So using the code above you could make a call for the picklist values for Time Zone from the User object. See below:
var picklistValues = getPickVals("User","TimeZoneSidKey"); //build array of values
alert(picklistValues); //alert array to userBelow I've listed the full code, which you can copy & paste into a new sControl within your salesforce instance to test what I've told you & learn more:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dynamic Picklist Select</title>
<!--
Created by: Greg Hacic
Last Update: September 06, 2007 by Greg Hacic
Questions?: greg@interactiveties.com
Copyright (c) 2007 Interactive Ties LLC
NOTES:
This sControl will dynamically build any picklist as long as the salesforce.com field
is a single or multi select picklist.
To test this functionality for other picklists simply change the selTable value to the
Object you want and change the selField value to a picklist field on the table listed
in selTable.
-->
<!-- common styles --><link href="/sCSS/10.0/Theme2/default/common.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<!-- custom styles --><link href="/sCSS/10.0/Theme2/allCustom.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<!-- AJAX Toolkit version 10.0 --><script src="/soap/ajax/10.0/connection.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
//intiates page and loads data
function pageInit() {
var selTable = "User";
var selField = "TimeZoneSidKey";
var picklistValues = getPickVals(selTable,selField);
var plHTML = "<select id=\"picklistSelect\"><option value=\"\" selected>All</option>";
for (var a=0; a<picklistValues.length; a++) {
plHTML += "<option value=\""+picklistValues[a]+"\">"+picklistValues[a]+"</option>";
}
plHTML += "</select>";
document.getElementById("plVals").innerHTML = plHTML;
document.getElementById("fieldName").innerHTML = "<span class=\"requiredMark\">*</span>"+selField;
document.getElementById("fieldText").innerHTML = "Field: "+selField+"<span class=\"titleSeparatingColon\">:</span>";
document.getElementById("objectText").innerHTML = "Object: "+selTable;
}
//returns an array of picklist values for the passed table and field
function getPickVals(table,field) {
var returnArray = new Array(); //return array holding all values
var oTable = sforce.connection.describeSObject(table); //connect to table
var oFields = oTable.fields; //look at fields on table
for (var a=0; a<oFields.length; a++) { //loop through all the fields
if (oFields[a].name==field) { //if the field is the requested one
var oPicklistVals = oFields[a].picklistValues; //look at all the picklist values for field
for (var b=0; b<oPicklistVals.length; b++) { //loop through all picklist values
returnArray.push(oPicklistVals[b].value); //push all picklist options to return array
}
break; //we found field and picklist values so exit loop
}
}
return returnArray; //send back data
}
</script>
</head>
<body class="Custom184Tab detailPage" onLoad="pageInit();">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<div class="bPageTitle">
<div class="ptBody secondaryPalette"><div class="content"><img src="/servlet/servlet.ImageServer?id=0153000000084iV&oid=00D300000001L5c&lastMod=1179974461000" alt="Home" class="pageTitleIcon userDefinedImage"><h1 class="pageType">iTies Examples<span class="titleSeparatingColon">:</span></h1><h2 class="pageDescription"> Dynamic Picklist</h2><div class="blank"> </div></div><div class="links"> <!--<a href="#" title="Help for this Page"><span class="helpLink">Help for this Page</span><img src="/s.gif" alt="" class="helpImage" title=""></a>--></div></div>
</div>
<div class="bPageBlock bEditBlock secondaryPalette"><div class="pbHeader"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title=""><h2 class="mainTitle" id="objectText"> </h2></td><td class="pbButton" id="buttonsTop"> </td></tr></table></div>
<div class="pbBody">
<div class="pbSubheader first tertiaryPalette"><h3 id="fieldText">Information<span class="titleSeparatingColon">:</span></h3></div>
<div class="pbSubsection">
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="labelCol last requiredInput"><label for="field" id="fieldName"><span class="requiredMark">*</span>Loading...</label></td>
<td class="data2Col last" colspan="3"><div class="requiredInput"><div class="requiredBlock"></div><div id="plVals" name="plVals"></div></div></td>
</tr>
<tr>
<td class="labelCol last empty"> </td>
<td class="dataCol col02 last empty"> </td>
<td class="labelCol last empty"> </td>
<td class="dataCol last empty"> </td>
</tr>
</table>
</div>
</div>
<div class="pbBottomButtons"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title=""> </td><td class="pbButtonb" id="buttonsBottom"> </td></tr></table></div>
<div class="pbFooter secondaryPalette"><div class="bg"></div></div>
</div>
</td>
</tr>
</table>
</body>
</html>Hopefully, you can find many uses for this script as I have made use of it in many sControls.
Author
I've been working with Salesforce since 2003. Over the years, I've held various roles for a diverse array of salesforce.com customers, created a Salesforce specific ISV, and built numerous applications for the AppExchange. All of these experiences have allowed me to learn quite a bit about building on the platform.