ECMAScript Client Object Model – Update a look up field


In a previous post I discussed how to retrieve some values from a SharePoint list and bind it to a drop down list (HTML select). Later I had a requirement update back the selected value of the drop down to another separate list. The values I was retrieving was a lookup field in the second list I wanted to update.

My previous article on retrieve list data : Retrieve Data

So had to spend some time to properly understand how to do the look up field update using client object model.

I added a html button and wrote down a onclick event for the button.

<input type=”button” value=”Submit” onclick=”createListItem();” />

Below is the complete ECMAScript for the new list item update. It contains the two callback functions for successful item creation and failure of item creation. After a successful item creation, the new list item id will be displayed in a alert.

    <script type=”text/ecmascript” language=”ecmascript”>
 
    // Site collection url. Whatever the value given here the current site collection that
    // the web part is running is picked automaticaly. Not sure about how it happens.
    // Need to investigate more.
    var siteUrl = ‘/’;
 
    // Creating object to hold the item collection with the Id and Value. To enable
    // intellisence while coding(for the ItemContainer), uncomment the below line and
    // comment the right below one.
 
    //var ItemContainer = { ItemList : [{ Id: “”, Value: “” }]};
    var ItemContainer = { ItemList: [] };
 
    // Create a new list item in a sharepoint list
    function createListItem() {
        var clientContext = new SP.ClientContext(siteUrl);
        var oList = clientContext.get_web().get_lists().getByTitle(‘FAQ’);
        var itemCreateInfo = new SP.ListItemCreationInformation();
        this.oListItem = oList.addItem(itemCreateInfo);
        var category = document.getElementById(‘ddlCategory’);
 
        // Lookup value expect the item in a format [ID;#Display Title] ex: [2;#My Category]
        if (category != null) {
            // Category is the destination SharePoint list lookup field column internal name.
            oListItem.set_item(
            ‘Category’, category.options[category.selectedIndex].value
            + “;#” + category.options[category.selectedIndex].text);
        }
        oListItem.update();
        clientContext.load(oListItem);
        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onListItemAddQuerySucceeded),
            Function.createDelegate(this, this.onListItemAddQueryFailed));
    }
 
    // Callback function if item update successful.
    function onListItemAddQuerySucceeded() {
        // alert the newly created list item id.
        alert(‘Item created: ‘ + oListItem.get_id());
        clearControls();
    }
 
    // Callback function if item retrieval failes.
    function onListItemAddQueryFailed(sender, args) {
        alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
    }
 
</script>
That’s all about it! Happy Coding! Smile
Advertisements

One thought on “ECMAScript Client Object Model – Update a look up field

  1. Pingback: ECMAScript Client Object Model – Get the values from a multi select lookup column field « Kamil's Blog

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s