Refer some basic links: List Operations on Sharepoint Apps: using ECMAScript
Check whether the list exists or not using ECMAScript
Create fields in sharepoint list using ECMAScript
Add below HTML in "PlaceHolderMain"section of .aspx page
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<script src="../JS/jquery-1.11.1.js"></script>
<script src="../JS/AddToList.js"></script>
<link href="../CSS/RefClass.css" rel="stylesheet" />
<div>
<p id="message">
<!-- The following content will be replaced with the user name when you run the app - see App.js -->
initializing...
</p>
</div>
<div>
<table border="1" cellpadding="1" cellspacing="1" class="style1" frame="box">
<tr>
<td>
<h3>Name *</h3>
</td>
<td>
<input type="text" id="txtName" />
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td>
<h3>Surname</h3>
</td>
<td>
<input type="text" id="txtSurname" />
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td>
<input type="button" id="btnSave" value="Save" onclick="SaveStudentToList();"></td>
</td>
<td>
<td> </td>
</tr>
<tr>
<td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div id="dvListView">
<table id="tblCustomListData" border="1">
<thead>
<tr>
<th>Name
</th>
<th>Surname
</th>
<th>Mathematics
</th>
<th>Chemistry
</th>
<th>Physics
</th>
<th>Action
</th>
</tr>
</thead>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
My .js code , added a reference in .aspx i.e. AddToList.js
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded("sp.js", RetrieveListItems());
});
function SaveStudentToList() {
var ctx = new SP.ClientContext.get_current();
var name = $("#txtName");
var surname = $("#txtSurname");
var lstStudent = ctx.get_web().get_lists().getByTitle('StudentList');
var itemCreateInfo = new SP.ListItemCreationInformation(lstStudent);
var studentItem = lstStudent.addItem(itemCreateInfo);
studentItem.set_item('Name1', name.val());
studentItem.set_item('Surname', surname.val());
studentItem.update();
ctx.load(studentItem);
ctx.executeQueryAsync(onQuerySucceededFinal, onQueryFailed);
}
function onQuerySucceededFinal() {
$("#txtName").text = "";
$("#txtSurname").text = "";
location.reload();
alert("Item added successfuly");
};
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
};
function RetrieveListItems() {
ctx = new SP.ClientContext.get_current();
web = ctx.get_web();
var list = web.get_lists().getByTitle('StudentList');
var myquery = new SP.CamlQuery.createAllItemsQuery();
allItems = list.getItems(myquery);
ctx.load(allItems);
ctx.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
}
function success() {
var Name = null;
var Surname = null;
var Mathematics = null;
var Chemistry = null;
var Physics = null;
var txtHTML = "";
var rowIDs = null;
var ListEnumerator = this.allItems.getEnumerator();
while (ListEnumerator.moveNext()) {
var currentItem = ListEnumerator.get_current();
Name = currentItem.get_item('Name1');
Surname = currentItem.get_item('Surname');
Mathematics = currentItem.get_item('Mathematics');
Chemistry = currentItem.get_item('Chemistry');
Physics = currentItem.get_item('Physics');
var row = document.createElement("tr");
var trID = 'tr' + currentItem.get_id();
txtHTML = txtHTML + "<tr id='"+ trID +"'>";
txtHTML = txtHTML + "<td>";
if (Name != null) {
txtHTML = txtHTML + "<p>" + Name + "</p>";
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td>";
if (Surname != null) {
txtHTML = txtHTML + "<p>" + Surname + "</p>";
}
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td style=' text-align:center'>";
if (Mathematics != null && Mathematics > 0 ) {
txtHTML = txtHTML + "<input type='text' readonly='readonly' id= math" + currentItem.get_id() + " class='math' value='"+ Mathematics +"' style='width : 46px ; text-align:center'/>";
}
else
txtHTML = txtHTML + "<input type='text' id= math" + currentItem.get_id() + " class='math' value='0' style='width : 46px ; text-align:center'/>";
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td style=' text-align:center'>";
if (Chemistry != null && Chemistry > 0 ) {
txtHTML = txtHTML + "<input type='text' readonly='readonly' id= chem" + currentItem.get_id() + " class='chem' value='" + Chemistry + "' style='width : 46px ; text-align:center'/>";
}
else
txtHTML = txtHTML + "<input type='text' id= chem" + currentItem.get_id() + " class='chem' value='0' style='width : 46px; text-align:center'/>";
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td style=' text-align:center'>";
if (Physics != null && Physics > 0 ) {
txtHTML = txtHTML + "<input type='text' readonly='readonly' id= phy" + currentItem.get_id() + " class='phy' value='" + Physics + "' style='width : 46px ; text-align:center'/>";
}
else
txtHTML = txtHTML + "<input type='text' id= phy" + currentItem.get_id() + " class='phy' value=' 0 ' style='width : 46px; text-align:center' />";
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "<td style=' text-align:center'>";
txtHTML = txtHTML + "<input type='image' src='../images/save.gif' style='height:30px;width:30px' OnClick='updateItems(" + currentItem.get_id() + ","+ trID +");'>" + "<input type='image' src='../images/delete.gif' style='height:30px;width:30px' OnClick='removeItems(" + currentItem.get_id() + ");'>";
txtHTML = txtHTML + "</td>";
txtHTML = txtHTML + "</tr>";
}
$("#tblCustomListData").append(txtHTML);
}
function failed(sender, args) {
alert("failed Message" + args.gte_message());
}
function removeItems(id) {
var ctx = new SP.ClientContext.get_current();
var lstStudent = ctx.get_web().get_lists().getByTitle('StudentList');
var itemToDelete = lstStudent.getItemById(id);
itemToDelete.deleteObject();
ctx.executeQueryAsync(deltedItemSuccess, deletedItemFailed);
};
function deltedItemSuccess() {
location.reload();
alert("Item has been deleted...");
};
function deletedItemFailed() {
alert("Failed to delete Item...");
};
function updateItems(id, trID) {
var mathematics = $(document.getElementById("math" + id)).val();
//var chemistry = document.getElementById(trID).cells[3].val();
var chemistry = $(document.getElementById("chem" + id)).val();
var physics = $(document.getElementById("phy" + id)).val();;
var ctx = new SP.ClientContext.get_current();
var lstStudent = ctx.get_web().get_lists().getByTitle('StudentList');
var itemToUpdate = lstStudent.getItemById(id);
itemToUpdate.set_item('Mathematics', mathematics);
itemToUpdate.set_item('Chemistry', chemistry);
itemToUpdate.set_item('Physics', physics);
itemToUpdate.update();
ctx.executeQueryAsync(UpdateSuccess, UpdateItemFailed);
};
function UpdateSuccess() {
location.reload();
alert('Item has been updated...');
};
function UpdateItemFailed() {
alert('Failed to update Item...');
}
No comments:
Post a Comment