SharePoint

SharePoint Hosted App Data Manipulation With Office 365 Using Custom JavaScript Library - Part 2

Previously, we discussed about part 1 of the series. 

Here are the steps for part 2 of the series, 
 
Step 1: User Interface Design to perform CRUD operation with Office 365 SharePoint List.


In order to continue further I will add new files into project solution as in the following screenshot,


Source Code: To generate user interface we need html controls on page. Please refer the following code in order to create above user interface.

  1. <%@ Page Language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  2.   
  3.     <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  4.         <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  5.             <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  6.   
  7.                 <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">  
  8.                     <SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />  
  9.                     <script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>  
  10.                     <script src="../Scripts/AdvanceLibrary.js" type="text/javascript"></script>  
  11.   
  12.                     <link href="../Content/App.css" rel="stylesheet" />  
  13.                 </asp:Content>  
  14.   
  15.                 <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
  16.                     <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" />  
  17.   
  18.                     <div>  
  19.                         <div class="bodyLeft">  
  20.                             <div>  
  21.                                 List Name :  
  22.                                 <input type="text" id="txtListName" />  
  23.                             </div>  
  24.                             <hr />  
  25.                             <div>  
  26.                                 <h2><b>List Creation</b></h2>  
  27.                                 <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWCreateList()">Create List</a>  
  28.                             </div>  
  29.                             <hr />  
  30.                             <div>  
  31.                                 <h2><b>Add List Item</b></h2>  
  32.                                 <%-- <br />    
  33.     
  34.                 List Name :     
  35.                 <input type="text" id="txtExistingListName" />--%>  
  36.   
  37.                                     <table>  
  38.                                         <tr>  
  39.                                             <th>Field Name</th>  
  40.                                             <th>Field Value</th>  
  41.                                         </tr>  
  42.                                         <tr>  
  43.                                             <td>  
  44.                                                 <input type="text" id="Input1" />  
  45.                                             </td>  
  46.                                             <td>  
  47.                                                 <input type="text" id="Val1" />  
  48.                                             </td>  
  49.                                         </tr>  
  50.                                         <tr>  
  51.                                             <td>  
  52.                                                 <input type="text" id="Input2" />  
  53.                                             </td>  
  54.                                             <td>  
  55.                                                 <input type="text" id="Val2" />  
  56.                                             </td>  
  57.                                         </tr>  
  58.                                         <tr>  
  59.                                             <td>  
  60.                                                 <input type="text" id="Input3" />  
  61.                                             </td>  
  62.                                             <td>  
  63.                                                 <input type="text" id="Val3" />  
  64.                                             </td>  
  65.                                         </tr>  
  66.                                         <tr>  
  67.                                             <td>  
  68.                                                 <input type="text" id="Input4" />  
  69.                                             </td>  
  70.                                             <td>  
  71.                                                 <input type="text" id="Val4" />  
  72.                                             </td>  
  73.                                         </tr>  
  74.                                     </table>  
  75.                                     <br />  
  76.                                     <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWCreateListItem()">Add List Data</a>  
  77.                             </div>  
  78.                             <hr />  
  79.                             <div>  
  80.                                 <h2><b>Update List Item</b></h2>  
  81.                                 <%-- <br />    
  82.     
  83.                 List Name :    
  84.                 <input type="text" id="txUpdationList" />--%>  
  85.   
  86.                                     <table>  
  87.                                         <tr>  
  88.                                             <th>Field Name</th>  
  89.                                             <th>Field Value</th>  
  90.                                         </tr>  
  91.                                         <tr>  
  92.                                             <td>  
  93.                                                 <input type="text" id="UpdateField1" />  
  94.                                             </td>  
  95.                                             <td>  
  96.                                                 <input type="text" id="UpdateVal1" />  
  97.                                             </td>  
  98.                                             <td>Where ID =  
  99.                                                 <input type="text" id="txtUpdateID" />  
  100.                                             </td>  
  101.                                         </tr>  
  102.                                     </table>  
  103.                                     <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWUpdateListItem()">Update List Data</a>  
  104.                             </div>  
  105.                             <hr />  
  106.                             <div>  
  107.                                 <h2><b>Delete List Item</b></h2>  
  108.                                 <%-- <br />    
  109.     
  110.                 List Name :     
  111.                 <input type="text" id="txtListDeletion" />--%>  
  112.                                     Where ID =  
  113.                                     <input type="text" id="txtDeletionID" />  
  114.   
  115.                                     <br />  
  116.                                     <a href="#" onclick="Wingtip.JSOMHostWebCollections.HWDeleteListItem()">Delete List Data</a>  
  117.                             </div>  
  118.   
  119.                         </div>  
  120.   
  121.                         <div class="bodyRight">  
  122.                             <div id="message"></div>  
  123.                             <div id="ListData"></div>  
  124.                         </div>  
  125.                     </div>  
  126.           </asp:Content>  

Step 2: Read List Data using custom JavaScript Library.

  1. var clientContext;  
  2. var factory;  
  3. var appContextSite;  
  4. var web;  
  5.   
  6. var collList;  
  7. var itemCreateInfo;  
  8. var param1, param2, param3;  
  9. var oList, targetList, listFields, oListItem, oField, itemId;  
  10.   
  11. var ExsitingListNameVal;  
  12. var targetList;  
  13.   
  14. window.Wingtip = window.Wingtip || {}  
  15.   
  16. Wingtip.JSOMHostWebCollections = function()  
  17. {  
  18.   
  19.     LoadlayoutsJS = function()   
  20.     {  
  21.   
  22.         //debugger    
  23.         hostweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPHostUrl"));  
  24.         appweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPAppWebUrl"));  
  25.   
  26.         var Sessionhostweburl = sessionStorage.getItem("hostweburl");  
  27.         var Sessionappweburl = sessionStorage.getItem("appweburl");  
  28.   
  29.         if (Sessionhostweburl == null || Sessionappweburl == null)  
  30.         {  
  31.             sessionStorage.setItem("hostweburl", hostweburl);  
  32.             sessionStorage.setItem("appweburl", appweburl);  
  33.         }  
  34.   
  35.         if (hostweburl == null || appweburl == null || hostweburl == 'undefined' || appweburl == 'undefined')  
  36.         {  
  37.             hostweburl = sessionStorage.getItem("hostweburl");  
  38.             appweburl = sessionStorage.getItem("appweburl");  
  39.         }  
  40.   
  41.         var scriptbase = hostweburl + "/_layouts/15/";  
  42.   
  43.         $.getScript(scriptbase + "SP.Runtime.js",  
  44.             function() {  
  45.                 $.getScript(scriptbase + "SP.js",  
  46.                     function() {  
  47.                         $.getScript(scriptbase + "SP.RequestExecutor.js", Wingtip.JSOMHostWebCollections.HWLoadClientContext);  
  48.                     }  
  49.                 );  
  50.             });  
  51.     }  
  52.   
  53.     getQueryStringParameter = function(paramToRetrieve)  
  54.     {  
  55.         //debugger    
  56.         try {  
  57.   
  58.             var params =  
  59.                 document.URL.split("?")[1].split("&");  
  60.             var strParams = "";  
  61.             for (var i = 0; i < params.length; i = i + 1)  
  62.             {  
  63.                 var singleParam = params[i].split("=");  
  64.                 if (singleParam[0] == paramToRetrieve)  
  65.                     return singleParam[1];  
  66.             }  
  67.         } catch (ex) {  
  68.   
  69.         }  
  70.   
  71.     }  
  72.   
  73.     LoadClientContext = function()  
  74.     {  
  75.   
  76.         //debugger    
  77.         clientContext = new SP.ClientContext(appweburl);  
  78.         factory = new SP.ProxyWebRequestExecutorFactory(appweburl);  
  79.         clientContext.set_webRequestExecutorFactory(factory);  
  80.         appContextSite = new SP.AppContextSite(clientContext, hostweburl);  
  81.   
  82.         web = appContextSite.get_web();  
  83.         clientContext.load(web);  
  84.   
  85.         Wingtip.JSOMHostWebCollections.HWReadListData();  
  86.     }  
  87.   
  88.     ReadListData = function()  
  89.     {  
  90.   
  91.         debugger  
  92.         var oList = web.get_lists().getByTitle("Book");  
  93.   
  94.         var camlQuery = new SP.CamlQuery();  
  95.         camlQuery.set_viewXml('<View><RowLimit></RowLimit>10</View>');  
  96.         var collListItem = oList.getItems(camlQuery);  
  97.   
  98.         //clientContext.load(collListItem);    
  99.         clientContext.load(collListItem, 'Include(ID,BookName,BookAuthor,BookPrice,BookVersion)');  
  100.   
  101.         clientContext.executeQueryAsync(  
  102.             Function.createDelegate(this, onQuerySucceeded),  
  103.             Function.createDelegate(this, onQueryFailed)  
  104.         );  
  105.   
  106.         function onQuerySucceeded(sender, args)  
  107.       {  
  108.   
  109.             var innerHtml = "<tr><td class='ListTH'>ID</td><td class='ListTH'>Book Name</td><td class='ListTH'>Book Author</td><td class='ListTH'>Book Price</td><td class='ListTH'>Book Version</td></tr>";  
  110.   
  111.             debugger  
  112.             var listItemInfo = '';  
  113.             var listItemEnumerator = collListItem.getEnumerator();  
  114.   
  115.             while (listItemEnumerator.moveNext())  
  116.             {  
  117.   
  118.                 var oListItem = listItemEnumerator.get_current();  
  119.   
  120.                 var ID = oListItem.get_item('ID');  
  121.                 var InputData1 = oListItem.get_item('BookName');  
  122.                 var InputData2 = oListItem.get_item('BookAuthor');  
  123.                 var InputData3 = oListItem.get_item('BookPrice');  
  124.                 var InputData4 = oListItem.get_item('BookVersion');  
  125.   
  126.                 innerHtml += "<tr class='ListTR'><td>" + ID + "</td><td>" + InputData1 + "</td><td>" + InputData2 + "</td><td>" + InputData3 + "</td><td>" + InputData4 + "</td></tr>";  
  127.                 //listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title') +  '\nBody: ' + oListItem.get_item('Input1');    
  128.             }  
  129.   
  130.             $("#ListData").html(innerHtml);  
  131.             //alert(listItemInfo.toString());    
  132.         }  
  133.   
  134.         function onQueryFailed(sender, args)  
  135.       {  
  136.             alert('Request failed. ' + args.get_message() +  
  137.                 '\n' + args.get_stackTrace());  
  138.         }  
  139.   
  140.     }  
  141.   
  142.     //public interface    
  143.     return   
  144.     {  
  145.   
  146.         HWLoadlayoutsJS: LoadlayoutsJS,  
  147.         QSParameter: getQueryStringParameter,  
  148.         HWLoadClientContext: LoadClientContext,  
  149.         HWCreateList: CreateList,  
  150.         HWCreateListItem: CreateListItem,  
  151.         HWUpdateListItem: UpdateListItem,  
  152.         HWDeleteListItem: DeleteListItem,  
  153.         HWClearAllTextBox: ClearAllTextBox,  
  154.         HWReadListData: ReadListData,  
  155.         HWEmpty: Empty  
  156.     }  
  157.   
  158. }();  
  159.   
  160. $(document).ready(function()  
  161. {  
  162.   
  163.     //Load Out Of Box JS file for List Operation    
  164.     Wingtip.JSOMHostWebCollections.HWLoadlayoutsJS();  
  165.   
  166. });  

 

