A common task that I am asked to complete is to create an s-control that allows a user to input/edit data that will be stored back to the database. This ends up essentially being an html form that reflects the data elements in Salesforce. Below is the code that I use to render pick list fields dynamically in my forms.

In this example we will dynamically replicate the “Type” picklist field from the Account object in an s-control. This example assumes that you have an s-control and a web tab in Salesforce pointing to this s-control. We will also assume that you want to generate this picklist on the Body OnLoad event. These functions could be reworked to run at any point in your scripts.

Click here to download the JavaScript source code for this example

First: Create the div tag that will hold the picklist. In our example we use the name of the field as the Name and Id of the div tag. This Div tag should reside in the body of your HTML doc.

<div id="typeField" name="typeField"></div>

Next: Add the “addTypePicklist()” to your Body OnLoad event.

<body onload="addTypePicklist()" >
<div id="typeField" name="typeField"></div>


Next: Add the “addTypePicklist()”, "createPicklist()" and "getPicklistValues()" functions to your JavaScript in your header:

The addTypePicklist() function has four steps that we will walk through that reference the other two functions.

  • Step 1: The first step is to do a Describe Object on the object where the field is. In our example the Type field is on the Account object. The Describe Object call will give us a list of all fields and their attributes that are on that object.
  • Step 2: The second step is to pass the results of the describe object and the name of the field to the "getPicklistValues(nameOfField, describeObjectResults)" function. The field name passed is that name of the picklist value that you want to dynamically recreate. This function will return an array of all the picklist values available for that field. This is the "picklistVal" array in our example.
  • Step 3: Pass this array and what you want the Id of the picklist to be to the "createPicklist(arrayOfValues, idOfNewField)" function. This function will return the complete HTML for the picklist. This is the "pickHTML" variable in our example.
  • Step 4: Pass the results of the previous function to the innerHTML of the div that we created in the beginning.

That's it! You will have a dynamically created picklist in your form.


Post a Comment