You can use the SharePoint client object model to retrieve, update and manage data in SharePoint 2013. SharePoint makes the object model available in several forms.

This article shows how to perform basic operations using the JavaScript object model. You can add a reference to the object model using HTML <script> tags.

The following sections describe tasks that you can complete programmatically and they include JavaScript code examples that show the operations.

Procedure: Open your SP Site in SharePoint 2013 Designer. Then select an Assets icon from the designer ribbon to add a JavaScript file.



After adding a JavaScript file, the following file is available in the SharePoint Site Assets Folder:



Go to the SP site page and add a new page to the SharePoint site.



After adding a page select an Insert button in the Ribbon Menu.



Then add a Content Editor Web part into the page.



Edit the WebPart and add a JavaScript file link to the content link.



Save the web part and save the page in site. Click the button!



List Created Successfully.



Source Code

  1. <div><button onclick=" queryListItems ()">Click here to Create a List</button></div>
  3. <div id="displayDiv"></div>
  4. <script type="text/javascript">
  5. //This example gets all the items in the Announcements list that have a title that begins with 'T'.
  6. //If your site doesn't include a list called Announcements you must make the changes indicated
  8. //This variable will hold a reference to the Announcements list items collection
  9. var returnedItems = null;
  11. //This function loads the list and runs the query asynchronously
  12. function queryListItems() {
  13. //Get the current context
  14. var context = new SP.ClientContext();
  15. //Get the Announcements list. Alter this code to match the name of your list
  16. var list = context.get_web().get_lists().getByTitle('Announcements');
  17. //Create a new CAML query
  18. var caml = new SP.CamlQuery();
  19. //Create the CAML that will return only items with the titles that begin with 'T'
  20. caml.set_viewXml("<View><Query><Where><BeginsWith><FieldRef Name='Title' /><Value Type='Text'>T</Value></BeginsWith> </Where></Query></View>");
  21. //Specify the query and load the list oject
  22. returnedItems = list.getItems(caml);
  23. context.load(returnedItems);
  24. //Run the query asynchronously, passing the functions to call when a response arrives
  25. context.executeQueryAsync(onSucceededCallback, onFailedCallback);
  26. }
  28. //This function fires when the query completes successfully
  29. function onSucceededCallback(sender, args) {
  30. //Get an enumerator for the items in the list
  31. var enumerator = returnedItems.getEnumerator();
  32. //Formulate HTML from the list items
  33. var markup = 'Items in the Announcements list that start with "T": <br><br>';
  34. //Loop through all the items
  35. while (enumerator.moveNext()) {
  36. var listItem = enumerator.get_current();
  37. markup += 'Item Title: ' + listItem.get_item('Title') + '<br>';
  38. markup += 'Item ID: ' + listItem.get_id() + '<br><br>';
  39. }
  40. //Display the formulated HTML in the displayDiv element
  41. displayDiv.innerHTML = markup;
  42. }
  43. //This function fires when the query fails
  44. function onFailedCallback(sender, args) {
  45. //Formulate HTML to display details of the error
  46. var markup = '<p>The request failed: <br>';
  47. markup += 'Message: ' + args.get_message() + '<br>';
  48. //Display the details
  49. displayDiv.innerHTML = markup;
  50. }
  51. </script>

Thanks for reading my article.