CRUD Operations using JSOM in SharePoint 2013
CRUD OPERATIONS USING JSOM IN SHAREPOINT 2013
Here you can find the some basic operation(Create,Update,Read,Delete) list items in SharePoint 2013 using JSOM. We can use the Content Editor web part to call the script files.
Include Script files in Content Editor:
Go to content editor -> Edit Source -> enter the code like below (code for including the script files)For 'jquery.min.js' we can either use direct link from online or we can download to our SharePoint library & We can use that.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/sites/<site>/<subsite>/SiteAssets/jquery-1.11.1.min.js"></script>
<script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.js" type="text/javascript"></script>
<script src="/sites/<site>/<subsite>/SiteAssets/Test.js" type="text/javascript"></script>
<button onclick="LoadControls()" type="submit">submit</button>
If you want to include any CSS files then include the below line
<link rel="stylesheet" type="text/css" href="/sites/<site>/<subsite>/SiteAssets/any.css"/>
Create & Upload your javascript file(s) ("Test.js") in SiteAssets/Any Library. User the below code in Test.js file.
(Test.js Code)Create List item:
//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls); //we can also use this function to load sp.js(which we mentioned(sp.js) in the Content editor)
function LoadControls()
{
{
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('VLATestList');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title','Our New List Item Title'); // Also we can user this code to get dynamic values-> var varTitle = document.getElementById("TextboxID").value; OR q1 = $("#TextboxID").val();
oListItem.set_item('Name','Our New List Item Name');
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded()
{
{
alert('item Created, Item ID:' + oListItem.get_id());
}
function onQueryFailed(sender, args)
{
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
Read a list item:
//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls); //we can also use this function to load sp.js(which we mentioned(sp.js) in the Content editor)
function LoadControls()
{
{
var varItemID=1;
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('ListName');
this.oListItem = oList.getItemById(varItemID);
clientContext.load(oListItem);
//clientContext.load(collTermListItem, 'Include(Title)'); //load only Title
clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
}
function onQuerySucceeded()
{
{
alert('Item Title: ' + oListItem.get_item("Title"));
}
function onQueryFailed(sender, args)
{
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
Update List item:
//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls); //we can also use this function to load sp.js(which we mentioned(sp.js) in the Content editor)
function LoadControls()
{
{
var varItemID=1;
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('ListName');
this.oListItem = oList.getItemById(varItemID);
oListItem.set_item('Title','New Title');
oListItem.update();
clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
}
function onQuerySucceeded()
{
{
alert('Updated title: ' + oListItem.get_item("Title"));
}
function onQueryFailed(sender, args)
{
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
Delete List Item:
//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls); //we can also use this function to load sp.js(which we mentioned(sp.js) in the Content editor)
function LoadControls()
{
var varItemID=5;
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('ListName');
this.oListItem = oList.getItemById(varItemID);
oListItem.deleteObject();
//oListItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded()
{
{
alert('item deleted');
}
function onQueryFailed(sender, args)
{
{
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
CRUD operations using Rest : Click Here
Comments
Post a Comment