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="/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)Read List item using REST:
//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 deferred = $.Deferred();
var serverURL = _spPageContextInfo.webAbsoluteUrl;
var ListName = "Sharepoint ListName"; var filterValue = "YourFilterValue";
var listURL = String.format("{0}/_api/web/lists/getbytitle('"+ListName+"')/items?$select=ColumnName1,ColumnName2,ColumnName3&$filter=Title eq '"+filterValue +"'",serverURL);
$.ajax({
url: listURL,
type: "GET",
headers: {"Accept": "application/json;odata=verbose"},
cache: false,
success: function(data){
var Name = data.d.results[0].ColumnName1;
//var anyColumn= data.d.ColumnName; //this code when filter list with item id
var Age = parseFloat(data.d.results[0].ColumnName2) + 1; //increasing age
alert("Name & Age:" + Name + '&' + Age );
deferred.resolve();
},
error: function(err){
alert("Request failed :"+JSON.stringify(err));
}
});
return deferred.promise();
}
//Read all List item using REST:
//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 deferred = $.Deferred();
var serverURL = _spPageContextInfo.webAbsoluteUrl;
var listURL = String.format("{0}/_api/web/lists/getbytitle('VLATestList')/items?$select=Title, Name, Age",serverURL);
$.ajax({
url: listURL,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: function(data){
// Looping multiple items
$.each(data.d.results, function(index, item){
alert("Item: " + index);
alert(item.Title); //You will get title here
alert(item.Name); //You will get name here
alert(item.Age); //You will get email here
});
},
error: function(err){
alert("Error while fetching list items: " + JSON.stringify(err));
}
});
return deferred.promise();
}
//Create List item using REST:
//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 serverURL = _spPageContextInfo.webAbsoluteUrl;
var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/items",serverURL);
$.ajax({
url: listUrl,
type: "POST",
data: JSON.stringify({
'__metadata': {'type': 'SP.Data.ListNameListItem' }, //(Ex. if our list name is testList then it should be like 'testListListItem')
'Title': 'ABC',
'Name': 'XYZ',
'Age': 10
}),
headers: {
"Accept": "application/json;odata=verbose",
"content-type": "application/json; odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(data){
alert("Item added successfully!");
},
error: function(err){
alert("Error while adding item: " + JSON.stringify(err));
}
});
}
//Update List item using REST:
//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 itemID = 1;
var serverURL = _spPageContextInfo.webAbsoluteUrl;
var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/getItemByStringId("+itemID+")",serverURL);
$.ajax({
url: listUrl,
type: "POST",
data: JSON.stringify(
{
'__metadata': {
'type': 'SP.Data.ListNameListItem' //(Ex. if our list name is testList then it should be like 'testListListItem')
},
'ColumnName1': "Our New Value",
'ColumnName2':"Our New Value",
}),
headers: {
"Content-Type": "application/json;odata=verbose",
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-Http-Method": "PATCH",
"IF-MATCH": "*"
},
success: function () {
// window.location = "<New URL to be redirected>";
alert('item updated & Updated ID:' +itemID);
},
error: function(err){
alert("Error while deleting item: " + JSON.stringify(err));
}
});
}
//Delete List item using REST:
//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 itemID = 7;
var serverURL = _spPageContextInfo.webAbsoluteUrl;
var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/items("+itemID+")",serverURL);
$.ajax({
url: listUrl,
type: "POST",
headers: {
"Accept": "application/json;odata=verbose",
"content-type": "application/json; odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "DELETE",
"If-Match": "*"
},
success: function(data){
alert("Item deleted successfully!");
},
error: function(err){
alert("Error while deleting item: " + JSON.stringify(err));
}
});
}
Here is some other useful links for your reference link1 Link2 Link 3
CRUD operations using JSOM : Click HereClick Here
From this link you can find the difference between CSOM vs JSOM vs SSOM vs REST
No comments:
Post a Comment