SharePoint ECMA example

Here in this article I am going to explain how to write the code using ECMA.

1. Open your SharePoint site
2. Create a list “SCHOOL” using custom list template
3. Create a column “Marks” with the Number field type, Add few sample records/items
4. Open the site in SharePoint Designer
4. Add an *.aspx page with the SharePoint default master page
5. Add the below code into the contentplaceholderid=PlaceHolderMain of the *.aspx page


<!-- BELOW USE YOUR Javascript FILES INSTEAD THE BELOW FILES -->
<script type="text/javascript" src="http://dc01:8888/SiteAssets/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://dc01:8888/SiteAssets/main.js"> </script>
  
   
<div id="divdisplay">
Program error..!
</div>

<table>
<tr><th colspan="2"></th></tr>
<tr><td>Name:</td><td><input id="txtName" type="text"/></td></tr>
<tr><td>Marks:</td><td><input id="txtMarks" type="text"/></td></tr>
<tr><td colspan="2" align="right">
<input type="button" value="Create" onclick="createItem()"/>
</td></tr>
</table>
To update or delete the item first enter the item id in to below text box and click.
<table>
<tr><td colspan="2"><input id="txtid" type="text"/></td></tr>
<tr><td colspan="2">
<input type="button" value="Update" onclick="updateItem()"/>
<input type="button" value="Delete" onclick="deleteItem()"/>
</td></tr>

</table>

6. Once done with the design page, Please open the *.js file and add the below code in to the Javascript file


var context = "";
var web = "";
var list = "";
var item = "";
var lists = "";
var collListItem = "";

$(document).ready(function () {
	ExecuteOrDelayUntilScriptLoaded(RetrieveListItems, "sp.js");
});

function RetrieveListItems() {
	debugger;
	context = new SP.ClientContext.get_current();
	web = context.get_web();

	lists = web.get_lists();

	list = web.get_lists().getByTitle('SCHOOL');


	context.load(this.web);
	context.load(this.lists);
	context.load(this.list);

	context.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure));
}

function onSuccess() {
	//debugger
	context.load(list);
	var itemsCount = list.get_itemCount();
	//if you are not passing any CAML query then have to use createAllItemsQuery()
	var camlQuery = new SP.CamlQuery.createAllItemsQuery();
	//var camlQuery = new SP.CamlQuery();
	//camlQuery.set_viewXml('<View><Query><Where><Gt><FieldRef Name="Marks" /><Value Type="Number">40</Value></Gt></Where></Query></View>');
	collListItem = list.getItems(camlQuery);
	context.load(collListItem);
	context.executeQueryAsync(Function.createDelegate(this, this.viewItems), Function.createDelegate(this, this.onFailure));
}

function viewItems() {
	var listItemInfo = '<table>';

	var listItemEnumerator = collListItem.getEnumerator();
	
	while (listItemEnumerator.moveNext()) {
		var oListItem = listItemEnumerator.get_current();

		listItemInfo += "<tr>";
		listItemInfo += "<td>" + oListItem.get_id() + "</td>";
		listItemInfo += "<td>" + oListItem.get_item('Title') + "</td>";
		listItemInfo += "<td>" + oListItem.get_item('Marks') + "</td>";
		listItemInfo += "</tr>";
	}
	listItemInfo += "</table>";
	document.getElementById('divdisplay').innerHTML = listItemInfo;
}

function onFailure(sender, args) {
	alert('Request failed.' + args.get_message() + ' \n' + args.get_stackTrace());
}


function createItem() {
	//alert("Working");
	var strName = document.getElementById("txtName").value;
	var strMarks = document.getElementById("txtMarks").value;

	var itemCreateInfo = new SP.ListItemCreationInformation();
	this.item = this.list.addItem(itemCreateInfo);


	item.set_item('Title', strName);
	item.set_item('Marks', strMarks);

	item.update();
	context.load(item);
	
	context.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onFailure));
}

function onQuerySucceeded() {
	
	$('#txtName').val('');
	$('#txtMarks').val('');
	onSuccess();
}

function updateItem() {
	
	var strName = document.getElementById("txtName").value;
	var strMarks = document.getElementById("txtMarks").value;

	var strid = document.getElementById("txtid").value;
	this.item = this.list.getItemById(strid);

	item.set_item('Title', strName);
	item.set_item('Marks', strMarks);

	item.update();
	context.load(item);
	context.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onFailure));
}


function deleteItem()
{
	var strid = document.getElementById("txtid").value;
	this.item = this.list.getItemById(strid);
    item.deleteObject();
	context.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onFailure));
}

7. Now run the *.aspx page.

If any errors occur please post comment.

Vijay

Vijay Bhaskar from Hyderabad. Here in the IT industry for years and during these days I have enjoyed working with Microsoft Technologies such as Office 365, SharePoint 2013/2010, MOSS 2007, Asp.Net, C#.Net and Ajax, jQuery, JSON, ECMA, Angular etc. Currently working for Capgemini and Microsoft certified developer for SharePoint. During this period worked on various concepts like Office Apps, SharePoint Apps ( Provider hosted, SharePoint hosted), Azure, Workflows, Web part development, SSOM, CSOM, JSOM, SPServices, SharePoint Master Pages, SharePoint custom pages, SharePoint on Azure.

Leave a Reply

Your email address will not be published. Required fields are marked *