Client Object Model Introduction, Part 2: Adding a list item

-- Find Part 1 here --

In this post, I'll show you how to add a item to a list.

If you're not familiar with Client Object Model, please read "Part 1: Reading list items" before you continue with this post here as I will assume that you know the basics.

As in the part 1 post, I'll use my "Project Alpha" site and the "Employees" list here. And I also use a content editor webpart to add my JavaScript code and a hyperlink to run the code.

And here's how to add a item, step by step:

The list

We use the same list "Employees" as in part 1.

The Content Editor WebPart

As in part 1 we need a content editor webpart for our JavaScript and HTML code:

The code for the link is this:

<a href="javascript:AddNewEmployee()">Click me to insert new
employee with client object model!</a>

The JavaScript Code

With this code, a new employee can be added to the list:

<!-- Add new employee (begin) -->
function AddNewEmployee()
{
  // Create client context
  var myContext = new SP.ClientContext.get_current();
  // Get current web (comparable to SPWeb)
  var myWeb = myContext.get_web();
  // Get list by title (comparable to SPList)
  var myList = myWeb.get_lists().getByTitle('Employees');
  // Create new object for list item creation
  var myListItemCreationInfo = 
               new SP.ListItemCreationInformation();
  // Create new list item
  var newEmployeeItem = myList.addItem(myListItemCreationInfo);
  // Set properties for new list item
  newEmployeeItem.set_item('Title', 'Privatier');
  newEmployeeItem.set_item('Name', 'Duck');
  newEmployeeItem.set_item('Firstname', 'Dagobert');
  newEmployeeItem.set_item('Age', '49');
  newEmployeeItem.set_item('Salary', '184000');
  // Update the new item
  newEmployeeItem.update();

  // Now execute the query.
  // Note: until now, nothing happend! 
  // If you wouldn't call "executeQueryAsync", 
  // nothing would ever happen with the code... After the 
  // query has finished, either the 'success' or
  // the 'fail' function will be called.
  myContext.executeQueryAsync(
       Function.createDelegate(this, AddNewEmployeeSuccess),
          Function.createDelegate(this, AddNewEmployeeFail));

  // Caution! The "executeQueryAsync" is executed 
  // immediately, but the result is not yet available
  // (as it is processed async)! Depending on the performance,
  // complexity of query etc., Sharepoint needs some 
  // time to get the data.
  // Due to this, this message will be displayed
  // BEFORE the query finished!
  alert('Query started, but not yet finished!
                  Adding new employee in progress...');
}

// This function will be called if the
// "executeQueryAsync" failed (e.g. list not available,
// query string wrong or anything else)
function AddNewEmployeeFail(sender, args) 
{ 
  alert('AddNewEmployee() failed:' + args.get_message());
}

// This function will be called if
// the "executeQueryAsync" succeeded
function AddNewEmployeeSuccess(sender, args) 
{
  alert('AddNewEmployee() successfully executed,
           new employee "Dagobert Duck" created.');
}

The Final Step

Add the JavaScript code to the content editor webpart, surrounded by a <script> tags:

<script type="text/javascript"> // JavaScript here </script>

So the full HTML code in the content editor webpart looks like this:

The Test

If you now click on the link "Click me to insert ..." you get two alerts:

The first alert appears immediately, the second one ("AddNewEmployee() successfully...") needs a frew millisecons more to appear. (And only appears if the insert was successful!)

Now close the alert messages (click OK) and go to the "Employees" list.

The new item has been created!

---

Created by Patric Much

Comments

[Kommentiert von: biraj]

Hi,

I wish to looping myContext.executeQueryAsync. but it gives error. Any idea for that?

[Kommentiert von: ManceDulaRece]

The Top USA Online Casinos with an amazing offer of 300+ casino games

[Kommentiert von: Joyce]

The problem John and Eric are hvinag is because tey ever did the folowing In the editmode: Place the cursor in the content area and use the format text tab and click at edit HTML source. I had the same problem this solved it.

[Kommentiert von: Jetson]

Hi Mel,No that is not working. I tried that myself but reinstalling is the only solution.Let me know if you found another solution for that. It has been a while ago I worked on this and my solution was to redo the installation. Quick and dirty but it worked.

[Kommentiert von: Menelom]

Ja ... Das Design ist klar musste geändert werden :)
Was wäre heller, nebudu (

[Kommentiert von: Gregory]

just did exactly what one of your users did. i was woinrendg what the heck a sql reporting webpart was doing in my webpart library so i tried it out. correlation id did nothing to help me as well as the developer dashboard. your article did help. thank you sir!i am not getting a warm and fuzzy feeling with migrating my user base to 2010.

[Kommentiert von: Sudania]

I agree, It's not ideal at all. I did find a shortcut to get to the Webpart Page Maintenance Page.When you are on the page that has the error on it, add:?contents=1To the end of the URL page. It will take you right to the Maintenance page. Hope this is helfupl!Matt Engel recently posted..

[Kommentiert von: maitottediact]

i am new here and loved the forum don't know if i am posting in the right place..
just wanted to say hi and i hope that i will have good time here