Hi Darsh,
Its very simple and achievable. To achieve this you can use REST API or cross domain calls. Please refer the below links which will guide you more on this.
http://www.plusconsulting.com/blog/2013/05/crud-on-list-items-using-rest-services-jquery/
Its very Simple & easy. Below is the code of CRUD operation.
Inserting Data in to SP Hosted List
<script type="text/javascript">
function AddCar() {
//Retrieve the txtTitle and check if it has some text.
var txtTitle = document.getElementById("txtTitle");
var txtuname = document.getElementById("txtuname");
var txtAddress = document.getElementById("txtAddress");
var txtMail = document.getElementById("txtMail");
var txtMobile = document.getElementById("txtMobile");
// alert(txtMobile.value);
if (txtTitle.value == "") {
alert("please enter a Title");
return;
}
//Retrieve the clientContext
var clientContext = SP.ClientContext.get_current();
//Retrieve the current website
var webSite = clientContext.get_web();
//Retrieve the lists
var lists = webSite.get_lists();
//Get the List
var empList = lists.getByTitle("Test");
//Create new IteamCreationInformation
var itemCreationInfo = new SP.ListItemCreationInformation();
//the addItem takes the itemCreationInformation object
//and returns the listItem
var listItem = empList.addItem(itemCreationInfo);
//Set the title of the list Item
//to the value in the txtCar
listItem.set_item("Title", txtTitle.value);
listItem.set_item("Name1", txtuname.value);
listItem.set_item("Emp_x005f_Addres", txtAddress.value);
listItem.set_item("Emp_x005f_Ph", txtMobile.value);
listItem.set_item("Emp_x005f_mail", txtMail.value);
//Call Update the listItem
listItem.update();
//Finally execute the operation
//pass to it a 2 callBack methods OnSucceed and OnFailure
clientContext.executeQueryAsync(
Function.createDelegate(this,this.Succeeded)
,Function.createDelegate(this,this.Failed));
}
function Succeeded() {
alert("Item Inserted in Test list");
window.location.replace("https://technocorp2-6491275697b8db.sharepoint.com/sites/DevSite1/SPList/Pages/NewItem.aspx");
}
function Failed(sender,args) {
alert("fail");
}
//function blank() {
// txtTitle.value = "";
// txtuname.value = "";
// txtAddress.value = "";
// txtMobile.value = "";
// txtMail.value = "";
// fnGetData();
//}
</script>
Retrieve SP Hosted List Into Page
<script type="text/javascript">
window.onload= function fnGetData() {
context = new SP.ClientContext.get_current();
web = context.get_web();
var list = web.get_lists().getByTitle('Test');
var myquery = new SP.CamlQuery();
myquery.set_viewXml("<View><Query>" +
"<Where>" +
"<IsNotNull>" +
"<FieldRef Name='Title' />" +
"</IsNotNull>" +
"</Where>" +
"</Query></View>");
myquery.set_datesInUtc(false);
myItems = list.getItems(myquery);
context.load(myItems);
context.executeQueryAsync(Function.createDelegate(this, function () { fnGetDataSuccess(); }), Function.createDelegate(this, this.fnGetDataFailed));
}
function fnGetDataSuccess() {
var num = 0;
var txtHTML = "";
var ListEnumeratorAcc = this.myItems.getEnumerator();
txtHTML = txtHTML + "<thead><tr><th>ID</th><th>Title</th><th>Name </th><th>Address </th><th>Mobile Number</th><th>E-Mail</th></tr></thead>";
while (ListEnumeratorAcc.moveNext()) {
var currentItem = ListEnumeratorAcc.get_current();
txtHTML = txtHTML + "<tr>";
txtHTML = txtHTML + "<td>";
if (currentItem.get_item('ID') != null) {
txtHTML = txtHTML + currentItem.get_item('ID');
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td>";
if (currentItem.get_item('Title') != null) {
txtHTML = txtHTML + currentItem.get_item('Title');
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td>";
if (currentItem.get_item('Name1') != null) {
txtHTML = txtHTML + currentItem.get_item('Name1');
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td>";
if (currentItem.get_item('Emp_x005f_Addres') != null) {
txtHTML = txtHTML + currentItem.get_item('Emp_x005f_Addres');
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td>";
if (currentItem.get_item('Emp_x005f_Ph') != null) {
txtHTML = txtHTML + currentItem.get_item('Emp_x005f_Ph');
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td>";
if (currentItem.get_item('Emp_x005f_mail') != null) {
txtHTML = txtHTML + currentItem.get_item('Emp_x005f_mail');
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td><a href='https://technocorp2-6491275697b8db.sharepoint.com/sites/DevSite1/SPList/Pages/edit.aspx?ID=" + currentItem.get_item('ID') + "'>Edit</a>";
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "</tr>";
}
$("#tblCustomListData").append(txtHTML);
// $("#tblCustomListData").append(txtHTML);
}
function fnGetDataFailed(sender, args) {
alert("Error Message:\n" + "URL: " + sender.get_url() + ". \n\Error Description:" + args.get_message());
}
</script>
<table id="tblCustomListData" border="1" style="padding-">
</table>
Edit Items on SP Hosted APP List
<script type="text/javascript">
function Editform() {
//Retrieve the txtTitle and check if it has some text.
var txtTitle = document.getElementById("txtTitle");
var txtuname = document.getElementById("txtuname");
var txtAddress = document.getElementById("txtAddress");
var txtMail = document.getElementById("txtMail");
var txtMobile = document.getElementById("txtMobile");
var clientContext = SP.ClientContext.get_current();
var webSite = clientContext.get_web();
var lists = webSite.get_lists();
var empList = lists.getByTitle("Test");
this.listItem = empList.getItemById(uid);
listItem.set_item("Title", txtTitle.value);
listItem.set_item("Name1", txtuname.value);
listItem.set_item("Emp_x005f_Addres", txtAddress.value);
listItem.set_item("Emp_x005f_Ph", txtMobile.value);
listItem.set_item("Emp_x005f_mail", txtMail.value);
listItem.update();
clientContext.executeQueryAsync(
Function.createDelegate(this, this.Succeeded)
, Function.createDelegate(this, this.Failed));
}
function Succeeded() {
alert("Item updated");
window.location.replace("https://technocorp2-6491275697b8db.sharepoint.com/sites/DevSite1/SPList/Pages/NewItem.aspx");
}
function Failed(sender, args) {
alert("fail");
}
//function blank() {
// txtTitle.value = "";
// txtuname.value = "";
// txtAddress.value = "";
// txtMobile.value = "";
// txtMail.value = "";
// fnGetData();
//}
</script>
Delete Items froms SP Hosted APP List
<script type="text/javascript">function Deleteitem() {
var clientContext = new SP.ClientContext();
var targetList = clientContext.get_web().get_lists().getByTitle('Test');
targetListItem = targetList.getItemById(itemId);
targetListItem.deleteObject();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded1), Function.createDelegate(this, this.onQueryFailed1));
}
function onQuerySucceeded1() {
alert('Item deleted' + itemId);
window.location.replace("https://technocorp2-6491275697b8db.sharepoint.com/sites/DevSite1/SPList/Pages/NewItem.aspx");
}
function onQueryFailed1(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
- Proposed as answer by Harsh Khare 9 minutes ago
ohh wow!! Its working for me, thanks alot Mr. Abhilash Savita.
Looking forward for some more from you .
- Proposed as answer by srajan mishra 32 minutes ago
ohh wow!! Its working for me, thanks alot Mr. Abhilash Savita.
Looking forward for some more from you .
This topic is archived. No further replies will be accepted.
Other recent topics
