Saturday, November 28, 2015

Create, Update, Delete a List item Using Javascript Object Model (JSOM) in SharePoint 2010/2013

// Create a List item Using Javascript Object Model (JSOM) in SharePoint 2010/2013

<input type="text" name="txtTitle" id="txtTitle">Title</input><br/><br/>
<input type="text" name="txtEMPID" id="txtEMPID">Emp ID</input><br/><br/>
<input type="text" name="txtEMPNAME" id="txtEMPNAME">Emp Name</input>
<button id="btnAddItem" onclick="AddItem()">Add Item</button>

<script type="text/javascript">
function AddItem()
{
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('employee');
var txtTitleName= document.getElementById("txtTitle").value;
var txtEMPLOYEEID= document.getElementById("txtEMPID").value;
var txtEMPLOYEENAME= document.getElementById("txtEMPNAME").value;
var item = new SP.ListItemCreationInformation();
var oListItem = oList.addItem(item);
oListItem.set_item('Title', txtTitleName);
oListItem.set_item('empid',txtEMPLOYEEID);
oListItem.set_item('empname',txtEMPLOYEENAME);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );
}
function onQuerySucceeded() {
    alert('Item created!');
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() +
        '\n' + args.get_stackTrace());
}
</script>
// End code, Create a List item Using Javascript Object Model (JSOM)

====================================================================

// Update a List item Using Javascript Object Model (JSOM) in SharePoint 2010/2013
<input type="button" id="btnUpdateItem" onclick="UpdateItem()" value="Update Item"></input>
Enter Employee ID <input type="text" name="txtID" id="txtID"></input><br/><br/>
Enter the Text to update the Title: <input typr="text" name="txtContent" id="txtContent"></input><br/><br/><br/>
Enter the Text to update the Employee: <input typr="text" name="txtEMPName" id="txtEMPName"></input><br/><br/><br/>
<script type="text/javascript">
function UpdateItem()
{
var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('employee');
    var txtEmployeeID= document.getElementById("txtID").value;
    var oListItem = oList.getItemById(txtEmployeeID);
    var txtContentValue=document.getElementById("txtContent").value;
    var txtEmployeeValue = document.getElementById("txtEMPName").value;
    oListItem.set_item('Title', txtContentValue);
    oListItem.set_item('empname', txtEmployeeValue);
    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());
}
</script>

// End code, Update a List item Using Javascript Object Model (JSOM)
========================================================================

// Delete a List item Using Javascript Object Model (JSOM) in SharePoint 2010/2013
 Enter the Item ID: <input type="text" name="txtID" id="txtID"></input>
<button id="btnDeleteItem" onclick="deleteItem()">Delete Item</button><br/>
<script type="text/javascript">
// delete list item
function deleteItem()
{
var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('employee');
   // clientContext.load(oList);
    var itemId = document.getElementById("txtID").value;
        alert(itemId);
        this.lstObjectItem = oList.getItemById(itemId);
        lstObjectItem.deleteObject();
        oList.update();
        clientContext.executeQueryAsync(deleteItemSuccess, deleteItemFailed);
}
 function deleteItemSuccess() {
        var listItemInfo = 'Item deleted: ';
        alert(listItemInfo);
    }
    function deleteItemFailed(sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>

// End code, delete a List item Using Javascript Object Model (JSOM)

No comments:

Post a Comment