Google Sheets + Apps Script + Webapps：既存の行データをプルして編集し、行を更新します

bugfix> javascript > 投稿 2020-11-30 12:26

こんにちは私は選択したID番号に一致する行からグーグルシートからデータをプルしてデータを編集しようとしています。次に更新ボタンをクリックして、グーグルシートで一致する行が更新されるようにします。これが私のグーグルシートへのリンクです。https://docs.google.com/spreadsheets/d/1eaEfRtjMz7kyQfyXZHLuBhSz91SiUJzq1J2QJexJxy4/edit?ts=5fc42833#gid=0

これが私のgsコードです

 function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
 
}
/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}
/* @Process Form */
function getCustDetail(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.custId = custIdList[searchPostion];
  custDetail.custDate = custDateList[searchPostion];
  custDetail.custclient = custclientList[searchPostion];
  custDetail.custlocation = custlocationList[searchPostion];
  custDetail.custother1 = custother1List[searchPostion];
  custDetail.custother2 = custother2List[searchPostion];
  Logger.log(searchPostion);
  Logger.log(custDetail);
  Logger.log(search);
  
  if (searchPostion > -1){
  
  return  custDetail;
   
  } else {
    return '-';
 }
}

これが私のJSコードです

<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();
      
      });
    }
  }
  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(){
  document.getElementById("Id").innerHTML = cust.Id;
  document.getElementById("Date").innerHTML = cust.Date;
  document.getElementById("client").innerHTML = cust.client;
  document.getElementById("location").innerHTML = cust.location;
  document.getElementById("other1").innerHTML = cust.other1;
  document.getElementById("other2").innerHTML = cust.other2;
  M.updateTextFields();
  
}
</script>

これが私のHTMLコードです

   <!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>

javascript

google-apps-script

google-sheets

回答 1 件

変更点：
Google Apps Script側：

共有スプレッドシートでスクリプトを見たとき、関数は getCustDetail 値を返しません。しかし、あなたの質問のスクリプトは custDetail 。

で getCustDetail 、あなたはすでにの値を設定しています search 。したがって、この場合、値は常に使用されます。これに注意してください。

値が入力に入力されたとき type="date" 、値はである必要があります yyyy-MM-dd 。

ときでさえ custDetail 返されます、 custDetail() Javascript側では引数を使用しません。

ときでさえ custDetail Google Apps Script側からの引数を使用し、Google AppsScriptから返されるキーはJavascript側のキーとは異なります。

Javascript側：

共有スプレッドシートで、 var data = google.script.run.getCustDetail(); 使用されている。しかし、現段階では、 google.script.run 値を返しません。これに注意してください。

テキスト入力に値を設定したい場合は、 value の代わりに innerHTML 。

上記の点をスクリプトに反映すると、次のようになります。
変更されたスクリプト： Google Apps Script側：
変更してください getCustDetail 次のように。
```
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;
  }
}
```
この場合、スプレッドシートの列「A」のIDは常に番号であると想定しています。これに注意してください。
Javascript側：
変更してください custDetail 次のように。
```
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();
  }
}
```
注意：
Web Appsのスクリプトを変更した場合は、WebAppsを新しいバージョンとして再デプロイしてください。これにより、最新のスクリプトがWebアプリに反映されます。これに注意してください。

bugfix

Google Sheets + Apps Script + Webapps：既存の行データをプルして編集し、行を更新します

javascript

google-apps-script

google-sheets

関連記事