To load the Java script Client Object Model,
we have to call ExecuteOrDelayUntilScriptLoaded(Func, "sp.js") . This function takes the name of the function that need to be executed as a main function and will load the SP.js file, which is the core of Client Object Model. We have to load the current context in order to play with the site content by SP.ClientContext and then get the current site by calling get_web()function of current context. After getting the current site we call getByTitle to get the Product list and then we loaded that list. Note that we are not loading all the objects but only the list. Loading all the objects will cause delay and performance issues. We are loading the list asynchronously and if the call is successful OnSuccess()will be called and if the call failes OnFail() will be called.
Writing the ECMAScript
- Create a list called Product and add few items in it.
- Create a test ASPX page in the Pages library.
- Add the Content Editor web part and add the following script in it.
Creating a List Item Using ECMAScript (JavaScript, JScript)
var siteUrl = '/sites/MySiteCollection'; function createListItem() { var clientContext = new SP.ClientContext(siteUrl); var oList = clientContext.get_web().get_lists().getByTitle('Announcements'); var itemCreateInfo = new SP.ListItemCreationInformation(); this.oListItem = oList.addItem(itemCreateInfo); oListItem.set_item('Title', 'My New Item!'); oListItem.set_item('Body', 'Hello World!'); oListItem.update(); clientContext.load(oListItem); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded() { alert('Item created: ' + oListItem.get_id()); } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
Updating a List Item Using JavaScript
var siteUrl = '/sites/MySiteCollection'; function updateListItem() { var clientContext = new SP.ClientContext(siteUrl); var oList = clientContext.get_web().get_lists().getByTitle('Announcements'); this.oListItem = oList.getItemById(3); oListItem.set_item('Title', 'My Updated Title'); oListItem.update(); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded() { alert('Item updated!'); } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
Deleting a List Item Using JavaScript
var siteUrl = '/sites/MySiteCollection'; function deleteListItem() { this.itemId = 2; var clientContext = new SP.ClientContext(siteUrl); var oList = clientContext.get_web().get_lists().getByTitle('Announcements'); this.oListItem = oList.getItemById(itemId); oListItem.deleteObject(); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded() { alert('Item deleted: ' + itemId); } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
Example: 2
var siteUrl = '/sites/MySiteCollection'; function deleteListItemDisplayCount() { this.clientContext = new SP.ClientContext(siteUrl); this.oList = clientContext.get_web().get_lists().getByTitle('Announcements'); clientContext.load(oList); clientContext.executeQueryAsync(Function.createDelegate(this, this.deleteItem), Function.createDelegate(this, this.onQueryFailed)); } function deleteItem() { this.itemId = 58; this.startCount = oList.get_itemCount(); this.oListItem = oList.getItemById(itemId); oListItem.deleteObject(); oList.update(); clientContext.load(oList); clientContext.executeQueryAsync(Function.createDelegate(this, this.displayCount), Function.createDelegate(this, this.onQueryFailed)); } function displayCount() { var endCount = oList.get_itemCount(); var listItemInfo = 'Item deleted: ' + itemId + '\nStart Count: ' + startCount + ' End Count: ' + endCount; alert(listItemInfo) } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
0 comments: