web-dev-qa-db-fra.com

Comment créer un formulaire de saisie de données HTML en utilisant une feuille de calcul Google comme backend

J'ai une feuille de calcul Google, où certaines lignes s'ajoutent quotidiennement et en utilisant la feuille de calcul Google, l'équipe de rétroaction des clients assure le suivi.

Données de feuille de calcul Google.

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

La feuille de calcul Google mentionnée ci-dessus contient toujours les données mentionnées ci-dessous sur la feuille de calcul Google (surlignée en bleu):

Réf ID Nom de l'entreprise No de contact 1 No de contact 2 Nom du projet ID d'agent

Le reste des détails mentionnés serait capturé à partir de l'interface utilisateur HTML la réponse de l'utilisateur et enfin cliquez sur "Soumettre et Suivant" ou "Suivant" l'entrée sera stockée sur la feuille google.

L'utilisateur doit d'abord saisir l'ID d'agent sur l'interface utilisateur HTML et, par conséquent, un par un Ref ID le détail serait donné à un utilisateur particulier 'ID d'agent'.

Comme mentionné dans la capture d'écran ci-jointe, le côté gauche des informations serait statique selon la feuille googlespread, et les informations du côté droit seraient remplies par l'utilisateur sur la base de la conversation téléphonique.

Les détails mentionnés ci-dessous seront des entrées déroulantes ou des options radio basées sur les options de l'utilisateur:

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

Les détails mentionnés ci-dessous seront dérivés:

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

Les informations ci-dessous seront saisies par l'utilisateur sous forme de texte libre.

Client Name
Notes
Final_Status

Remarque: Les agents seront affectés et ne montreront que ceux Ref ID où le Agent ID n'est pas vide et Final_Status est soit vierge soit autre que "Soumettre et Suivant" marqué dans la feuille de diffusion Google.

Nous devons ajouter une colonne de plus dans la feuille Googlespread, qui capture l'horodatage Date selon la date système dès que le Final_Status marqué comme "Soumettre et suivant" ou "Suivant"

Le bouton Soumettre et Suivant ne serait activé que si tous les détails sont capturés par l'utilisateur. Le bouton Suivant ne serait activé que si l'option Comment est sélectionnée.

De plus, s'il n'y a pas de nouvelles lignes disponibles dans la feuille de googles pour la saisie de données à l'aide de l'interface utilisateur, l'interface utilisateur enverra le message à l'utilisateur qu'il n'y a `` aucune nouvelle tâche disponible '' sur un écran vide en cliquant sur `` Soumettre et suivant '' ou `` Bouton Suivant.

Interface utilisateur attendue:

enter image description here

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

Boîte de dialogue de saisie de données créée à partir des informations d'en-tête sur la feuille de calcul

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>

Ma feuille de calcul:

J'ai ajouté des types de données d'entrée afin de pouvoir initialiser les champs de date et pour que le formulaire puisse être entièrement construit à partir des données de la feuille de calcul même si des colonnes sont ajoutées ou déplacées. Vous pouvez toujours masquer cette ligne car elle est en haut.

enter image description here

La boîte de dialogue:

enter image description here

1
Cooper

Trouvé sur medium.com https://medium.com/@jaejohns/how-to-use-google-sheets-as-your-website-database-b0f2f13d0396

Cela pourrait être utile.

1
user4540741