Liste déroulante dans SideBar

Bonjour à tous,

Je me suis déjà imprégné de pas mal de sujets présents sur le forum ainsi que du fichier " Créer une SideBar avec Google Apps Script".

J'en profite pour te remercier Sébastien

Néanmoins, étant novice sur GS et ayant des connaissances proche du néant en JavaScript j'ai quelques difficultés à arriver à mes fins.

Modification du SideBar à ma sauce => OK

Ajout d'une catégorie supplémentaire => OK

Là où j'ai besoin d'aide :

1/ J'aimerai aujourd'hui modifier la partie "Initiales du CDP :" en une liste déroulante, les informations se trouvent dans une Sheet de mon fichier.

2/ Effectuer un check pour détecter si un champ est vide, actuellement détection uniquement si tous les champs sont vides.

Une photo de mon SideBar :

sidebar

Code actuel du form :

<!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>Référence du Projet :</p>
    <input type="text" name="Référence du Projet" value="">
  <p>Nom du Projet :</p>
    <input type="text" name="Nom du Projet" value="">
    <p>Initiales du CDP :</p>
    <input type="text" name="Initiales du CDP" value="">
    <p>Nom du Client :</p>
    <input type="text" name="Nom du Client" value="">
    <p>Début du projet (JJ/MM/AA) :</p>
    <input type="text" name="Début du projet (JJ/MM/AA)" value="">
    <p>Nombre de moule :</p>
    <input type="text" name="Nombre de moule" value="">
    <input type="button" value="Ajouter" onclick="ajouter()">
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>
    <script>
        function ajouter() {
        // Source : https://www.sheets-pratique.com/fr/codes/sidebar
        const inputs = document.querySelectorAll('input[type="text"]');
        let tab = [];

        // Récupération des valeurs
        for (const input of inputs) {
          tab.push(input.value);
        }

        // Si tous les champs sont vides
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }

        // Vider les champs
        inputs.forEach(input => input.value = '');

        // Envoi dans la feuille
        google.script.run.ajouterLigne(tab);

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

</html>

J'imagine qu'il faut changer quelque chose là-dedans :

<input type="text" name="Initiales du CDP" value="">
    <p>Nom du Client :</p>

Et également définir la liste déroulante dans la première partie du code..

Je ne demande pas une solution clef en main, mais n'aillant jamais eu l'occasion de jouer avec du JavaScript tout cela me paraît bien obscure

Merci du coup de main !

Bonjour,

Cool de l’HTML.

nom-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: #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>
  <script>
    <?
      var data = import();
    ?>
  </script>
    <p>Référence du Projet :</p>
    <input type="text" name="Référence du Projet" value="">
  <p>Nom du Projet :</p>
    <input type="text" name="Nom du Projet" value="">
    <p>Initiales du CDP :</p>
    <select id="initiale">
      <? for(i=0;i<data.length;i++){ ?>
        if(<?= data[i] ?>!=""){
          <option value="<?= data[i] ?>"><?= data[i] ?>
        }
      <? } ?>
    <p>Nom du Client :</p>
    <input type="text" name="Nom du Client" value="">
    <p>Début du projet (JJ/MM/AA) :</p>
    <input type="text" name="Début du projet (JJ/MM/AA)" value="">
    <p>Nombre de moule :</p>
    <input type="text" name="Nombre de moule" 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 (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }
        google.script.run.ajouterLigne(tab);
        document.forms[0].reset()
      }
     </script>
</body>

</html>

avec code.gs

function creer() {
  const html = HtmlService
    .createTemplateFromFile('nom-sidebar')
    .evaluate()
    .setWidth(400)
    .setHeight(785);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter un projet');
}

function import(){
  return SpreadsheetApp.getRange("plage_nommé1").getValues()
}

Bonne Journée

PS: Ce sujet ma servi beaucoup : https://forum.excel-pratique.com/sheets/liste-deroulante-dans-formulaire-lateral-159423/5

Salut ImoKa,

Merci pour ton aide ainsi que pour le lien du précédent sujet.

Celui-ci m'a bien aidé, je ne comprends pas encore tout mais ça avance.

J'avais bien cherché des sujets similaires, mais celui-ci n'est pas arrivé jusqu'à moi, sans quoi je n'en aurais pas créé un nouveau

Je n'arrive toujours pas à récupérer les informations de ma Plage Nommée "CDP" malgré quelques essais.

J'y passerai davantage de temps demain, s'en est assez pour aujourd'hui

Questions :

- Est-il envisageable de modifier l'apparence de la liste déroulante pour que celle-ci soit semblable aux zones de texte ?

