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

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.

http://ghamson.wordpress.com/2010/10/11/prefill-a-list-form-field-external-data/

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″;
$(document).ready(function(){
$(“#[The ID of the DIV tag noted above]”).html(value1);
});
</script>

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.

Thanks
Dilruk Jayanetti

Advertisements

Tags: , , , , , ,

3 Responses to “Set value of a SharePoint 2010 BDC External Item Picker field using JQuery”

  1. KJ Says:

    Nice. Although I’m having problems with the item being resolved even though I’m setting the text exactly. I imagine there is some GUID under the covers that it is looking for as opposed to the text value. Any ideas?

    Secondly, have you ever tried to get a BCS item picker working with the jquery autocomplete? The ultimate would be to allow the user to type and have the field fill in, or show a list, but I can’t get an autocomplete to show on this type of field, even using the div tag above.

  2. dilrukj Says:

    Hi KJ, check whether you are using the correct tag (there are several DIV tags, check the screen shot). I have tested this coding in SharePoint 2010 and using the same technique in production, it worked fine.

    I have not tried jquery autocomplete with BCS item picker, but have done with some other controls, so I guess it should be possible.

  3. lownlazy Says:

    Thanks for the tip 🙂 I am trying to make SPServices cascade function work with a External List Picker, this is very helpful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: