CreateUpdateDisplay

Description:
Add the Sharepoint Item to List if Item does not exist in Sharepoint List, Update the Item if exist in Sharepoint List- JSOM
Step1:
Create a List in SharePoint site. List name called “CategoryList” and Create the 4  Columns shown below
 
Step2: Edit the page and  add “Script Editor web part” to the page
    Javascript References   
  1. <script type="text/javascript" src="/_layouts/15/init.js"></script>    
  2. <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>    
  3. <script type="text/javascript" src="/_layouts/15/sp.js"></script>    
  4. <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>    
  5. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   
 <script type="text/javascript"> //Start script - add below entire code under script tag execpt html code
  1.  $(document).ready(function ()    
  2.    {    
  3.        GetAll();        
  4.        $("#btn-display").on('click', function () {    
  5.            Textboxempty();    
  6.            Dislaybind();               
  7.              
  8.        });        
  9.        
  10.        $("#btn-save").on('click', function () {    
  11.         saveItem();             
  12.              
  13.           });    
  14.        
  15.        
  16.      });    
  17.        
  18. function Textboxempty() {  
  19. $("#txtCategoryId").val("");  
  20. $("#txtCategoryName").val("");  
  21. $("#txtCategoryTitle").val("");  
  22. }  
  Check the item exist status in the list and call the add/update function. 
  1. function saveItem()    
  2.        
  3.    {    
  4.           
  5.        var clientContext = new SP.ClientContext();    
  6.        var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');    
  7.        var camlQuery = new SP.CamlQuery();    
  8.        var uniq1 = $("#txtCategoryUnique").val();    
  9.        camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'CategoryUnique\'/>' +    
  10.            '<Value Type=\'Text\'>'+ uniq1 +'</Value></Eq></Where></Query></View>');    
  11.        
  12.        this.ListItemColl = oList.getItems(camlQuery);    
  13.        
  14.        clientContext.load(ListItemColl);    
  15.        
  16.        clientContext.executeQueryAsync(    
  17.        
  18.        Function.createDelegate(this, this.onQuerySucceededSave1),    
  19.        
  20.        Function.createDelegate(this, this.onQueryFailed1)    
  21.        
  22.        );    
  23.        
  24.        
  25.    }    
  26.        
  27.        
  28.    function onQuerySucceededSave1(sender, args)    
  29.    {    
  30.        
  31.          var itemCount = ListItemColl.get_count();    
  32.           if (ListItemColl.get_count() > 0)     
  33.        
  34.             {    
  35.                  updateItem(); //Update the item
  36.             }    
  37.             else    
  38.             {    
  39.                   createCategory();   //Add the item
  40.             }    
  41.       }    
  42.        
  43.        
 Add the item to a list
  1. function createCategory()    
  2.   {    
  3.       var clientContext = new SP.ClientContext.get_current();    
  4.       var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');    
  5.       var itemCreateInfo = new SP.ListItemCreationInformation();    
  6.       this.oListItem = oList.addItem(itemCreateInfo);    
  7.       oListItem.set_item("Title", $("#txtCategoryTitle").val());    
  8.       oListItem.set_item("CategoryName", $("#txtCategoryName").val());    
  9.       oListItem.set_item("CategoryId", $("#txtCategoryId").val());    
  10.       oListItem.set_item("CategoryUnique", $("#txtCategoryUnique").val());    
  11.       oListItem.update();    
  12.       clientContext.load(oListItem);    
  13.       clientContext.executeQueryAsync(    
  14.           Function.createDelegate(this, this.onQuerySucceeded),    
  15.           Function.createDelegate(this, this.onQueryFailed)    
  16.       );    
  17.   }    
  18.       
  19.   function onQuerySucceeded() {    
  20.         GetAll();    
  21.         Textboxempty();    
  22.         alert('Save Record succefully');    
  23.   }    
  24.       
  25.   function onQueryFailed(sender, args) {    
  26.       alert('Failed Records ');    
  27.   }    
  28.     
 Update to list
  1.        var ListItemCollToBeUpdated = "";    
  2.        var listItemToBeUpdated = "";    
  3.        
  4.        function updateItem()    
  5.        {    
  6.             var uniq = $("#txtCategoryUnique").val();    
  7.             var clientContext = new SP.ClientContext.get_current();    
  8.             var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');    
  9.             var camlQuery = new SP.CamlQuery();    
  10.             camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'CategoryUnique\'/>' +    
  11.            '<Value Type=\'Text\'>'+ uniq +'</Value></Eq></Where></Query></View>');    
  12.        
  13.             ListItemCollToBeUpdated = oList.getItems(camlQuery);    
  14.             clientContext.load(ListItemCollToBeUpdated);    
  15.             clientContext.executeQueryAsync(UpdateRequireIteams, getItemsToBeUpdatedFailed);    
  16.        }    
  17.        function UpdateRequireIteams()    
  18.        {    
  19.             ListItemToBeUpdated= ListItemCollToBeUpdated.getEnumerator();    
  20.             MultipleListItemsupdate();    
  21.        }    
  22.        function getItemsToBeUpdatedFailed(sender, args)    
  23.        {    
  24.            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());    
  25.        }    
  26.        
  27.     function MultipleListItemsupdate()    
  28.        {       
  29.            var itemArray = [];    
  30.            var clientContext = SP.ClientContext.get_current();    
  31.            var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');    
  32.        
  33.             while(ListItemToBeUpdated.moveNext())    
  34.             {    
  35.                var oItem = ListItemToBeUpdated.get_current();    
  36.                var oListItem = oList.getItemById(oItem.get_id());    
  37.                oListItem.set_item('CategoryName', $("#txtCategoryName").val());     
  38.                oListItem.set_item('Title', $("#txtCategoryTitle").val());     
  39.                oListItem.set_item('CategoryId', $("#txtCategoryId").val());     
  40.                oListItem.set_item('CategoryUnique', $("#txtCategoryUnique").val());     
  41.        
  42.                oListItem.update();    
  43.                itemArray.push(oListItem);    
  44.                clientContext.load(itemArray[itemArray.length-1]);    
  45.             }      
  46.            clientContext.executeQueryAsync(MultipleListItemsupdateSuccess, MultipleListItemsupdateFailed);    
  47.        }    
  48.        function MultipleListItemsupdateSuccess()     
  49.        {        
  50.            alert('Items Updated');    
  51.             GetAll();    
  52.        }    
  53.        
  54.        function MultipleListItemsupdateFailed(sender, args)     
  55.        {        
  56.            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());    
  57.        }    
  58.        
 Bind the data to appropriate textbox
  1. function Dislaybind()    
  2.    {    
  3.        var clientContext = new SP.ClientContext();    
  4.        var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');    
  5.        var camlQuery = new SP.CamlQuery();    
  6.       var uniq1 = $("#txtCategoryUnique").val();    
  7.       camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'CategoryUnique\'/>' +    
  8.            '<Value Type=\'Text\'>'+ uniq1 +'</Value></Eq></Where></Query></View>');    
  9.        this.ListItemColl = oList.getItems(camlQuery);    
  10.        clientContext.load(ListItemColl);    
  11.        clientContext.executeQueryAsync(    
  12.        Function.createDelegate(this, this.onQuerySucceeded1),    
  13.        Function.createDelegate(this, this.onQueryFailed1)    
  14.        
  15.        );    
  16.    }    
  17.        
  18.        
  19.    function onQuerySucceeded1(sender, args)     
  20.    {    
  21.        
  22.        var listItemInfo = '';    
  23.        var listItemEnumerator = ListItemColl.getEnumerator();    
  24.        while (listItemEnumerator.moveNext()) {    
  25.        var oListItem = listItemEnumerator.get_current();    
  26.        $('#txtCategoryTitle').val(oListItem.get_item('Title'))    
  27.        $('#txtCategoryId').val(oListItem.get_item('CategoryId'))    
  28.        $('#txtCategoryName').val(oListItem.get_item('CategoryName'))          
  29.        
  30.          }         
  31.    }    
  32.        
  33.    function onQueryFailed1(sender, args) {    
  34.        
  35.        alert('Request failed. ' + args.get_message() +    
  36.        
  37.        '\n' + args.get_stackTrace());    
  38.        
  39.    }    
 
 
 
 
 Data Display in Table
  1.     
  2. function GetAll() {    
  3.     
  4.     var clientContext = new SP.ClientContext.get_current();    
  5.     var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');    
  6.     var camlQuery = new SP.CamlQuery();    
  7.     camlQuery.set_viewXml('<View><Query></Query></View>');    
  8.     this.ListItemColl = oList.getItems(camlQuery);    
  9.     clientContext.load(ListItemColl);    
  10.     clientContext.executeQueryAsync(Function.createDelegate(this, this.ongetQuerySucceeded), Function.createDelegate(this, this.ongetQueryFailed));           
  11.           
  12. }    
  13.     
  14. function ongetQuerySucceeded(sender, args) {    
  15.     
  16.      var listItemInfo = '';    
  17.      var table = $("#tblview");    
  18.      var innerHtml = "<tr><td>EmployeeId  </td><td>CategoryId  </td><td>CategoryTitle  </td><td>CategoryName </td></tr>";    
  19.      var listItemEnumerator = ListItemColl.getEnumerator();    
  20.     
  21.     while (listItemEnumerator.moveNext()) {    
  22.         var oListItem = listItemEnumerator.get_current();    
  23.         innerHtml += "<tr><td>"+ oListItem.get_item('CategoryUnique') +"</td><td>" + oListItem.get_item('CategoryId') +"</td><td>" + oListItem.get_item('Title')+ "</td><td>" + oListItem.get_item('CategoryName')+"</td></tr>";    
  24.           
  25.     }    
  26.       
  27.     table.html(innerHtml);    
  28. }    
  29.     
  30. function ongetQueryFailed(sender, args) {    
  31.     
  32.     alert('Request failed');    
  33. }    
  34.     
  35. function success() {    
  36.     GetAll();    
  37.     $("#dvMessage").text("Operation Completed Successfully");    
  38. }    
  39.     
  40. function fail() {    
  41.     $("#dvMessage").text("Operation failed  " + arguments[1].get_message());    
  42. }    
 
