Liste déroulante dans formulaire latéral

Bonjour,
Je suis vraiment novice en terme de script.
Je souhaiterais ajouter une liste déroulante dans un formulaire latéral sur google sheet.
Voici mon code actuel pour la partie script
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Ajouter un prospect')
    .addItem('Formulaire (barre latérale)', 'formulaire')
    .addToUi();
}

function formulaire() {
  const html = HtmlService.createHtmlOutputFromFile('form').setTitle('Ajouter un utilisateur');
  SpreadsheetApp.getUi().showSidebar(html);
}

function ajouterLigne(tab) {
  SpreadsheetApp.getActiveSheet().appendRow(tab);
}
et la partie form.html
Merci d'avance pour votre aide
<!DOCTYPE html>
<html>
  <head>
    <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;
        overflow: hidden;
      }
      p {
        margin: 0.8rem 0 0.3rem;
      }
      .annuler {
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.88rem;
        color: #888;
        cursor: pointer;
      }
      .annuler:hover {
        text-decoration: underline;
      }
      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;
      }
      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;
      }
    </style>
  </head>
  <body>
    <p>Nom</p>
    <input type="text" name="nom" value="">
    <p>Prénom</p>
    <input type="text" name="prenom" value="">
    <p>Tel</p>
    <input type="text" name="tel" value="">
    <p>Email</p>
    <input type="text" name="email" value="">
    <p>Type de contact</p>
    <input type="text" name="type_contact" value="">
    <input type="button" value="Ajouter" onclick="ajouter()">
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>
    <script>
      function ajouter() {
        const inputs = document.querySelectorAll('input[type="text"]');
        let tab = [];

        for (const input of inputs) {
          tab.push(input.value);
        }

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

        inputs.forEach(input => input.value = '');

        google.script.run.ajouterLigne(tab);
      }
    </script>
  </body>
</html>

Bonjour,

peux-tu mettre un lien vers une copie de ton fichier ?

peux-tu préciser le contenu de ta liste déroulante ?

Merci de te préoccuper de mon problème

Voici un lien vers une copie du fichier

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

J'aimerais mettre cette liste déroulante à la place de la zone de texte dans la rubrique "qui a pris contact?". Cette liste déroulante permettrait de faire un choix entre plusieurs prénoms.

Bonjour,

Peut-être une liste toute simple ?

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        padding: 0;
        color: #333;
        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: #888;
        cursor: pointer;
      }
      .annuler:hover {
        text-decoration: underline;
      }
      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;
      }
      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;
      }
    </style>
  </head>
  <body>
    <p>Nom</p>
    <input type="text" name="nom" value="">
    <p>Prénom</p>
    <input type="text" name="prenom" value="">
    <p>Tel</p>
    <input type="text" name="tel" value="">
    <p>Email</p>
    <input type="text" name="email" value="">
    <p>Type de contact</p>
    <ul>
     <li>Winnie l'ourson</li>
     <li>Porcinet</li>
     <li>Tigrou</li>
    </ul>
    <input type="button" value="Ajouter" onclick="ajouter()">
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>
    <script>
      function ajouter() {
        const inputs = document.querySelectorAll('input[type="text"]');
        let tab = [];

        for (const input of inputs) {
          tab.push(input.value);
        }

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

        inputs.forEach(input => input.value = '');

        google.script.run.ajouterLigne(tab);
      }
    </script>
  </body>
</html>