Output

Step 3: Add List Item using JavaScript Object model as in the following,

  1. CreateListItem = function()   
  2. {  
  3.   
  4.     debugger  
  5.     //var ListNameVal = $(txtExistingListName).val();    
  6.     var ListNameVal = $(txtListName).val();  
  7.   
  8.     if (ListNameVal == "")  
  9.     {  
  10.         alert("Please Enter List Name");  
  11.         return;  
  12.     }  
  13.   
  14.     var list = web.get_lists();  
  15.     var targetList = list.getByTitle(ListNameVal);  
  16.     var itemCreateInfo = new SP.ListItemCreationInformation();  
  17.     oListItem = targetList.addItem(itemCreateInfo);  
  18.   
  19.     var Input1Val = $(Input1).val();  
  20.     var Input2Val = $(Input2).val();  
  21.     var Input3Val = $(Input3).val();  
  22.     var Input4Val = $(Input4).val();  
  23.   
  24.     var Val1Val = $(Val1).val();  
  25.     var Val2Val = $(Val2).val();  
  26.     var Val3Val = $(Val3).val();  
  27.     var Val4Val = $(Val4).val();  
  28.   
  29.   
  30.     if (Input1Val != "" && Val1Val != "")  
  31.         oListItem.set_item(Input1Val, Val1Val);  
  32.   
  33.   
  34.     if (Input2Val != "" && Val2Val != "")  
  35.         oListItem.set_item(Input2Val, Val2Val);  
  36.   
  37.     if (Input3Val != "" && Val3Val != "")  
  38.         oListItem.set_item(Input3Val, Val3Val);  
  39.   
  40.     if (Input4Val != "" && Val4Val != "")  
  41.         oListItem.set_item(Input4Val, Val4Val);  
  42.   
  43.     oListItem.update();  
  44.     clientContext.load(oListItem);  
  45.   
  46.     clientContext.executeQueryAsync(  
  47.         Function.createDelegate(this, CreateListItemSucceeded),  
  48.         Function.createDelegate(this, CreateListItemFailed)  
  49.     );  
  50.   
  51.     function CreateListItemSucceeded()  
  52.   {  
  53.         alert('Item Created Successfully : List Item ID -> ' + oListItem.get_id());  
  54.     }  
  55.   
  56.     function CreateListItemFailed(sender, args)  
  57.     {  
  58.         alert('Request failed. ' + args.get_message() +  
  59.             '\n' + args.get_stackTrace());  
  60.     }  
  61.   
  62. }  

 

