Sidebar ajouter ET recherche

Le 23/10/2024 à 17:39

Bonjour

a tous de nouveau en cours d 'amélioration de mon fichier

Je dois mettre en place un système pour rentrée facilement et uniformément des fournisseurs / téléphone commercial / nom / email etc

Pour cella j 'ai plancher sur le système des sidebars

je peu ajouter grâce a vos codes ( MERCI) des lignes à mon tableau

mais

je peine a faire un retour / recherche dans cette même sidebar

par exemple

j 'ai une ligne du fournisseur 1et je souhaite ajouter / modifier dans la ligne du fournisseur 1 le telephone or la sidebar ne me permet pas d 'afficher cette ligne !

j 'ai vite fait regarder sur cette partie de cours sans grande inspiration

https://sheets-pratique.com/fr/codes/recuperer-valeur-cellule

si un fichier exemple ou un autre cours est plus adapté

merci de votre aide

++

NOta comment faite vous pour trouver tous vos codes, solution ?

Le 23/10/2024 à 21:20

Salut,

En gros, si tu sélectionne dans ta sidebar "fournisseur 1" tu veux que les informations déjà connues de ce fournisseurs soient préremplies dans les champs de ta bar ?

Si oui, peux tu c/c le script de ta barre ? Sinon, peux tu expliquer + en détail, avec des captures par ex.

PS : en réponse à ta question, c'est mon métier, je passe ici entre des tâches dans ma journée de travail pour couper

Le 24/10/2024 à 08:11

TIENS quelqu 'un que je connait !!!! y a que toi sur le forum !!!!

ta tous compris je veux éviter que le fournisseur 1 soit recrée voir je veux permettre une recherche rapide des informations

ci joint capture d 'ecran

image

+base de donnée

image

+ code html honteusement pompé sur le cours !!!

<!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 fournisseur</p>
    <input type="text" name="FOURNISSEURS" value="">
    <p>numeros de compte client</p>
    <input type="text" name="COMPTE CLIENT" value="">
    <p>Adresse mail d'envois commande</p>
    <input type="text" name="ADRESSE MAIL" value="">
    <p>Nom du commercial</p>
    <input type="text" name="NOM COMMERCIAL " value="">
    <p>telephone/ portable commercial</p>
    <input type="text" name="tel commercial" value="">
    <p>telephone standard </p>
    <input type="text" name="telephone du standard " value="">
    <p>adresse / rue </p>
    <input type="text" name="adresse rue " value="">
    <p>adresse / code postal</p>
    <input type="text" name="code postal" value="">
    <p>adrese / ville</p>
    <input type="text" name="ville" value="">
    <p>identifiant site internet </p>
    <input type="text" name="identifiant site internet" value="">
    <p>mot de passe du site internet </p>
    <input type="text" name="mot de passe acces site " 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 = [];

        // 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);
      }
    </script>
  </body>
</html>

+ le script

function afficherFormulaire() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('form').setTitle('Ajouter un fournisseur'));
}

// Insertion des données du formulaire
function ajouterLigne(tab) {
//var spreadsheet = SpreadsheetApp.getActive();
 // spreadsheet.getSheetByname('test').appendRow(tab);

 SPREADSHEET.getSheetByName('fournisseurs').appendRow(tab); // feuille fournisseurs

}

merci

Le 24/10/2024 à 09:34

Salut,

Là ton script lance l'affichage de la sidebar, avec la structure html, puis, la fonction ajouter > ajouterLigne insère tes données dans la feuille.

Il te faut une fonction html qui importe les données actuelles et qui fasse des màj des inputs en fonction.

Donc, il faut un script sous GAS pour envoyer les données dans ton front, j'ai légèrement modifié tes variables pour que ce soit + lisible et simple :

const SS = SpreadsheetApp.getActiveSpreadsheet();
const SHEET = SS.getSheetByName('fournisseurs');

function afficherFormulaire() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('form').setTitle('Ajouter un fournisseur'));
}

function ajouterLigne(tab) {
  SHEET.appendRow(tab);
}

function dataToSidebar(){
  const data = SHEET.getDataRange().getValues()
  console.log(data)
  return data;
}

Ensuite, au niveau du HTML pas mal de changements, au début du bloc script, il faut importer les données de GAS, remplir la liste déroulante de fournisseur et initialiser l'écoute de modification de ce champ :

    document.addEventListener('DOMContentLoaded', function() {
      google.script.run.withSuccessHandler(function(data) {
        remplirListeFournisseurs(data);
        document.getElementById('nomFournisseur').addEventListener('input', function() {
          actualizFournisseur(data);
        });
      }).dataToSidebar();
    });