Sinon, liste avec déroulante à essayer dans le formulaire latérale.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        padding: 0.5rem;
        color: #333;
        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: #888;
        cursor: pointer;
      }
      .annuler:hover {
        text-decoration: underline;
      }
      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;
      }
      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;
      }
    nav{
    width: 100%;
    margin: 0 auto;
    background-color: white;
    position: sticky;
    top: 0px;
    }

    nav ul{
    list-style-type: none;
    display: flex;
    }

    nav ul li{
    flex: 1 1 auto;
    text-align: center;
    position: relative;
    }

    nav a{
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
    }

    nav a:hover{
    color: orange;
    border-bottom: 2px solid gold;
    }

   .sous{
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: white;
    position: absolute;
    width: 100%;
    z-index: 1000;
    }
    nav > ul li:hover .sous{
    display: flex;
    flex-flow: column wrap;
    }
   .sous li{
    flex: 1 1 auto;
    text-align: left;
    }
   .sous a{
    padding: 10px;
    border-bottom: none;
    }
   .sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
    }
   .deroulant > a::after{
    content:" ▼";
    font-size: 12px;
    }
    </style>
  </head>
  <body>
    <p>Nom</p>
    <input type="text" name="nom" value="">
    <p>Prénom</p>
    <input type="text" name="prenom" value="">
    <p>Tel</p>
    <input type="text" name="tel" value="">
    <p>Email</p>
    <input type="text" name="email" value="">
    <nav>
     <ul>
      <li name="type_contact" class="deroulant"><a href="#">Qui a pris contact ?</a>
       <ul class="sous">
        <li>Winnie l'ourson</li>
        <li>Porcinet</li>
        <li>Tigrou</li>
       </ul>
      </li>
     </ul>
    </nav>
    <input type="button" value="Ajouter" onclick="ajouter()">
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>
    <script>
      function ajouter() {
        const inputs = document.querySelectorAll('input[type="text"]');
        let tab = [];

        for (const input of inputs) {
          tab.push(input.value);
        }

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

        inputs.forEach(input => input.value = '');

        google.script.run.ajouterLigne(tab);
      }
    </script>
  </body>
</html>

Pas mal pour un débutant ce code déjà.

Bonne Journée

PS: Je regarde plus tard ton fichier.

Merci de te préoccuper de mon problème

Voici un lien vers une copie du fichier

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

J'aimerais mettre cette liste déroulante à la place de la zone de texte dans la rubrique "qui a pris contact?". Cette liste déroulante permettrait de faire un choix entre plusieurs prénoms.

accès refusé ... mets au moins le fichier en lecture https://www.sheets-pratique.com/fr/cours/partage

Oups. Désolé. J'ai oublié de le faire. C'est fait.

Mais, c’est le fichier du cours formulaire latéral.

Bon, je fais un essai demain de mes codes. Sinon, je pense que c’est meilleur une boite de dialogue qu’un formulaire latéral. Je précise opinion perso.

Bonne soirée

C'est tout à fait ça!

En tant que total débutant, ça m'a bien aidé à comprendre pas mal de chose même si je ne maîtrise pas encore tout.

Ton opinion à propos de la boite de dialogue est intéressante. Je n'ai aucun recul pour juger. Pourquoi tu penses ça?

La boite de dialogue est très proche d’un formulaire. L’avantage du formulaire lui, c’est que tu peux modifier des choses sur la feuille pendant que tu complète le formulaire. La boite de dialogue elle permet de ”dialoguer” avec son utilisateur pas comme le formulaire.

Je ne vois pas les boutons de commande ...

image

si tu veux une liste déroulante (sélection unique ici) ...

    <option value="" disabled selected>Selectionner ...</option>
    <option value="option1" >votre option 1</option>
    <option value="option2" >votre option 2</option>
    <option value="option3" >votre option 3</option>

mais tu n'as pas répondu à ma question

peux-tu préciser le contenu de ta liste déroulante ?

C'est bizarre. Moi ça apparaît comme ça

image

Pour ce qui est du contenu de la liste déroulante, comme je te le disais précédemment, je voudrais des prénoms avec une sélection unique.

Si ce n'est pas clair, voici une capture d'écran de ce que j'aimerais

image

Dans ma réponse, il manquant select

    <select name="contact" >
      <option value="" disabled selected>Selectionner ...</option>
      <option value="option1" >votre option 1</option>
      <option value="option2" >votre option 2</option>
      <option value="option3" >votre option 3</option>
    </select>

ajoute aussi dans les styles

      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;
      }

Super. Mille merci.

Je remarque lorsque j'exécute le style pour le tester que j'ai une erreur de ce genre

image

