Google Sheets + Apps Script + Webapps：更新与 ID 匹配的现有行

Question

Hi I got this script and webapp that pull the row that matches the id number from my webapp now what I'm trying to do is update the row that matches the ID in my google sheet column 'A' I don't want to create a new row I just want it to replace / update the existing row that matches the ID number from my webapp once I've made change and click on the update button

link to the google sheet page https://docs.google.com/spreadsheets/d/1eaEfRtjMz7kyQfyXZHLuBhSz91SiUJzq1J2QJexJxy4/edit?ts=5fc42833#gid=0

Thanks

gs code

    function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
 
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}
/* @Process Form */




function editCustomerById(Id,custDetail){
 
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Data");
  const custIds = ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues().map(r => r[0].toString().toLowerCase());
  const posIndex = custIds.indexOf(Id.toString().toLowerCase());
  const rowNumber = posIndex === -1 ? 0 : posIndex + 2;
  
  
  ws.getRange(rowNumber, 2,1,8).setValues([[              
  
                custDetail.Date,
                custDetail.client,
                custDetail.location,
                custDetail.other1, 
                custDetail.other2,
                                  
                                         
                                         
                                         
                                         ]]);
  return true;
}


function getCustDetail(search) {
  search = Number(search);
  var ss = SpreadsheetApp.getActive();
  var ws = ss.getSheetByName("Data");
  var idvCustData = ws.getRange(2,1,ws.getLastRow(),8).getValues();
  var custIdList = idvCustData.map(function(r){ return r[0]; });
  var custDateList = idvCustData.map(function(r){ return r[2]; });
  var custclientList = idvCustData.map(function(r){ return r[3]; });
  var custlocationList = idvCustData.map(function(r){ return r[4]; });
  var custother1List = idvCustData.map(function(r){ return r[5]; });
  var custother2List = idvCustData.map(function(r){ return r[6]; });
  var searchPostion = custIdList.indexOf(search);
  var custDetail = {};
  custDetail.Id = custIdList[searchPostion];
  custDetail.Date = custDateList[searchPostion] && Utilities.formatDate(custDateList[searchPostion], Session.getScriptTimeZone(), "yyyy-MM-dd");
  custDetail.client = custclientList[searchPostion];
  custDetail.location = custlocationList[searchPostion];
  custDetail.other1 = custother1List[searchPostion];
  custDetail.other2 = custother2List[searchPostion];
  if (searchPostion > -1){
    return  custDetail;
  } else {
    return null;
  }
}

JS code

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      
     
      
      });
    }
  
  document.getElementById("Id").addEventListener("change",getCustomer);
  
  
  }
  window.addEventListener('load', preventFormSubmit);  
  
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
    
  






}           
               
               

//Retrieve Customer
function getCustomer() {
  
  var searchId = document.getElementById("Id").value;
  
 if (searchId!= ""){
    google.script.run.withSuccessHandler(custDetail).getCustDetail(searchId);
  } 
  
}

//Success Handler
function custDetail(cust){
  if (cust) {
    document.getElementById("Id").value = cust.Id;
    document.getElementById("Date").value = cust.Date;
    document.getElementById("client").value = cust.client;
    document.getElementById("location").value = cust.location;
    document.getElementById("other1").value = cust.other1;
    document.getElementById("other2").value = cust.other2;
    M.updateTextFields();
  }
}





 function editCustomer(){
          
          var custDetail = {};
          
   
         
         custDetail.Date = document.getElementById("Date").value
         custDetail.client = document.getElementById("client").value
         custDetail.location = document.getElementById("location").value
         custDetail.other1 = document.getElementById("other1").value
         custDetail.other2 = document.getElementById("other2").value
         
         
          
          
          var id = document.getElementById("Id").value;
          
          google.script.run.withSuccessHandler().editCustomerById(id,custDetail);
      
      }
      
</script>

html code

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
        
    
    <?!= include('JavaScript'); ?>
    <?!= include('CSS'); ?>
    
    <!-- Select2 CDN -->
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
        
        
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
   
   
   
   
     <!-- CSS only -->
    <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity= "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous"> 
  
    <!-- JS, Popper.js, jquery and jQuery autocomplete -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
        crossorigin="anonymous"> 
    </script> 
    <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity= "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"> 
    </script> 
    <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity= "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"> 
    </script>   

    </head>
   
      <body>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form id="myForm" onsubmit="handleFormSubmit(this)">
                      <p class="h4 mb-4 text-center">Ticket Form</p>
                      
                      
           <div class="form-row">
           
           
           
           

              
               <div class="form-group col-md-2">
               <label for="Id">ID</label>
               <input type="text" class="form-control" id="Id" name ="Id">
              </div>
              
             
              
              <div class="form-group col-md-2">
               <label for="Date">Ticket Date</label>
               <input type="date" class="form-control" id="Date" name ="Date">
              </div>
              
               <div class="form-group col-md-4">
                 <label for="client">Client</label>
                 <input type="text" class="form-control" id="client" name="client" >
               </div>
                           
               <div class="form-group col-md-4">
                 <label for="location">Location</label>
                 <input type="text" class="form-control" id="location" name="location" >
               </div>
             </div>
   
          <div class="form-row">
             
             <div class="form-group col-md-2">
               <label for="other1">Other1</label>
               <input type="text" class="form-control" id="other1" name ="other1">
              </div>
              
              <div class="form-group col-md-4">
                 <label for="other2">Other2</label>
                 <input type="text" class="form-control" id="other2" name="other2" >
               </div>
                
            </div>
               <hr>
                 <br>
                         
                   <button type="submit" class="btn btn-primary btn-block col-md-4 ">Update</button>
                        
             </form>

                     <br>
                    <div id="output"></div>
                  </div>
                 </div>      
                </div>
               </body>
            </html>

Answer 1

I believe your goal as follows.

• When "Update" button is clicked, you want to check the ID from the Spreadsheet.
• When the ID is existing in the column "A" of Spreadsheet, you want to update the same row.
• When the ID is not existing in the column "A" of Spreadsheet, you are not required to process.

Modification points:

• I think that in your case, the script of processForm is required to be modified. But from your replying, I understood that you have no script of processForm .
• When google.script.run.processForm(formObject) in your Javascript is run, at Google Apps Script side, formObject is parsed like {"Id":"##","other2":"##","location":"##","client":"##","Date":"##","other1":"##"} . I think that using this value, the ID of column "A" can be searched using TextFinder.

Modified script:

Please add the following script of processForm to the Google Apps Script side.

function processForm(formObject) {
  var sheet = SpreadsheetApp.getActive().getSheetByName("Data");
  var range =  sheet.getRange("A1:A" + sheet.getLastRow()).createTextFinder(formObject.Id).findNext();
  if (range) {
    var values = [[new Date(),formObject.Date,formObject.client,formObject.location,formObject.other1,formObject.other2]];
    range.offset(0, 1, 1, values[0].length).setValues(values);
  }
}

• In this sample script, it supposes that the same IDs are not included in the column "A". Please be careful this.

Note:

• When you modified the script of Web Apps, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Please be careful this.

Reference:

• Class TextFinder