</script> //End script 
 
 
HTML code:
  1. <div id="dvMessage" style="color:#0000FF"></div>    
  2. </br>    
  3. </br>    
  4. <table>    
  5.    <tr>    
  6.       <td>Enter Employee ID and click on Display Button</td>    
  7.       <td>    
  8.          <input type="text" id="txtCategoryUnique" class="c1"/>    
  9.       </td>    
  10.       <td>    
  11.          <input type="button" value="Display" id="btn-display" />    
  12.       </td>    
  13.    </tr>    
  14. </table>    
  15. <table>    
  16.    <tr>    
  17.       <td>    
  18.          <table>    
  19.             <tr>    
  20.                <td>Category Title</td>    
  21.                <td>    
  22.                   <input type="text" id="txtCategoryTitle" class="c1"/>    
  23.                </td>    
  24.             </tr>    
  25.             <tr>    
  26.                <td>Category Name</td>    
  27.                <td>    
  28.                   <input type="text" id="txtCategoryName" class="c1"/>    
  29.                </td>    
  30.             </tr>    
  31.             <tr>    
  32.                <td>Category Id</td>    
  33.                <td>    
  34.                   <input type="text" id="txtCategoryId" class="c1"/>    
  35.                </td>    
  36.             </tr>    
  37.             <tr>    
  38.             <tr>    
  39.                <td>    
  40.                   <input type="button" value="Save" id="btn-save" />    
  41.                </td>    
  42.             </tr>    
  43.          </table>    
  44.       </td>    
  45.       <td>    
  46.       </td>    
  47.    </tr>    
  48.    <tr>    
  49.       <td>    
  50.          <table id="tblview">    
  51.          </table>    
  52.       </td>    
  53.    </tr>    
  54. </table>   
 
 
Step3: Save page
Outcome:
Test1: Enter the information in First Textbox(Enter EmployeeId) and click on Display.
If data already there, Information displays in textbox: We can Update by click on Save button
If data already not there, Text boxes will be empty: We can freshly  Add data by click on Save button
 
     Update:
          Add: 
 
 Note: If you need to populate the data without click on Display button, use below textbox event code
  1. $('#txtCategoryUnique').on('blur', function() {  
  2.      Textboxempty();   
  3.      Dislaybind();  
  4. });  
 
Subscribe to: Posts (Atom)