Elle est apparue lorsque j'ai désactivé la barre latérale pour activer la boîte de dialogue suite à tes conseils. Saurais-tu de quoi il s'agit?

Est-ce que je peux me permettre de poser d'autres questions ou vaut-il mieux que je crée un nouveau sujet?

J'aimerais par exemple augmenter la taille de la boite de saisie du champs commentaire

Bonjour,

Augmenter la taille de la boite de dialogue.

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Sheets-Pratique')
    .addItem('Formulaire', 'formulaire');
    .addToUi();
}

function formulaire() {
  const html = HtmlService.createHtmlOutputFromFile('form')
    .setWidth(400)
    .setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(html, 'Ajouter quelqu’un');
}

function ajouterLigne(tab) {
  SpreadsheetApp.getActiveSheet().appendRow(tab);
}

Width et height permettent de régler la largeur et la hauteur.

Ton erreur que tu as marqué getUi(). sans l’utiliser.

Peux-tu renvoyer ton code de maintenant ?

Bonne Journée

PS: Le cours de la boite de dialogue peux te servir.

https://www.sheets-pratique.com/fr/codes/boite-dialogue-personnalisee

Je fais un fichier dans la journée.

Super. Mille merci.

Je remarque lorsque j'exécute le style pour le tester que j'ai une erreur de ce genre

image

Elle est apparue lorsque j'ai désactivé la barre latérale pour activer la boîte de dialogue suite à tes conseils. Saurais-tu de quoi il s'agit?

Est-ce que je peux me permettre de poser d'autres questions ou vaut-il mieux que je crée un nouveau sujet?

J'aimerais par exemple augmenter la taille de la boite de saisie du champs commentaire

  1. pour le getUI(), je suppose que tu as lancé le script depuis l'éditeur de script et non du menu !
  2. pour le commentaire, il vaudrait mieux passer à un textarea
<textarea rows=4 placeholder="Commentaire ..." name="Commentaire_contact1" wrap=soft ></textarea>

au lieu de

<input type="text" name="Commentaire_contact1" value="">

et ajoute aussi textarea à côté de select dans les styles

      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;
      }

C'est parfait. C'est exactement ce que je souhaitais.

Maintenant, il y a un petit pb d'affichage. Est-il possible de placer une barre de défilement sur le coté pour atteindre le bouton "ajouter"?

image

Peut-être qu'il y a une autre solution? J'ai essayé d'agrandir la boite de dialogue mais elle se limite à la taille de l'écran.

Tu utilise quel code appsheets ?

Si c’est le mien, je ne vois pas pour l’instant.

Peut-être que

<textarea rows=2 maxrows=5 placeholder="Commentaire ..." name="Commentaire_contact1" wrap=soft ></textarea>

Je précise c’est juste une idée.

Bonjour à tous,

Une façon simple de raccourcir en longueur un formulaire est d'utiliser des placeholders

placeholder sheets

Code HTML :

    <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">
    <input type="text" name="type_contact" value="" placeholder="Type de contact">
    <p><strong>Qui a pris contact?</strong></p>
      <select name="contact">
        <option value="" disabled selected>Selectionner ...</option>
        <option value="option1" >Phil</option>
        <option value="option2" >Pat</option>
        <option value="option3" >Séraphina</option>
        <option value="option4" >Mouaad</option>
      </select>
    <p><strong>Premier contact</strong></p>
    <input type="text" name="Date1" value="" placeholder="Date">
    <textarea name="Commentaire_contact1" placeholder="Commentaire"></textarea>

Code CSS (qui en bonus fait disparaître le placeholder au clic) :

input::placeholder, textarea::placeholder {
    color: #aaa;
}
input:focus::placeholder, textarea:focus::placeholder {
    color: #f3f3f3;
}

Je te donne aussi l'autre solution pour afficher la barre de défilement : retire overflow: hidden de body dans tes CSS

sheets body scroll

Cordialement,

C'est bien cela Sébastien ... le chef a parlé ! Je pense aussi que les placeholders comme j'avais commencé à la faire permettent d'alléger le tout.

Rechercher des sujets similaires à "liste deroulante formulaire lateral"