(il est peut-être possible de juste mettre un onchange() dans le bloc html pour l'actualisation comme pour n'importe quel form html, mais j'ignore si cela fonctionne pour une sidebar sous Google Sheets).

Ensuite, la fonction qui va ajouter les fournisseurs à la liste :

    function remplirListeFournisseurs(data) {
      const datalistFournisseurs = document.getElementById('fournisseurs');
      data.forEach(function(row) {
        const option = document.createElement('option');
        option.value = row[0];  // Nom du fournisseur dans mon cas la position 0 car en colonne A
        datalistFournisseurs.appendChild(option);
      });
    }

Et ensuite la fonction qui va actualiser les données des autres champs : ( dans cet exemple j'ai raccourci les données)

    function actualizFournisseur(data) {
      const fournisseurInput = document.getElementById('nomFournisseur');
      const fournisseurValue = fournisseurInput.value;
      const fournisseurExistant = data.find(row => row[0] === fournisseurValue);

      if (fournisseurExistant) {
        document.getElementById('compteClient').value = fournisseurExistant[1];
        document.getElementById('adresseMail').value = fournisseurExistant[2];
        // ... remplir les autres champs
      } else {
        document.getElementById('compteClient').value = "";
        document.getElementById('adresseMail').value = "";
        // ... vider les autres champs
      }
    }

Et enfin, ta fonction qui envoie les données sur Sheet et qui vide les inputs (là peu de modif, juste ajouter fournisseur qui n'est pas un input text) :

    function ajouter() {
      const fournisseur = document.getElementById('nomFournisseur').value;
      const inputs = document.querySelectorAll('input[type="text"]');
      let tab = [];
      tab.push(fournisseur); 
      inputs.forEach(input => {
        if (input.id !== 'nomFournisseur') {
          tab.push(input.value);
        }
      });
      if (tab.join('') === '') {
        alert('Le formulaire est vide !');
        return;
      }
      inputs.forEach(input => input.value = '');
      google.script.run.ajouterLigne(tab);
    }

Voici le résultat :

screenshot 2024 10 24 09 31 13

Et quand on sélectionne un fournisseur :

screenshot 2024 10 24 09 31 29

Voici pour plus de simplicité le script html complet si tu veux C/C

<!DOCTYPE html>
<html>
<head>
 <style>
      body {
        padding: 0 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"],
    #nomFournisseur {
      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 fournisseur</p>
  <input list="fournisseurs" id="nomFournisseur" placeholder="Sélectionner ou saisir un nouveau">
  <datalist id="fournisseurs">
  </datalist>
  <p>numéros de compte client</p>
  <input type="text" id="compteClient" value="">

  <p>Adresse mail d'envoi de commande</p>
  <input type="text" id="adresseMail" value="">
  <p>Nom du commercial</p>
  <input type="text" name="NOM COMMERCIAL " value="">
  <p>telephone/ portable commercial</p>
  <input type="text" name="tel commercial" value="">
  <p>telephone standard </p>
  <input type="text" name="telephone du standard " value="">
  <p>adresse / rue </p>
  <input type="text" name="adresse rue " value="">
  <p>adresse / code postal</p>
  <input type="text" name="code postal" value="">
  <p>adrese / ville</p>
  <input type="text" name="ville" value="">
  <p>identifiant site internet </p>
  <input type="text" name="identifiant site internet" value="">
  <p>mot de passe du site internet </p>
  <input type="text" name="mot de passe acces site " value="">
  <input type="button" value="Ajouter" onclick="ajouter()">
  <span class="annuler" onclick="google.script.host.close()">Annuler</span>
  <script>

    document.addEventListener('DOMContentLoaded', function() {
      google.script.run.withSuccessHandler(function(data) {
        remplirListeFournisseurs(data);
        document.getElementById('nomFournisseur').addEventListener('input', function() {
          actualizFournisseur(data);
        });
      }).dataToSidebar();
    });
    function remplirListeFournisseurs(data) {
      const datalistFournisseurs = document.getElementById('fournisseurs');
      data.forEach(function(row) {
        const option = document.createElement('option');
        option.value = row[0]; 
        datalistFournisseurs.appendChild(option);
      });
    }

    function actualizFournisseur(data) {
      const fournisseurInput = document.getElementById('nomFournisseur');
      const fournisseurValue = fournisseurInput.value;
      const fournisseurExistant = data.find(row => row[0] === fournisseurValue);

      if (fournisseurExistant) {
        document.getElementById('compteClient').value = fournisseurExistant[1];
        document.getElementById('adresseMail').value = fournisseurExistant[2];
        // ... remplir les autres champs
      } else {
        document.getElementById('compteClient').value = "";
        document.getElementById('adresseMail').value = "";
        // ... vider les autres champs
      }
    }

    function ajouter() {
      const fournisseur = document.getElementById('nomFournisseur').value;
      const inputs = document.querySelectorAll('input[type="text"]');
      let tab = [];
      tab.push(fournisseur); 
      inputs.forEach(input => {
        if (input.id !== 'nomFournisseur') {
          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>
Le 02/11/2024 à 17:38

Bonjour

merci pierre j 'arrive a peu prêt a comprendre tous ton code y beaucoup de therme/aspect qui me sont inconnu pour l 'instant

j 'ai l 'impression que tu traite le code avec 2 page nomme 'nomFournisseur' et 'fournisseurs'

exemple

image

en effet après teste la liste déroulante ne s 'affiche pas pour ma part

sur mon document sheet je n 'ai que 1 page nommée "fournisseurs" mais en soit je me suis dis pas de souci si je change les pages nommé par la mienne ca devrais allez ;........ comme toi mes fournisseurs sont en row (0 )

et bien non trop facile, pas de liste déroulante

j 'ai tenter de crée 2 pages l 'une "fournisseurs" et l 'autre " nomFournisseur" et de copie colle le code fournit sans succes ca ne prend pas la liste déroulante

ligne 55 je vois que tu crée la liste déroulante avec le code html "" <input list="fournisseurs" id="nomFournisseur" ""

si tu crée 2 page fournisseur si c 'est nécessaire alors je dois cache la page qui sert de data a la liste déroulante sous peine d 'avoir un utilisateur qui va saboter la page dans tous les cas après ca je peu cacher les 2 pages

Le 02/11/2024 à 21:23

Salut,

Liens vers fichier test :

https://docs.google.com/spreadsheets/d/1Iysf2EIdWWupgZaPW9cmnLosx_3m-hfUERXNTIVtT-Q/edit?usp=sharing

Le 03/11/2024 à 11:42

OK MERCI PIERRE

j 'ai compris mon erreur de DEBUTANT !!!!

Rechercher des sujets similaires à "sidebar ajouter recherche"