Posts Tagged ‘business data connectivity’

Set value of a SharePoint 2010 BDC External Item Picker field using JQuery

May 29, 2012

Recently, I had a requirement to pre-populate an external data field  in a SharePoint list based on value of a query string parameter. There are plenty of examples around showing how to populate regular fields such as text boxes and drop-down boxes etc… using JQuery, but, it becomes bit tricky when it comes to BDC External Item Picker field. The reason is, if you look at the HTML source for the External Item Picker Field, you will notice that it’s not a single HTML control but compose of many HTML tags. Therefore, it’s hard to determine which HTML tag value should be assigned in JavaScript in order to pre-populate the control.

Following blog post helped me to understand how different HTML tags in the browser work together to display the External Item Picker field in the browser.

In the same blog, there is a solution explained to accomplish this task, however, the solution did not work for me. This was what I did to get it working the way I wanted;

1. Open the list form in the browser and goto to the HTML source.

2. Find the HTML section corresponding to the External Item Picker control.

3. With in the HTML section for the External Item Picker, find the DIV tag and note the ID (see below enclosed in a green rectangle). That’s the tag you need to set the value.

4. Write a simple JQuery to assign a value to the DIV tag inner HTML (See e.g. below)

<script language=”javascript” src=”http:/……./jquery-1.7.1.min.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
//value that you want to pre-populate
value1 =”1234″;
$(“#[The ID of the DIV tag noted above]”).html(value1);

Add the JQuery to a Content Editor Web Part in the list form page and you will see the External Item Picker field pre-populated with the value assigned.

Dilruk Jayanetti