Liste déroulante dans formulaire latéral

Bonjour,

Quel script, il y a plein de versions du script qui ont été améliorer.

Je l’ai en stock celle avec document.forms[0] mais je peux l’envoyer que demain.

Zut, j'ai fait une super boulette, j'ai voulu faire du ménage et j'ai supprimé le script. Help!. L'auriez-vous sauvegardé? J'en ai restauré une partie mais pas tout.

Pour ne pas perturber le fil, je t'ai envoyé hier matin une version différente de ton formulaire mais qui peut servir de base.

Merci beaucoup pour l'envoi. Je l'ai bien récupéré.

Bonjour,

Solution exemple complète (hors boutons radio qui s'est avéré complexe d'un point de vue programmation et trop omniprésente sur le formulaire)

  1. Une feuille base de données, avec en plus, colonne A des cases à cocher (=> indique la ligne à modifier), et colonne B des cases à cocher pour en faire un extrait.
  2. Une feuille extrait avec comme formule d'extraction, avec en plus, colonne A des cases à cocher (=> indique la ligne à modifier), et en colonne B la ligne correspondante de la feuille base de données
=query({ arrayformula(row( BdD!B2:J )) \ BdD!B2:J };"select Col1,Col3,Col4,Col5,Col6,Col7 where Col2=true ")

code gs :

// Mike Steelson alias Mikhail Staliyevich
// variables :
const nomBdd = 'BdD'            // nom de la feuille base de données
const nomFiltre = 'BdD_filtrée' // nom de la feuille filtre
const col = 3;                  // colonne à partir de laquelle les données sont enregistrées

const bdd = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(nomBdd);
// création du menu
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('** Base de Données **')
    .addItem('Créer une nouvelle ligne dans la BdD', 'creer')
    .addItem('Modifier première ligne sélectionnée', 'modifier')
    .addToUi();
}

// formulaire création
function creer() {
  const html = HtmlService
    .createTemplateFromFile('formCreation')
    .evaluate()
    .setWidth(400)
    .setHeight(785);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter');
}

// formulaire lecture - modification
function modifier() {
  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;
  if (f.getName()==nomBdd){return ligne}else if(f.getName()==nomFiltre){return f.getRange(ligne,2).getValue()}else{return 0}
}

// ajout des données en provenance du formulaire création
function ajouterLigne(tab) {
  var ligne = bdd.getLastRow() + 1
  bdd.getRange(ligne,col,1,tab.length).setValues([tab])
}

// 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();
}

code du formulaire de création

<!DOCTYPE html>
<html>
  <head>
    <?!= rapatrier('css') ?>
  </head>
  <body>
    <script>
      <? 
        var contacts = transfererContacts();
      ?>
    </script>
    <form>
    <input type="text" name="nom" value="" placeholder="Nom">
    <input type="text" name="prenom" value="" placeholder="Prénom">
    <input type="text" name="tel" value="" placeholder="Tel">
    <input type="text" name="email" value="" 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] ?></option>
        <? } ?>
      </select>
    <p><strong>Premier contact</strong></p>
    <input type="date" name="Date" value="" >
    <textarea name="Commentaire_contact" placeholder="Commentaire"></textarea>
    <input type="button" value="Ajouter" onclick="ajouter()">
    </form>
    <script>
      function ajouter() {
        var donnees = document.forms[0]
        var tab = []
        var okPays = false
        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.ajouterLigne(tab);
        document.forms[0].reset()
      }
    </script>
  </body>
</html>

code du formulaire de modification

<!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="date" name="Date" value="<?= ((data[0][5]=='')?'':data[0][5].getFullYear()+'-'+('0'+(data[0][5].getMonth()+1)).slice(-2)+'-'+('0'+data[0][5].getDate()).slice(-2)) ?>" >
    <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>

Merci pour ce récap fort intéressant Mikhail.

Bonne journée

Rechercher des sujets similaires à "liste deroulante formulaire lateral"