Formulaie HTML qui ne se lance pas

Le 19/09/2024 à 13:24

Bonjour,

je me présente, Jacky, nouveau sur ce site et novice en codage. J'ai récupérer des bouts de code pour modifier une base de données depuis google sheets, à partir d'un formulaire. le formulaire se lance bien à partir d'un bouton créé sur la feuille, mais j'aimerais qu'il se lance quand je rentre "Oui" dans n'importe quelle cellule de la colonne "I". j'ai modifié mais rien à faire, le formulaire ne se lance pas !!! Gemini me fait tourner en rond donc j'en appelle à votre expérience. Merci pour votre aide.

Je joint le code GS, avec le code html (formModification) et le code html (CSS)

// variables :
const nomBdd = 'Commandes'            // nom de la feuille base de données
const nomFiltre = 'BdD_filtrée' // nom de la feuille filtre
const col = 10 ;                  // colonne à partir de laquelle les données sont enregistrées
const bdd = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(nomBdd);

function onEdit(e) {
  const sheet = e.range.getSheet();
  const sheetName = sheet.getName();

  // Vérifier si la feuille est "commandes"
  if (sheetName === "Commandes") {
    const column = e.range.getColumn();
    const value = e.value;
    const ligneModifiee = e.range.getRow();

    // Si la colonne modifiée est la 9ème et que la nouvelle valeur est "Oui"
    if (column === 9 && value === "Oui") {
      //SpreadsheetApp.getUi().alert('La ligne ' + ligneModifiee + ' a été modifiée.');
      PropertiesService.getScriptProperties().setProperty('ligneModifiee', ligneModifiee);
      Browser.msgBox('On arrive jusque la, cest bien')
      Utilities.sleep(1000);
      //modifier();
      if (numLigne()<=1){
        Browser.msgBox('Sélectionner une ligne en colonne A !')
      }else{
        Browser.msgBox('Encore un peu plus loin cool')
        const html = HtmlService
          .createTemplateFromFile('formModification')
          .evaluate()
          .setWidth(400)
          .setHeight(785);
          Browser.msgBox('Avant d\'afficher la boîte de dialogue');
          SpreadsheetApp.getUi().showModelessDialog(html, 'Modifier');
          Browser.msgBox('Jusquici c pas sur')
      }
    }
  }
}

// formulaire lecture - modification
function modifier() {
  //SpreadsheetApp.getUi().alert('La ligne ' + ligneModifiee + ' a été modifiée.');
  if (numLigne()<=1){
    //Browser.msgBox('Sélectionner une ligne en colonne A !')
  }else{
    const html = HtmlService
      .createTemplateFromFile('formModification')
      .evaluate()
      .setWidth(400)
      .setHeight(785);
    SpreadsheetApp.getUi().showModelessDialog(html, 'Modifier');
  }
}

// transfert de la liste des contacts dans les formulaires pour les listes déroulantes
function transfererContacts(){
  return SpreadsheetApp.getActiveSpreadsheet().getRange("contacts").getValues()
}

// transfert des données de la base de données vers le formulaire modification
function transfererData() {
  var ligne = numLigne()
  return bdd.getRange(ligne,col,1,bdd.getLastColumn()-col+1).getValues()
}

// numéro de la ligne correspondant la la première case cochée colonne A
// pour transférer les données vers le formulaire modification
// pour enregistrer les données issues de la feuille modification
// pour indiquer au formulaire en commentaire du bouton le n° de ligne en cours de visualisation
function numLigne(){
  var f = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
  //var values = f.getRange('A2:A').getValues().join().split(","); 
  //var ligne = values.indexOf('true') + 2;
  //var ligne = ligneModifieeGlobale;
  //var ligne = 16
  var ligne = PropertiesService.getScriptProperties().getProperty('ligneModifiee');
  if (ligne) {
    return parseInt(ligne); // Convertir en nombre entier
  } else {
    // Si ligneModifiee n'est pas définie, utiliser une valeur par défaut ou un autre calcul
    return 17; // Ou un autre calcul pour déterminer la ligne
  }
  if (f.getName()==nomBdd){return ligne}else if(f.getName()==nomFiltre){return f.getRange(ligne,2).getValue()}else{return 0}
}

// modification des données en provenance du formulaire modification
function modifierLigne(tab) {
  var ligne = numLigne()
  bdd.getRange(ligne,col,1,tab.length).setValues([tab])
}

// permet d'inclure dans les formulaires un autre fichier html, css.html en l'occurence
function rapatrier(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
<!DOCTYPE html>
<html>
  <head>
    <?!= rapatrier('css') ?>
  </head>
  <body>
    <script>
      <? 
      var data = transfererData(); 
      var contacts = transfererContacts(); 
      var ligne = numLigne();

      ?>
    </script>
    <form>
    <input type="text" name="nom"    value="<?= data[0][0] ?>" placeholder="Nom">
    <input type="text" name="prenom" value="<?= data[0][1] ?>" placeholder="Prénom">
    <input type="text" name="tel"    value="<?= data[0][2] ?>" placeholder="Tel">
    <input type="text" name="email"  value="<?= data[0][3] ?>" placeholder="Email">
    <p><strong>Qui a pris contact?</strong></p>
      <select name="contact">
        <option value="" disabled selected >Selectionner ...</option>
        <? for (var i = 0; i < contacts.length; i++) { ?>
          <option value="<?= contacts[i][0] ?>" <?= ((contacts[i][0]==data[0][4])?'selected':'') ?> ><?= contacts[i][0] ?></option>
        <? } ?>
      </select>
    <p><strong>Premier contact</strong></p>
    <input type="text" name="barbecue"  value="<?= data[0][5] ?>" placeholder="Barbecue">
    <textarea name="Commentaire_contact" placeholder="Commentaire"><?= data[0][6] ?></textarea>
    <input type="button" value="Modifier ligne <?= ligne ?> de la base de données" onclick="modifier()">
    </form>
    <script>
      function modifier() {
        var donnees = document.forms[0]
        var tab = []
        for (var i=0;i<donnees.length;i++){
          if (donnees[i].type != "button"){
            tab.push(donnees[i].value)
          }
        }
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }
        var d = new Date()
        tab.push(d.toString())
        google.script.run.modifierLigne(tab);
      }
    </script>
  </body>
