CRUD Operation In SharePoint Using JavaScript

CRUD operations using JavaScript are common programs for anyone who is a beginner, intermediate or expert level. During CRUD operations, the programmer is facing different types of errors and it will take lot of time to resolve.

This article shows how to insert, update and delete the records in SharePoint List, using client side code.

SharePoint 2013 provides a JavaScript Object Model to interact with SharePoint list or library by use of .js files. Here, we should use any editor to write the code.

 

Once we finish the code, we have to use it as inline inside a SharePoint site. Please look into the code given below for adding an item in a list, using JavaScript Object Model.

To create a list item, you should always use ListItemCreationInformation object.

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script type="text/javascript">
var clientContext;
var oListItem;
var itemId;
var oList;

function createListItem() {
clientContext = new SP.ClientContext.get_current();
oList = clientContext.get_web().get_lists().getByTitle('Emp_Details');

var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);

var FirstName = "Raj";
var LastName = "Kiran";

oListItem.update();

clientContext.load(oListItem);

clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQueryInsertSucceeded),
Function.createDelegate(this, this.onQueryInsertFailed));
}

function onQueryInsertSucceeded() {
alert('Item Inserted: ');
}

function onQueryInsertFailed() {
alert("Item Insert Failed");
}
</script>

Updating  item in a list using Javascript object model

To update the item in a list, you should always use an updatet() function of the object. getItemId(1) means , it will delete the item, where id=1.

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script type="text/javascript">
var clientContext;
var oListItem;
var itemId;
var oList;

function createListItem() {
clientContext = new SP.ClientContext.get_current();
oList = clientContext.get_web().get_lists().getByTitle('Emp_Details');

this.oListItem =oList.getItemById(1);

oListItem.set_item('Title', 'My Updated New Title');

oListItem.update();


clientContext.load(oListItem);

clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQueryInsertSucceeded),
Function.createDelegate(this, this.onQueryInsertFailed));
}

function onQueryInsertSucceeded() {
alert('Item Updated: ');
}

function onQueryInsertFailed() {
alert("Item Update Failed");
}
</script>

Deleting an item in a list using JavaScript Object Model

To delete the item in a list, you should always use deleteobject() function of the object. getItemId(1) means , it will delete the item, where id=1. 

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script type="text/javascript">
var clientContext;
var oListItem;
var itemId;
var oList;

function createListItem() {
clientContext = new SP.ClientContext.get_current();
oList = clientContext.get_web().get_lists().getByTitle('Emp_Details');

this.oListItem =oList.getItemById(1);

oListItem.deleteObject();


clientContext.load(oListItem);

clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQueryInsertSucceeded),
Function.createDelegate(this, this.onQueryInsertFailed));
}

function onQueryInsertSucceeded() {
alert('Item Deleted: ');
}

function onQueryInsertFailed() {
alert("Item Deleted Failed");
}
</script>

Once everything is completed, open your target site.

1. Create a page.
2. Edit the page.
3. Add Webparts-> Add Script Editor Webpart
4. Add your code inside Script Editor webpart.
5. Now, click OK. 

Thank you for reading my blog.