Output



Item Insertion confirmation.


New Record added into list now.

Step 4: Update List item with respect to list item ID value. When you refer UI in order to update list item, we need to provide ID value.

  1. UpdateListItem = function(ListName, Input1, Val1)  
  2. {  
  3.   
  4.     debugger  
  5.   
  6.     //var ListNameVal = $(txUpdationList).val();    
  7.     var ListNameVal = $(txtListName).val();  
  8.   
  9.     if (ListNameVal == "")   
  10.     {  
  11.         alert("Please Enter List Name");  
  12.         return;  
  13.     }  
  14.   
  15.     var Input1Val = $(UpdateField1).val();  
  16.     var Val1Val = $(UpdateVal1).val();  
  17.   
  18.     var list = web.get_lists();  
  19.     oList = list.getByTitle(ListNameVal);  
  20.   
  21.     oListItem = oList.getItemById($(txtUpdateID).val());  
  22.     oListItem.set_item(Input1Val, Val1Val);  
  23.     oListItem.update();  
  24.   
  25.     clientContext.executeQueryAsync(  
  26.         Function.createDelegate(this, UpdateListItemSucceeded),  
  27.         Function.createDelegate(this, UpdateListItemFailed)  
  28.     );  
  29.   
  30.     function UpdateListItemSucceeded()   
  31.   {  
  32.         alert('Item Updated Successfully!');  
  33.     }  
  34.   
  35.     function UpdateListItemFailed(sender, args)  
  36.   {  
  37.         alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  38.     }  
  39. }  

 

Output 



Item update get confirmation now.

