web-dev-qa-db-ja.com

Googleスプレッドシートをバックエンドとして使用してHTMLデータ入力フォームを作成する方法

私はGoogleスプレッドシートを持っています。毎日いくつかの行が追加され、Googleスプレッドシートを使用して、顧客フィードバックチームがフォローアップします。

Googleスプレッドシートデータ。

https://docs.google.com/spreadsheets/d/1V-XZdCUZAQVkfCat9vXVxITjjNMxNMPDin6B5j9uMWY/edit?usp=sharing

上記のGoogleスプレッドシートには、Googleシートに以下のデータが常に含まれています（青色で強調表示）。

参照ID会社名連絡先1番連絡先2番プロジェクト名エージェントID

前述の詳細の残りは、ユーザーの応答に基づいてHTML UIからキャプチャされ、最後に「送信して次へ」または「次へ」をクリックすると、入力がGoogleシートに保存されます。

ユーザーは最初にHTML UIで「エージェントID」を入力する必要があり、それに応じて1つずつRef ID特定の「エージェントID」ユーザーに詳細が表示されます。

添付のスクリーンショットで述べたように、情報の左側はgooglespreadシートに従って静的であり、右側の情報はユーザーベースの電話での会話によって入力されます。

以下の詳細は、ドロップダウンまたはラジオオプションベースのユーザー入力です。

Product : Lite, Lite-I, Elite
Ref Code: LIT-1, LIT-2, LIT-3
Status  : Accept, Reject, Pending
Comment : Satisfied, Call Back, Pending

以下の詳細が導き出されます：

Days Passed: It will be derived from the current system year - year mentioned in the `Date`

以下の詳細は、フリーテキストとしてのユーザー入力です。

Client Name
Notes
Final_Status

注：エージェントが割り当てられ、それらのみが表示されますRef ID どこ Agent IDは空白ではなく、Final_Statusは空白か、Googleスプレッドシートで[送信して次へ]以外にマークされています。

Googlespreadシートにもう1つの列を追加する必要があります。これは、Final_Status「送信して次へ」または「次へ」としてマーク

[送信して次へ]ボタンは、すべての詳細がユーザーによってキャプチャされた場合にのみ有効になります。次のボタンは、Commentオプションが選択されている場合にのみ有効になります。

また、UIを使用したデータ入力用のgooglesheetに新しい行がない場合、UIは「Submit＆Next」または「」をクリックして、空白の画面に「No New task available」というメッセージをユーザーにスローします「次へ」ボタン。

期待されるUI：

enter image description here

htmlrgoogle-apps-scriptgoogle-sheetsgoogle-form
5
Vector JX

スプレッドシートのヘッダー情報から作成されたデータ入力ダイアログ

Code.gs：

function onOpen() {
  SpreadsheetApp.getUi().createMenu("My Menu")
  .addItem('Launch Dialog','launchTheFormAsDialog')
  .addToUi();
}

function buildForm() {
  var searchColumnName='RefId';
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  var tA=sh.getRange(1,1,1,sh.getLastColumn()).getValues()[0];
  var hA=sh.getRange(2,1,1,sh.getLastColumn()).getValues()[0];
  tA.splice(1,5);
  var ftA=tA.slice();
  hA.splice(1,5);
  var fA=hA.slice();
  var dstr=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd");
  var html='<style>input{margin:2px 5px 2px 0;}</style><form id="myForm">';
  for(var i=0;i<fA.length;i++) {
    switch(ftA[i]){
      case 'date':
        html+=Utilities.formatString('<br /><input type="%s" value="%s" name="%s" />&nbsp;%s',ftA[i],dstr,fA[i],fA[i]);
        break;
      default:
        html+=Utilities.formatString('<br /><input type="%s" name="%s" />&nbsp;%s',ftA[i],fA[i],fA[i]);
        break;  
    }
  }
  html+='<br /><input type="button" value="Submit" onclick="submitForm(this.parentNode)" /></form>';
  return {html:html};
}

function testUpload() {
  upload({'Status':'none', 'Comment':'to long to fit', 'ClientName':'Don Trump', 'RefCode':'Tweeter', 'Final_Status':'impeachment', 'Product':'Bullshit', 'RefId':'id3', 'DaysPassed':'12', 'Final_Status_Date':'2019-12-23', 'Date':'2019-12-23', 'Notes':'none'})
}

function upload(theForm) {
  Logger.log(theForm);
  var kA=Object.keys(theForm);
  kA.splice(kA.indexOf('refId'),1);//remove refID
  Logger.log(kA);
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet1');
  var hA=sh.getRange(2,1,1,sh.getLastColumn()).getValues()[0];
  var hObj={};
  hA.forEach(function(e,i){hObj[e]=i+1});
  Logger.log(hObj);
  var vA=sh.getRange(3,1,sh.getLastRow()-2,2).getValues();
  for(var i=0;i<vA.length;i++) {
    if(theForm.RefId==vA[i][0]) {
      kA.forEach(function(key){
        Logger.log(hObj[key]);
        Logger.log(theForm[key]);
        sh.getRange(i+3,hObj[key]).setValue(theForm[key]);
      });
    }
  }
  return buildForm();
}

function launchTheFormAsDialog() {
  var ui=HtmlService.createHtmlOutputFromFile('theform').setHeight(550);
  SpreadsheetApp.getUi().showModelessDialog(ui, "Form Data Entry");  
}

theform.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function() {
   $(function(){
      google.script.run
      .withSuccessHandler(function(obj){
        $('#formDiv').html(obj.html);
      })
      .buildForm();
    });
    });
      function submitForm(frmData) {
        google.script.run
        .withSuccessHandler(function(obj){
          //console.log('flag1');
          $('#formDiv').html(obj.html);
        })
        .upload(frmData);
      }
      function updateSelect(vA,id){
        var id=id || 'sel1';
        var select = document.getElementById(id);
        select.options.length = 0; 
        for(var i=0;i<vA.length;i++) {
          select.options[i] = new Option(vA[i][1],vA[i][0]);
        }
      }
      console.log('My Code');
    </script>
  </head>
   <body>
    <h1 id="main-heading">Form Data Entry</h1>
    <div id="formDiv"></div>
</body>
</html>

私のスプレッドシート：

入力データ型を追加して、日付フィールドを初期化し、列が追加または移動されても、スプレッドシートのデータからフォームを完全に構築できるようにしました。その行は上部にあるため、いつでも非表示にできます。

enter image description here

ダイアログ：

enter image description here

1
Cooper

これはmedium.comで見つかりました https://medium.com/@jaejohns/how-to-use-google-sheets-as-your-website-database-b0f2f13d0396

参考になります。

1
user4540741