CRUD Operations using JSOM

Let us consider the below list “Resource” on which CRUD Operations are to be performed using JavaScript.

 

Resource.PNG

Read Operation:

<script src="/SiteAssets/jquery.min.js"></script>
<script>
_spBodyOnLoadFunctionNames.push("Read");
function Read()
{
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var oList = web.get_lists().getByTitle('Resource');
var camlQuery = new SP.CamlQuery();
var Query='<View><Query><FieldRef Name="Title"/></Query></View>';
camlQuery.set_viewXml(Query);
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, QuerySucceeded), Function.createDelegate(this, this.QueryFailed));
}
function QuerySucceeded()
{
var shtml="";
var listItemEnumerator = collListItem.getEnumerator();
while(listItemEnumerator.moveNext())
{
var oListItem = listItemEnumerator.get_current();
var s=oListItem.get_item('Title');
shtml+="
" +s+ "
";
}
document.getElementById("Result").innerHTML=shtml;
}
function QueryFailed(sender, args)
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<label for="Result">Resources:</label>
<div id="Result"></div>

RESULT:

READ-JSOM.PNG

Create Operation:

<script src="/SiteAssets/jquery.min.js"></script>
<script>
function create()
{
var name=document.getElementById("resName").value;
var role=document.getElementById("resRole").value;
var clientContext = SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Resource');
var itemCreateInfo = new SP.ListItemCreationInformation();
var oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title',name);
oListItem.set_item('Resource_x0020_Role',role);
oListItem.update();
clientContext.executeQueryAsync(QuerySucceeded, QueryFailed);
}
function QuerySucceeded()
{
alert("Record Created");
}
function QueryFailed(sender, args)
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<table>
<tr>
<td><label for="resName">Enter the Resource Name:</label></td>
<td><input type="text" id="resName"/></td>
</tr>
<tr>
<td><label for="resRole">Enter the Resource Role:</label></td>
<td><input type="text" id="resRole"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Create" onclick="create()"></td>
</tr>
</table>

RESULT:

 

Update Operation:

<script src="/SiteAssets/jquery.min.js"></script>
<script>
function Update()
{
var role=document.getElementById("resRole").value;
var resourceId=document.getElementById("resId").value;
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Resource');
this.oListItem = oList.getItemById(resourceId);
oListItem.set_item('Resource_x0020_Role', role);
oListItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.QuerySucceeded), Function.createDelegate(this, this.QueryFailed));
}
function QuerySucceeded()
{
alert("Record Updated");
}
function QueryFailed(sender, args)
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<table>
<tr>
<td><label for="resId">Enter the ID:</label></td>
<td><input type="text" id="resId"/></td>
</tr>
<tr>
<td><label for="resRole">Enter the Resource Role:</label></td>
<td><input type="text" id="resRole"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Update" onclick="Update()"></td>
</tr>
</table>

RESULT:

Delete Operation:

<script src="/SiteAssets/jquery.min.js"></script>
<script>
function Delete()
{
var resourceId=document.getElementById("resId").value;
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Resource');
this.oListItem = oList.getItemById(resourceId);
oListItem.deleteObject();
clientContext.executeQueryAsync(Function.createDelegate(this, this.QuerySucceeded), Function.createDelegate(this, this.QueryFailed));
}
 
function QuerySucceeded()
{
alert("Record Deleted");
}
function QueryFailed(sender, args)
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<table>
<tr>
<td><label for="resId">Enter the ID:</label></td>
<td><input type="text" id="resId"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Delete" onclick="Delete()"></td>
</tr>
</table>

RESULT:

Advertisements

Leave a Comment

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