- Est-il aussi envisageable de checker une à une les informations de la SideBar et d'afficher un message d'erreur si l'un des champs est vide ? Actuellement le message ne s'affiche uniquement si l'ensemble des champs sont vides.

Lien du fichier cette fois-ci :

https://docs.google.com/spreadsheets/d/11eLPSTRyZVFjBhy2XNlfFsvVDSkQlJvsM2gDtNYWjFc/edit?usp=sharing

Merci !

Bonjour,

Le style:

<!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;
        }
        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: #30a392;
            color: #fff;
            font-size: 1.15rem;
            cursor: pointer;
            border-radius: 0.4rem;
        }

        input[type="button"]:hover {
            background: #40ad96;
        }
    </style>
</head>

<body>
  <script>
    <?
      var data = import();
    ?>
  </script>
    <p>Référence du Projet :</p>
    <input type="text" name="Référence du Projet" value="">
  <p>Nom du Projet :</p>
    <input type="text" name="Nom du Projet" value="">
    <p>Initiales du CDP :</p>
    <select id="initiale">
      <? for(i=0;i<data.length;i++){ ?>
        if(<?= data[i] ?>!=""){
          <option value="<?= data[i] ?>"><?= data[i] ?>
        }
      <? } ?>
    <p>Nom du Client :</p>
    <input type="text" name="Nom du Client" value="">
    <p>Début du projet (JJ/MM/AA) :</p>
    <input type="text" name="Début du projet (JJ/MM/AA)" value="">
    <p>Nombre de moule :</p>
    <input type="text" name="Nombre de moule" 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 (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }
        google.script.run.ajouterLigne(tab);
        document.forms[0].reset()
      }
     </script>
</body>

</html>

Et plage nommé:

Tu sélectionnes ta plage, puis tu fait clic droit et plage nommé

Bonne Nuit

Bonjour,

Si je suis ton code tel quel dans GS :

function import(){
  return SpreadsheetApp.getRange("CDP").getValues()
}

Je me retrouve avec l'erreur :

Erreur de syntaxe : SyntaxError: Unexpected token 'import' (ligne : 24, fichier : macros.gs)

J'ai donc dans un premier temps modifier le import() en importation(), dans le GS ainsi que dans le form.

Deuxièmement, dans ton code tu n'englobe pas la deuxième partie du form avec les balises <form> </form>.

Si je les supprime comme dans ton code, mon importation ne fonctionne plus.

Cela vient probablement du fait que j'ai modifier le type du "Début projet" en date.

Après avoir modifier le nom de la fonction import().

Si je lance le code tel quel, je me retrouve avec l'erreur:

TypeError: SpreadsheetApp.getRange is not a function

Si je modifie la fonction en :

function importation(){
  return SpreadsheetApp.getActiveSpreadsheet().getRange("CDP").getValues()
}

Voilà le résultat:

sidebar

Les informations de la Plage Nommée sont bien présentes. Mais c'est le bazar là dedans et le titre de la prochaine zone de texte "Nom du Client :" y est lui aussi intégré.

Une idée ?

Sinon je resterai avec les options, il faudra juste penser à changer les noms dans le code ^^

Le lien : https://docs.google.com/spreadsheets/d/11eLPSTRyZVFjBhy2XNlfFsvVDSkQlJvsM2gDtNYWjFc/edit?usp=sharing

Les informations de la Plage Nommée sont bien présentes. Mais c'est le bazar là dedans et le titre de la prochaine zone de texte "Nom du Client :" y est lui aussi intégré.

Une idée ?

correction ...

    <p>Initiales du CDP :</p>
    <select id="initiale">
      <? for (var i = 0; i < data.length; i++) { ?>
          <option value="<?= data[i] ?>" ><?= data[i] ?></option>
      <? } ?>

il manquait le terme

</option>

ensuite y a-t-il d'autres problèmes ? je n'ai pas tout lu !

Salut,

J'ai réussi à faire ce que je voulais pour la Sidebar et j'ai réussi à me débrouiller pour le check des champs vide ou non.

Juste question esthétique, est-il envisageable de paramétrer l'"alertbox" sous javascript ?

sans titre

Exemple :

- Supprimer l'url ci-dessus

- Y ajouter un titre

Si ce n'est pas envisageable ou que cela demande une certaine quantité de ligne supplémentaire vous pouvez répondre un simple NON.

Je m'en contenterai tout autant

Encore merci en tout cas

C'est faisable en changeant ceci

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

je laisse la main à imoka, sinon je regarde demain