Step 5: Deletion of list item we can use the following code,

  1. DeleteListItem = function(ListName, ItemID)  
  2. {  
  3.   
  4.     debugger  
  5.   
  6.     //var ListNameVal = $(txtListDeletion).val();    
  7.     var ListNameVal = $(txtListName).val();  
  8.   
  9.     if (ListNameVal == "")  
  10.     {  
  11.         alert("Please Enter List Name");  
  12.         return;  
  13.     }  
  14.   
  15.     var Input1Val = $(txtDeletionID).val();  
  16.   
  17.     var list = web.get_lists();  
  18.     oList = list.getByTitle(ListNameVal);  
  19.   
  20.     oListItem = oList.getItemById(Input1Val);  
  21.     oListItem.deleteObject();  
  22.   
  23.     clientContext.executeQueryAsync(  
  24.         Function.createDelegate(this, deleteListItemSucceeded),  
  25.         Function.createDelegate(this, deleteListItemFailed)  
  26.     );  
  27.   
  28.     function deleteListItemSucceeded()  
  29.   {  
  30.         alert('Item Deleted Successfully');  
  31.     }  
  32.   
  33.     function deleteListItemFailed(sender, args)  
  34.   {  
  35.         alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  36.     }  
  37. }  

 

Output


Final Output

Step 6: Style sheet code in order to make UI more effective.

  1. /* Place custom styles below */  
  2. .bodyLeft  
  3. {  
  4.     float: left;  
  5.     padding: 15 px 15 px 10 px 15 px;  
  6.     border: 1 px solid black;  
  7. }  
  8.   
  9. .bodyRight  
  10. {  
  11.     float: left;  
  12.     padding: 15 px 5 px 5 px 25 px;  
  13. }  
  14.   
  15. table   
  16. {  
  17.     border - collapse: collapse;  
  18.     width: 100 % ;  
  19. }  
  20.   
  21. th, td  
  22. {  
  23.     text - align: left;  
  24.     padding: 8 px;  
  25. }  
  26.   
  27. .ListTR   
  28. {  
  29.     background - color: #f2f2f2  
  30. }  
  31.   
  32. .ListTH  
  33. {  
  34.     background - color: #4CAF50;    
  35.     color: white;    
  36. }  

 