</html>
 <style>
      body {
        padding: 0 0.5rem; /* à remplacer par "margin: 0;" si affiché dans une boîte de dialogue */
        color: #333;
        font-family: Roboto, Arial, sans-serif;
      }
      textarea {
        font-family: Roboto, Arial, sans-serif;
      }
      p {
        margin: 0.8rem 0 0.3rem;
      }
      input[type="date"],input[type="text"] {
        font-family: Roboto, Arial, sans-serif;
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 1rem;
        padding: 0.6rem 0.7rem;
        background: #f3f3f3;
        color: #444;
        border: none;
        font-size: 1.08rem;
        border-radius: 0.4rem;
      }
      input[type="button"] {
        display: block;
        width: 100%;
        padding: 0.7rem 0 0.6rem;
        border: none;
        background: #30a392;
        color: #fff;
        font-size: 1.15rem;
        cursor: pointer;
        border-radius: 0.4rem;
      }
      input[type="button"]:hover {
        background: #40ad96;
      }
      input::placeholder, textarea::placeholder {
        color: #aaa;
      }
      input:focus::placeholder, textarea:focus::placeholder {
        color: #f3f3f3;
      }
      select,textarea {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 1rem;
        padding: 0.6rem 0.7rem;
        background: #f3f3f3;
        color: #444;
        border: none;
        font-size: 1.08rem;
        border-radius: 0.4rem;
      }
      select option:disabled {
        color: #f3f3f3;
      }
      select option {
        color: blue;
      }
    </style>

Le code n'est surement pas au top, pas très joli mais il fonctionne si je lance manuellement la fonction modifier()

Encore merci d'avance pour votre aide

Le 19/09/2024 à 13:48

Salut !

C'est à cause de onEdit(e)

C'est un trigger "simple" et Google a implémenté des sécurités, dont une qui bloque les ouvertures de script html à partir de onEdit, la manière de contourner ceci est super simple :

  • Renomme ta fonction
  • ajoute un déclencheur > à chaque modification

Par exemple :

function checkEdit(e) {
  const sheet = e.range.getSheet();
  const sheetName = sheet.getName();
  const value = e.value;
  const column = e.range.getColumn();

  if (sheetName === "Commandes" && column === 9 && value === "Oui") {
    var html = HtmlService.createHtmlOutputFromFile('formModification');
    SpreadsheetApp.getUi().showModalDialog(html, 'Modifier');
  }
}

PS : magnifique débugg mais pour ne pas être embêté par des popup, tu peux remplacer Browser.msgBox par console.log

Le 20/09/2024 à 07:15

Merci PierreLepinay, ça fonctionne ! J'ai cherché un peu pour mettre un déclencheur (je suis vraiment novice), mais j'ai trouvé !

J'avais mis des console. Log mais je n'ai pas saisi le fonctionnement !! Ou les trouve t-on après ?

Une autre petite question. Est il possible de mettre plusieurs checkedit dans le même code ?

Merci du temps passé.

Le 20/09/2024 à 08:37

Bonjour,

Pour voir les logs il faut aller dans le menu apps script, à gauche dans l'onglet "exécutions" tu retrouves l'historique de toutes les exécutions, il te suffit de cliquer sur une ligne pour lire le déroulé ET les erreurs.

Si tu reprends tes premières exécutions où la page ne se lançait pas, tu dois pouvoir lire un message d'erreur qui dit que Spreadsheet.Ui ne peut lancer createTemplateFromFile dans ce contexte.

Une autre petite question. Est il possible de mettre plusieurs checkedit dans le même code ?

Càd ? Que souhaites-tu faire ? En fonction de la variable "e" exécuter une fonction différente ? Si c'est ça oui c'est possible :

function checkEdit(e) {
  const sheet = e.range.getSheet();
  const sheetName = sheet.getName();
  const value = e.value;
  const column = e.range.getColumn();

  if (sheetName === "Commandes" && column === 9 && value === "Oui") {
    scriptOui()
  }else if(sheetName === "Commandes" && column === 9 && value === "Non") {
    scriptNon()
  }
}
Le 22/09/2024 à 17:14

Merci, ça fonctionne.

Par contre j'ai un petit souci : le formulaire ne se ferme pas quand je valide le remplissage. y a t-il un moyen ?

Le 22/09/2024 à 17:51

Salut ! En ajout un callback qui ferme la fenêtre une fois ton script d'enregistrement terminé :

  google.script.run
      .withSuccessHandler(function() {
        google.script.host.close();
      })
      .modifierLigne(tab);
  }

A la place de :

google.script.run.modifierLigne(tab);
Le 25/09/2024 à 03:29

Super c'est nickel. Ca marche très bien. Merci beaucoup PierreLepinay.

Rechercher des sujets similaires à "formulaie html qui lance pas"