Change ceci et mets les motifs que tu souhaites

    <script>
        function ajouter() {
          var donnees = document.forms[0]
          var erreur = false
          var messages = ['motif 1','motif 2','motif 3','motif 4','motif 5','motif 6']
          var alerte = ''
          for (var i=0;i<donnees.length;i++){
            if (donnees[i].type != "button"){
              if (donnees[i].value==''){
                erreur = true
                alerte += messages[i] + '\n'
              }
            }
          }
          if (erreur==true) {
            alert('Formulaire incomplet\n'+alerte);
            return;
          }
          google.script.run.ajouterLigne(tab);

          document.forms[0].reset()

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

Salut,

ça fonctionne parfaitement.

Merci du coup de main à vous deux !

Un autre moyen, plus joli.

<!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;
        }
        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: #30a392;
            color: #fff;
            font-size: 1.15rem;
            cursor: pointer;
            border-radius: 0.4rem;
        }

        input[type="button"]:hover {
            background: #40ad96;
        }
      .modalDialog {
      position: fixed;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: blue;
      z-index: 99999;
      opacity:0;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      pointer-events: none;
      }
      .modalDialog:target {
      opacity:1;
      pointer-events: auto;
      }
      .modalDialog > div {
      width: 400px;
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
      background: -moz-linear-gradient(#2edbe8, #01a6b2);
      background: -webkit-linear-gradient(#2edbe8, #01a6b2);
      background: -o-linear-gradient(#2edbe8, #01a6b2);
      }
      .close {
      background: #606061;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
      }
      .close:hover { background: #6ed1d8; }
    </style>
</head>

<body>
  <script>
    <?
      var data = importation();
    ?>
  </script>
  <div id="openModal" class="modalDialog">
    <a href="#close" title="Close" class="close">X</a>
    <h2 style="color:red"><u>Formulaire incomplet :</u></h2>
    <div id="texte"></div>
    <a href="#close" title="Close" class="close">x</a>
  </div>
    <p>Référence du Projet :</p>
    <input type="text" name="Référence du Projet" value="">
  <p>Nom du Projet :</p>
    <input type="text" name="Nom du Projet" value="">
    <p>Initiales du CDP :</p>
    <select id="initiale">
      <? for(i=0;i<data.length;i++){ ?>
        if(<?= data[i] ?>!=""){
          <option value="<?= data[i] ?>"><?= data[i] ?></option>
        }
      <? } ?>
    <p>Nom du Client :</p>
    <input type="text" name="Nom du Client" value="">
    <p>Début du projet (JJ/MM/AA) :</p>
    <input type="text" name="Début du projet (JJ/MM/AA)" value="">
    <p>Nombre de moule :</p>
    <input type="text" name="Nombre de moule" 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 erreur = false
          var messages = ['motif 1','motif 2','motif 3','motif 4','motif 5','motif 6']
          var alerte = ''
          for (var i=0;i<donnees.length;i++){
            if (donnees[i].type != "button"){
              if (donnees[i].value==''){
                erreur = true
                alerte += messages[i] + '<br>'
              }
            }
          }
          if (erreur==true) {
            document.getElementById("texte").innerHTML=alerte;//si marche pas alors, remplace innerHTML par value
            document.location.href="#";
            return
          }
          google.script.run.ajouterLigne(tab);

          document.forms[0].reset()
          google.script.host.close();
        }
    </script>
</body>
</html>

Bonne Journée


Source (un tuto que j’ai fait) : https://forum.excel-pratique.com/astuces/gs-comment-creer-une-boite-de-dialogue-dans-une-sidebar-160...

Salut,

J'ai ajouté les deux versions du form dans le fichier pour pouvoir les tester.

Malheureusement après modification l'export ne veut plus se faire..

Le lien du fichier :

https://docs.google.com/spreadsheets/d/11eLPSTRyZVFjBhy2XNlfFsvVDSkQlJvsM2gDtNYWjFc/edit?usp=sharing

NB: De plus la mise en forme du SideBar change avec ton code ImoKa, le "Nom du Client" disparaît ahah

Je regarderai ton tuto semaine prochaine, merci :)

Il faut indiquer la form appelée

function creer() {
  const html = HtmlService
    .createTemplateFromFile('form_Mikhail')
    .evaluate()
    .setWidth(400)
    .setHeight(580);
  SpreadsheetApp.getUi().showModalDialog(html, 'Ajouter un projet');
}

pour l'autre, je laisse imoka te répondre

Code retravaillé:

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

        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="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;
        }
        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: #30a392;
            color: #fff;
            font-size: 1.15rem;
            cursor: pointer;
            border-radius: 0.4rem;
        }

        input[type="button"]:hover {
            background: #40ad96;
        }
      .modalDialog {
      position: fixed;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: blue;
      z-index: 99999;
      opacity:0;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      pointer-events: none;
      }
      .modalDialog:target {
      opacity:1;
      pointer-events: auto;
      }
      .modalDialog > div {
      width: 400px;
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
      background: -moz-linear-gradient(#2edbe8, #01a6b2);
      background: -webkit-linear-gradient(#2edbe8, #01a6b2);
      background: -o-linear-gradient(#2edbe8, #01a6b2);
      }
      .close {
      background: #606061;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
      }
      .close:hover { background: #6ed1d8; }
    </style>
</head>

<body>
  <script>
    <?
      var data = importation();
    ?>
  </script>
  <div id="openModal" class="modalDialog">
    <a href="#close" title="Close" class="close">X</a>
    <div>
      <h2 style="color:red"><u>Formulaire incomplet :</u></h2>
      <div id="texte"></div>
    </div>
    <a href="#close" title="Close" class="close">x</a>
  </div>
  <form>
    <p>Référence du Projet :</p>
    <input type="text" name="Référence du Projet" value="">
    <p>Nom du Projet :</p>
    <input type="text" name="Nom du Projet" value="">
    <p>Initiales du CDP :</p>
    <select id="initiale">
      <? for(i=0;i<data.length;i++){ ?>
        if(<?= data[i] ?>!=""){
          <option value="<?= data[i] ?>"><?= data[i] ?></option>
        }
      <? } ?>
    <p>Nom du Client :</p>
    <input type="text" name="Nom du Client" value="">
    <p>Début du projet (JJ/MM/AA) :</p>
    <input type="date" name="Début du projet (JJ/MM/AA)" value="">
    <p>Nombre de moule :</p>
    <input type="text" name="Nombre de moule" value="">
    <input type="button" value="Ajouter" onclick="ajouter()">
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>
  </form>
    <script>
        function ajouter() {
          var donnees = document.forms[0]
          var erreur = false
          var messages = ['motif 1','motif 2','motif 3','motif 4','motif 5','motif 6']
          var alerte = ''
          for (var i=0;i<donnees.length;i++){
            if (donnees[i].type != "button"){
              if (donnees[i].value==''){
                erreur = true
                alerte += messages[i] + ' n\'est pas renseigné<br>'
              }
            }
          }
          if (erreur==true) {
            document.getElementById("texte").innerHTML=alerte;//si marche pas alors, remplace innerHTML par value
            document.location.href="#openModal";
            return
          }
          google.script.run.ajouterLigne(tab);

          document.forms[0].reset()
          google.script.host.close();
        }
    </script>
</body>
</html>

Je l'ai amélioré avec le champ du début de projet, un petit calendrier apparaît à côté (utilisation de type="date" au lieu de type="text")

Bonne Journée

@Mikhail: Bien vu

Bonjour,

@Mikhail : Je sais bien, cela me permettait de basculer de ton form à celui de ImoKa. Mais tu as l'oeil aiguisé..

@Imoka : Je ne sais pas si c'est moi qui fait n'importe quoi mais voici le résultat de ton form chez moi :

sans titre

Le nom du client disparaît et l'importation ne veut plus se faire

Si tu souhaites continuer à essayer des choses, je t'en prie.

Pour ma part je suis satisfait avec cette version :

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

        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: #30a392;
            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>
            <?
        var data = importation();
      ?>
        </script>

        <p><b>Référence du Projet :</b></p>
        <input type="text" name="Référence du Projet" value="">

        <p><b>Désignation du Projet :</b></p>
        <input type="text" name="Désignation du Projet" value="">

        <p><b>Initiales du CDP :</b></p>
        <select id="initiale">
      <option value="" disabled selected >Selectionner ...</option>
      <? for(i=0;i<data.length;i++){ ?>
        if(<?= data[i] ?>!=""){
          <option value="<?= data[i] ?>"><?= data[i] ?></option>
        }
      <? } ?>
    </select>

        <p><b>Nom du Client :</b></p>
        <input type="text" name="Nom du Client" value="">

        <p><b>Début du Projet :</b></p>
        <input type="date" name="Début du projet (JJ/MM/AA)" value="">

        <p><b>Nombre de Moule :</b></p>
        <input type="text" name="Nombre de moule" 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>

Merci

NB : Je viens de me rendre compte qu'il te manque le :

</select>

dans ton code avant la ligne :

<p><b>Nom du Client :</b></p>
Rechercher des sujets similaires à "liste deroulante sidebar"