Formulaire Latérale Google Sheets

Le 07/11/2021 à 11:07

Bonjour à tous,

J'ai essayé d'inclure un formulaire latérale pour pouvoir entrer automatiquement mes commandes clients,

j'ai regardé le tutoriel sur le site et aussi le fichier exemple (super intéressant et utile)

Pour le formulaire je me suis débrouillé à créer les champs que je souhaite, et j'ai fais une mise en page pour ma feuille client1

untitled 1

Mon problème est que quand je clique sur le bouton AJOUTER, rien ne se passe.

Je dois avoir oublié des lignes de codes dans le fichier.gs ou fait des erreurs...

mes fichiers sont les suivant :

mon fichier Code.gs

// Menu personnalisé
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Generateur de commandes')
    .addItem('Formulaire (barre latérale)', 'formulaire')
    .addItem('Formulaire (boîte de dialogue)', 'formulaire2')
    .addItem('Formulaire (boîte de dialogue non bloquante)', 'formulaire3')
    .addToUi();
}

// Barre latérale
function formulaire() {
  const html = HtmlService.createHtmlOutputFromFile('sidebar').setTitle('Ajouter une commande');
  SpreadsheetApp.getUi().showSidebar(html);
}

// Boîte de dialogue
function formulaire2() {
  const html = HtmlService.createHtmlOutputFromFile('sidebar')
    .setWidth(300)
    .setHeight(485);
  SpreadsheetApp.getUi().showModalDialog(html, 'Ajouter une commande');
}

// Boîte de dialogue (showModelessDialog)
function formulaire3() {
  const html = HtmlService.createHtmlOutputFromFile('sidebar')
    .setWidth(300)
    .setHeight(485);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter une commande');
}

// Insertion des données du formulaire
function ajouterLigne(tab) {
  SpreadsheetApp.getActiveSheet().appendRow(tab);
}
function creer() {
  const html = HtmlService
    .createTemplateFromFile('sidebar')
    .evaluate()
    .setWidth(400)
    .setHeight(785);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter un projet');
}

Et le fichier sidebar.html

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            padding: 0 0.5rem;
            /* à remplacer par "margin: 0;" si affiché dans une boîte de dialogue */
            color: #3056a3;
            font-family: Roboto, Arial, sans-serif;
            overflow: hidden;
        }

        p {
            margin: 0.8rem 0 0.3rem;
        }

        .annuler {
            display: inline-block;
            margin-top: 1rem;
            font-size: 0.88rem;
            color: #ff092c;
            cursor: pointer;
        }

        .annuler:hover {
            text-decoration: underline;
            color:red;
        }

        input[type="text"] {
            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 {
            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: #3056a3;
            color: #fff;
            font-size: 1.15rem;
            cursor: pointer;
            border-radius: 0.4rem;
        }

        input[type="date"] {
            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"]:hover {
            background: #40ad96;
        }
    </style>
</head>

<body>
    <form>

        <script>

        </script>

        <p><b>Numero de commande :</b></p>
        <input type="text" name="Id de la commande" value="">

        <p><b>Reference Fournisseur :</b></p>
        <input type="text" name="reference fournisseur" value="">

        <p><b>Date de Livraison prevue :</b></p>
        <input type="date" name="date de livraison (JJ/MM/AA)" value="">

        <p><b>Depot de livraison :</b></p>
        <select id="depot de livraison">
      <option value="" disabled selected >Selectionner ...</option>
          <option value="Depot 1">DEPOT 1</option>
          <option value="Depot 2">DEPOT 2</option>
          <option value="Depot 3">DEPOT 3</option>
          <option value="Depot 4">DEPOT 4</option>
          <option value="Depot 5">DEPOT 5</option>
          <option value="Depot 6">DEPOT 5</option>
    </select>

        <p><b>Nombre de palette :</b></p>
        <input type="text" name="Nb palette" value="">

        <p><b>Commentaires :</b></p>
        <input type="text" name="commentaires" value="">

        <input type="button" value="Ajouter" onclick="ajouter()">
        <span class="annuler" onclick="google.script.host.close()">Annuler</span>
<script>
        function ajouter() {
          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 (donnees[i].value ==''){
              alert('Il manque une information !');
              return;
            }
          }

          if (tab.join('') == '') {
            alert('Le formulaire est vide !');
            return;
          }

          google.script.run.ajouterLigne(tab);

          document.forms[0].reset()

          // Fermeture de la boîte de dialogue
          google.script.host.close();
        }
     </script>
    </form>
</body>

</html>

je joins également le lien du fichier en live (mode éditeur au cas ou ca aiderai plus): https://docs.google.com/spreadsheets/d/1t0SQSQhDXO0bnwFP9c-Yv3CzwRk5DPILqpnjHgbIW_8/edit?usp=sharing

Merci d'avance !

Le 07/11/2021 à 11:59

Bonjour,

1- Ce qui bloque l'envoi des données, c'est

google.script.host.close();

il semble que tu ne puisses pas le faire dans le même script.

2- Il y a ensuite un autre problème, tes données se mettent au bout du bout du fichier car tu as déjà pré-formaté les lignes.

Le 07/11/2021 à 13:16
Bonjour Mikhail et merci de ta réponse rapide,

ok pour le problème numéro 2, il faut que j'utilise une feuille normale sans format dans les cellules, (dommage mais je m'en contenterai)

Pour le premier problème numéro 1, il y a t-il une solution ?
Le 07/11/2021 à 13:21

solution = appuyer sur annuler ou sur la croix en haut à droite pour fermer

Rechercher des sujets similaires à "formulaire laterale google sheets"