Get and Set The List Item Value in SharePoint 2010 Using ECMAScript


Introduction

In this article you will see how to get and set the list item value in SharePoint 2010 using ECMAScript. I have a custom list named "Custom" which has the following items.

IM1.gif

I have two columns "SampleOne" and "SampleTwo". I need to get the "SampleOne" field value and set the same to the "SampleTwo" field using ECMAScript.

Steps Involved

  1. Navigate to the SharePoint site (I have a site page created in my site where I am going to add the content editor web part).

  2. Go to Site Actions, click on Edit Page.

    IM2.gif

  3. Click on the Insert tab in the ribbon interface and then click on Web Part button.

    IM3.gif

  4. Select Media and Content in the Categories section and then click on Content Editor.

    IM4.gif

  5. Click on Add.

  6. The Content Editor web part will be added to the site page.

  7. Click on down arrow and then click on Edit Web Part.

    IM5.gif

  8. Click on "Click here to add new content".

    IM6.gif

  9. Click on the Format Text tab in the ribbon interface and then click on HTML drop down.

    IM7.gif

  10. Click on Edit HTML source.

  11. The HTML source window will pop up.

    IM8.gif

  12. Copy and paste the following script.

    <script language="ecmascript" type="text/ecmascript"> 
            var listItem;
            var list;
            var clientContext;
            function getSetListItem() {
                this.clientContext = SP.ClientContext.get_current();
                if (this.clientContext != undefined && clientContext != null) {
                    var webSite = clientContext.get_web();
                    this.list = webSite.get_lists().getByTitle("Custom");
                    this.listItem = list.getItemById(3);
                    clientContext.load(this.listItem);
                    this.clientContext.executeQueryAsync(Function.createDelegate(this, this.OnLoadSuccess),
    Function.createDelegate(this, this.OnLoadFailed));
                }
            } 
            function OnLoadSuccess(sender, args) {
                var value = this.listItem.get_item("SampleOne");
                this.listItem.set_item("SampleTwo", value);
                this.listItem.update();
                this.clientContext.load(this.listItem);
                this.clientContext.executeQueryAsync(Function.createDelegate(this, this.OnLoadSuccess1),
    Function.createDelegate(this, this.OnLoadFailed));
            } 
            function OnLoadSuccess1(sender, args) {
                alert(this.listItem.get_item("SampleTwo"));
            } 
            function OnLoadFailed(sender, args) {
                alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
            }</script
    >
        <input id="btnGetSetListItem" onclick="getSetListItem()" type="button" value="Get & Set List Item" />

     
  13. Click on Ok.

  14. In the ribbon interface click on Save & Close button.

    IM10.gif

  15. In the Content Editor web part you can find a button named "Get & Set List Item", click on that button.

    IM11.gif

  16. An alert will pop up.

Reference

SP.ListItem.item Property - http://msdn.microsoft.com/en-us/library/ee549053.aspx

Summary


Thus in this article you have seen how to get and set the list item value in SharePoint 2010 using ECMAScript.