Step 7: JavaScript complete source code.
  1. var clientContext;  
  2. var factory;  
  3. var appContextSite;  
  4. var web;  
  5.   
  6. var collList;  
  7. var itemCreateInfo;  
  8. var param1, param2, param3;  
  9. var oList, targetList, listFields, oListItem, oField, itemId;  
  10.   
  11. var ExsitingListNameVal;  
  12. var targetList;  
  13.   
  14. window.Wingtip = window.Wingtip || {}  
  15.   
  16. Wingtip.JSOMHostWebCollections = function()  
  17. {  
  18.   
  19.     LoadlayoutsJS = function()  
  20.     {  
  21.   
  22.         //debugger    
  23.         hostweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPHostUrl"));  
  24.         appweburl = decodeURIComponent(Wingtip.JSOMHostWebCollections.QSParameter("SPAppWebUrl"));  
  25.   
  26.         var Sessionhostweburl = sessionStorage.getItem("hostweburl");  
  27.         var Sessionappweburl = sessionStorage.getItem("appweburl");  
  28.   
  29.         if (Sessionhostweburl == null || Sessionappweburl == null)  
  30.         {  
  31.             sessionStorage.setItem("hostweburl", hostweburl);  
  32.             sessionStorage.setItem("appweburl", appweburl);  
  33.         }  
  34.   
  35.         if (hostweburl == null || appweburl == null || hostweburl == 'undefined' || appweburl == 'undefined') {  
  36.             hostweburl = sessionStorage.getItem("hostweburl");  
  37.             appweburl = sessionStorage.getItem("appweburl");  
  38.         }  
  39.   
  40.         var scriptbase = hostweburl + "/_layouts/15/";  
  41.   
  42.         $.getScript(scriptbase + "SP.Runtime.js",  
  43.             function() {  
  44.                 $.getScript(scriptbase + "SP.js",  
  45.                     function() {  
  46.                         $.getScript(scriptbase + "SP.RequestExecutor.js", Wingtip.JSOMHostWebCollections.HWLoadClientContext);  
  47.                     }  
  48.                 );  
  49.             });  
  50.     }  
  51.   
  52.     getQueryStringParameter = function(paramToRetrieve)   
  53.     {  
  54.         //debugger    
  55.         try {  
  56.   
  57.             var params =  
  58.                 document.URL.split("?")[1].split("&");  
  59.             var strParams = "";  
  60.             for (var i = 0; i < params.length; i = i + 1)   
  61.             {  
  62.                 var singleParam = params[i].split("=");  
  63.                 if (singleParam[0] == paramToRetrieve)  
  64.                     return singleParam[1];  
  65.             }  
  66.         } catch (ex) {  
  67.   
  68.         }  
  69.   
  70.     }  
  71.   
  72.     LoadClientContext = function()  
  73.     {  
  74.   
  75.         //debugger    
  76.         clientContext = new SP.ClientContext(appweburl);  
  77.         factory = new SP.ProxyWebRequestExecutorFactory(appweburl);  
  78.         clientContext.set_webRequestExecutorFactory(factory);  
  79.         appContextSite = new SP.AppContextSite(clientContext, hostweburl);  
  80.   
  81.         web = appContextSite.get_web();  
  82.         clientContext.load(web);  
  83.   
  84.         Wingtip.JSOMHostWebCollections.HWReadListData();  
  85.     }  
  86.   
  87.     ReadListData = function()  
  88.     {  
  89.   
  90.         debugger  
  91.         var oList = web.get_lists().getByTitle("Book");  
  92.   
  93.         var camlQuery = new SP.CamlQuery();  
  94.         camlQuery.set_viewXml('<View><RowLimit></RowLimit>10</View>');  
  95.         var collListItem = oList.getItems(camlQuery);  
  96.   
  97.         //clientContext.load(collListItem);    
  98.         clientContext.load(collListItem, 'Include(ID,BookName,BookAuthor,BookPrice,BookVersion)');  
  99.   
  100.         clientContext.executeQueryAsync(  
  101.             Function.createDelegate(this, onQuerySucceeded),  
  102.             Function.createDelegate(this, onQueryFailed)  
  103.         );  
  104.   
  105.         function onQuerySucceeded(sender, args)   
  106.       {  
  107.   
  108.             var innerHtml = "<tr><td class='ListTH'>ID</td><td class='ListTH'>Book Name</td><td class='ListTH'>Book Author</td><td class='ListTH'>Book Price</td><td class='ListTH'>Book Version</td></tr>";  
  109.   
  110.             debugger  
  111.             var listItemInfo = '';  
  112.             var listItemEnumerator = collListItem.getEnumerator();  
  113.   
  114.             while (listItemEnumerator.moveNext())   
  115.             {  
  116.   
  117.                 var oListItem = listItemEnumerator.get_current();  
  118.   
  119.                 var ID = oListItem.get_item('ID');  
  120.                 var InputData1 = oListItem.get_item('BookName');  
  121.                 var InputData2 = oListItem.get_item('BookAuthor');  
  122.                 var InputData3 = oListItem.get_item('BookPrice');  
  123.                 var InputData4 = oListItem.get_item('BookVersion');  
  124.   
  125.                 innerHtml += "<tr class='ListTR'><td>" + ID + "</td><td>" + InputData1 + "</td><td>" + InputData2 + "</td><td>" + InputData3 + "</td><td>" + InputData4 + "</td></tr>";  
  126.                 //listItemInfo += '\nID: ' + oListItem.get_id() + '\nTitle: ' + oListItem.get_item('Title') +  '\nBody: ' + oListItem.get_item('Input1');    
  127.             }  
  128.   
  129.             $("#ListData").html(innerHtml);  
  130.             //alert(listItemInfo.toString());    
  131.         }  
  132.   
  133.         function onQueryFailed(sender, args)   
  134.       {  
  135.             alert('Request failed. ' + args.get_message() +  
  136.                 '\n' + args.get_stackTrace());  
  137.         }  
  138.   
  139.     }  
  140.   
  141.     CreateList = function()  
  142.     {  
  143.   
  144.         //debugger    
  145.         var listCreationInfo = new SP.ListCreationInformation();  
  146.   
  147.         var ListNameVal = $(txtListName).val();  
  148.         //var ListNameVal = ListName;    
  149.         listCreationInfo.set_title(ListNameVal);  
  150.         listCreationInfo.set_templateType(SP.ListTemplateType.announcements);  
  151.   
  152.         oList = web.get_lists().add(listCreationInfo);  
  153.         clientContext.load(oList);  
  154.   
  155.         oList.set_description(ListNameVal + 'created via JSOM Model ...');  
  156.         oList.update();  
  157.   
  158.         clientContext.executeQueryAsync(  
  159.             Function.createDelegate(this, SPHostWebCreateListSuccessHandler),  
  160.             Function.createDelegate(this, SPHostWebCreateListErrorHandler)  
  161.         );  
  162.   
  163.         function SPHostWebCreateListSuccessHandler()  
  164.       {  
  165.             var result = oList.get_title() + ' List created successfully.';  
  166.             alert(result);  
  167.         }  
  168.   
  169.         function SPHostWebCreateListErrorHandler(sender, args)   
  170.       {  
  171.             alert('Request failed. ' + args.get_message() +  
  172.                 '\n' + args.get_stackTrace());  
  173.         }  
  174.     }  
  175.   
  176.     CreateListItem = function()   
  177.     {  
  178.   
  179.         debugger  
  180.         //var ListNameVal = $(txtExistingListName).val();    
  181.         var ListNameVal = $(txtListName).val();  
  182.   
  183.         if (ListNameVal == "") {  
  184.             alert("Please Enter List Name");  
  185.             return;  
  186.         }  
  187.   
  188.         var list = web.get_lists();  
  189.         var targetList = list.getByTitle(ListNameVal);  
  190.         var itemCreateInfo = new SP.ListItemCreationInformation();  
  191.         oListItem = targetList.addItem(itemCreateInfo);  
  192.   
  193.         var Input1Val = $(Input1).val();  
  194.         var Input2Val = $(Input2).val();  
  195.         var Input3Val = $(Input3).val();  
  196.         var Input4Val = $(Input4).val();  
  197.   
  198.         var Val1Val = $(Val1).val();  
  199.         var Val2Val = $(Val2).val();  
  200.         var Val3Val = $(Val3).val();  
  201.         var Val4Val = $(Val4).val();  
  202.   
  203.   
  204.         if (Input1Val != "" && Val1Val != "")  
  205.             oListItem.set_item(Input1Val, Val1Val);  
  206.   
  207.   
  208.         if (Input2Val != "" && Val2Val != "")  
  209.             oListItem.set_item(Input2Val, Val2Val);  
  210.   
  211.         if (Input3Val != "" && Val3Val != "")  
  212.             oListItem.set_item(Input3Val, Val3Val);  
  213.   
  214.         if (Input4Val != "" && Val4Val != "")  
  215.             oListItem.set_item(Input4Val, Val4Val);  
  216.   
  217.         oListItem.update();  
  218.         clientContext.load(oListItem);  
  219.   
  220.         clientContext.executeQueryAsync(  
  221.             Function.createDelegate(this, CreateListItemSucceeded),  
  222.             Function.createDelegate(this, CreateListItemFailed)  
  223.         );  
  224.   
  225.         function CreateListItemSucceeded()   
  226.       {  
  227.             alert('Item Created Successfully : List Item ID -> ' + oListItem.get_id());  
  228.         }  
  229.   
  230.         function CreateListItemFailed(sender, args)   
  231.       {  
  232.             alert('Request failed. ' + args.get_message() +  
  233.                 '\n' + args.get_stackTrace());  
  234.         }  
  235.   
  236.     }  
  237.   
  238.     UpdateListItem = function(ListName, Input1, Val1)  
  239.     {  
  240.   
  241.         debugger  
  242.   
  243.         //var ListNameVal = $(txUpdationList).val();    
  244.         var ListNameVal = $(txtListName).val();  
  245.   
  246.         if (ListNameVal == "")  
  247.         {  
  248.             alert("Please Enter List Name");  
  249.             return;  
  250.         }  
  251.   
  252.         var Input1Val = $(UpdateField1).val();  
  253.         var Val1Val = $(UpdateVal1).val();  
  254.   
  255.         var list = web.get_lists();  
  256.         oList = list.getByTitle(ListNameVal);  
  257.   
  258.         oListItem = oList.getItemById($(txtUpdateID).val());  
  259.         oListItem.set_item(Input1Val, Val1Val);  
  260.         oListItem.update();  
  261.   
  262.         clientContext.executeQueryAsync(  
  263.             Function.createDelegate(this, UpdateListItemSucceeded),  
  264.             Function.createDelegate(this, UpdateListItemFailed)  
  265.         );  
  266.   
  267.         function UpdateListItemSucceeded()  
  268.       {  
  269.             alert('Item Updated Successfully!');  
  270.         }  
  271.   
  272.         function UpdateListItemFailed(sender, args)  
  273.       {  
  274.             alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  275.         }  
  276.     }  
  277.   
  278.     DeleteListItem = function(ListName, ItemID)  
  279.     {  
  280.   
  281.         debugger  
  282.   
  283.         //var ListNameVal = $(txtListDeletion).val();    
  284.         var ListNameVal = $(txtListName).val();  
  285.   
  286.         if (ListNameVal == "")  
  287.         {  
  288.             alert("Please Enter List Name");  
  289.             return;  
  290.         }  
  291.   
  292.         var Input1Val = $(txtDeletionID).val();  
  293.   
  294.         var list = web.get_lists();  
  295.         oList = list.getByTitle(ListNameVal);  
  296.   
  297.         oListItem = oList.getItemById(Input1Val);  
  298.         oListItem.deleteObject();  
  299.   
  300.         clientContext.executeQueryAsync(  
  301.             Function.createDelegate(this, deleteListItemSucceeded),  
  302.             Function.createDelegate(this, deleteListItemFailed)  
  303.         );  
  304.   
  305.         function deleteListItemSucceeded()  
  306.       {  
  307.             alert('Item Deleted Successfully');  
  308.         }  
  309.   
  310.         function deleteListItemFailed(sender, args)  
  311.       {  
  312.             alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  313.         }  
  314.     }  
  315.   
  316.     ClearAllTextBox = function()  
  317.     {  
  318.   
  319.         $('input[type=text]').each(function()  
  320.         {  
  321.             $(this).val('');  
  322.         })  
  323.     }  
  324.   
  325.     function Empty()   
  326.   {  
  327.         console('Hello');  
  328.     }  
  329.   
  330.     //public interface    
  331.     return {  
  332.   
  333.         HWLoadlayoutsJS: LoadlayoutsJS,  
  334.         QSParameter: getQueryStringParameter,  
  335.         HWLoadClientContext: LoadClientContext,  
  336.         HWCreateList: CreateList,  
  337.         HWCreateListItem: CreateListItem,  
  338.         HWUpdateListItem: UpdateListItem,  
  339.         HWDeleteListItem: DeleteListItem,  
  340.         HWClearAllTextBox: ClearAllTextBox,  
  341.         HWReadListData: ReadListData,  
  342.         HWEmpty: Empty  
  343.     }  
  344.   
  345. }();  
  346.   
  347. $(document).ready(function()   
  348.     {  
  349.   
  350.     //Load Out Of Box JS file for List Operation    
  351.     Wingtip.JSOMHostWebCollections.HWLoadlayoutsJS();  
  352.   
  353. });  

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs