Liste déroulante dans formulaire latéral
Est-ce que vous auriez un site qui explique bien les bases pour les Google scripts à me conseiller ?
Je me disais qu'on pourrait ajouter un horodatage en fin de ligne
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;
}
var d = new Date()
tab.push(d.toString())
google.script.run.ajouterLigne(tab);
document.forms[0].reset()
}Est-ce que vous auriez un site qui explique bien les bases pour les Google scripts à me conseiller ?
comme c'est quasiment du javascript ... tu peux regarder ici https://www.google.com/search?q=cours+javascript&oq=cours+javascript
mais surtout sur les réponses dans le forum, en pratiquant aussi
Bonjour,
Est-ce que vous auriez un site qui explique bien les bases pour les Google scripts à me conseiller ?
voilà ce site avec possibilité de le télécharger en Anglais ou en Français
Merci pour ces références. Je vais consulter tout ça.
Plutôt que donner un truc tout fait, je vais y aller pas à pas.
Ci-dessus, si cela t'intéresse, ajout de l'horodatage https://forum.excel-pratique.com/sheets/liste-deroulante-dans-formulaire-lateral-159423/4#p987178 avec
var d = new Date()
tab.push(d.toString())
google.script.run.ajouterLigne(tab);C'est intéressant à ce stade de voir comment Google écrit la date.
Je ne suis pas friand de mettre des variables dans le code, donc si tu veux transmettre par exemple les contacts, il faut que tu modifies comme suit :
pour l'appel du formulaire, change
function formulaire() {
const html = HtmlService.createHtmlOutputFromFile('form')
.setWidth(500)
.setHeight(785);
SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter un prospect');
}en
function formulaire() {
const html = HtmlService
.createTemplateFromFile('form')
.evaluate()
.setWidth(400)
.setHeight(785);
SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter un prospect');
}de façon à pouvoir évaluer le formulaire
note que j'ai changé
createHtmlOutputFromFileen
createTemplateFromFileet ajouté
.evaluate()Ensuite, il faut créer dans le module gs une fonction pour transférer les contacts au formulaire (j'ai mis les contacts dans une feuille en nommant la zone "contacts")
function transfererContacts(){
return SpreadsheetApp.getActiveSpreadsheet().getRange("contacts").getValues()
}Il faut appeler cette fonction dans le code html, par exemple juste après body
<body>
<script>
<? var contacts = transfererContacts(); ?>
</script>et enfin triturer le code de la liste déroulante pour y mettre les différents contacts
<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>
<? } ?>
</selectNote à ce stade les <? .... ?> et <?= .... ?>
C'est un excellent exercice pour passer ensuite à la modification (je ne sais pas où en est ImoKa là-dessus)
Je poursuis,
après horodatage et transmission des contacts dans le formulaire, je me suis dit que pour lire/modifier il faudrait sans doute quelques modifications assez substantielles et qu'il vaudrait mieux faire un second formulaire (même s'il reprend les mêmes dispositions ...)
du coup, on peut mettre le style en commun entre les 2 formulaires, d'autant qu'on a introduit la notion de evaluate()
voici comment procéder :
- on crée un nouveau fichier dans l'éditeur de script qui ne nomme par exemple css dans lequel on colle le style
- dans le script .gs
function rapatrier(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}- et dans le code html
<head>
<?!= rapatrier('css') ?>
</head>Bonjour,
J'ai le formulaire arrêté pour l'instant. L'import de données ne marchais pas.
si je veux transférer les données de la ligne 4, je crée une nouvelle fonction dans .gs
function transfererData() {
return bdd.getRange(4,1,1,7).getValues()
}donc à partir de A4 jusque G4 par exemple ... cela donne une matrice à 2 dimensions, même si la première sera toujours 0 et la seconde variera de 0 à 6
dans .html, je récupère les données au sein d'un script
<script>
<?
var data = transfererData();
?>
</script>et j'utilise les données dans les valeurs des inputs ;
value=""devient
value="<?= data[0][x] ?>"où x varie de 0 à 6
exemple pour le nom qui est le premier
<input type="text" name="nom" value="<?= data[0][0] ?>" placeholder="Nom">il y aura 2 particularités : pour les listes déroulantes et les dates ... je vous laisse chercher, réponse demain !
Bonjour,
Je laisse Patrick cherché vu que maintenant j'ai la solution.
Merci beaucoup pour ces explications mais je suis trop novice pour les comprendre.
Je vais commencer par quelques questions.
Quel l'intérêt de l'horodatage? Ca permet quoi? J'ai bien vu l'affichage des informations en bout de ligne mais elles vont servir à quoi?
J'ai ajouté les éléments pour évaluer le formulaire mais là aussi. Quel est l'intérêt? A quoi ça va servir?
A propos du transfert des contacts au formulaire. Qu'est-ce que ça va permettre d'ajouter ce que tu proposes? A priori, lorsque je teste le formulaire, ça fonctionne, l'élément choisi dans la liste déroulante est bien ajouté dans la feuille alors pourquoi changer le code? quel est le but de cette modification?
function transfererContacts(){
return SpreadsheetApp.getActiveSpreadsheet().getRange("contacts").getValues()
}Il faut appeler cette fonction dans le code html, par exemple juste après body
<body>
<script>
<? var contacts = transfererContacts(); ?>
</script>et enfin triturer le code de la liste déroulante pour y mettre les différents contacts
<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>
<? } ?>
</selectC'est bizarre. J'ai essayé de reproduire la proposition de créer un fichier css avec le style dans un autre fichier où j'ai deux formulaires. Ca marche bien pour le premier formulaire mais pas pour le second. Pour que ça fonctionne pour le second, il faut que je recopie tout le style dans le form.
Voici ce qui fonctionne pour le premier formulaire
<!DOCTYPE html>
<html>
<head>
<?!= rapatrier('css') ?>
</head>
<body>et voici ce qui ne fonctionne pas pour le second.
<!DOCTYPE html>
<html>
<head>
<?!= rapatrier('css') ?>
</head>
<body>A priori, c'est identique.
J'ai fait un test sur un autre fichier et en fait ça ne marche que pour un formulaire. Peut-être qu'il faut ajouter quelque chose pour que ça puisse être pris en compte par plusieurs formulaires?
merci pour ces questions, c'est comme cela que l'on avance et je vois que tu t'impliques (trop de demandeurs ne font que "prendre" sans "comprendre")
Quel l'intérêt de l'horodatage? Ca permet quoi? J'ai bien vu l'affichage des informations en bout de ligne mais elles vont servir à quoi?
C'est assez général dans tous les logiciels : une date pour la création, et souvent une date pour la modification. regarde dans ton PC pour les fichiers, dans drive ... mais si tu n'en as pas besoin, oublie !
J'ai ajouté les éléments pour évaluer le formulaire mais là aussi. Quel est l'intérêt? A quoi ça va servir?
Evaluate() sera indispensable pour transmettre les données d'une ligne vers le formulaire pour la modification. J'en profite juste pour passer les contacts (voir question suivante) et mettre en commun le CSS. Mais sans la modification, c'était du confort.
A propos du transfert des contacts au formulaire. Qu'est-ce que ça va permettre d'ajouter ce que tu proposes? A priori, lorsque je teste le formulaire, ça fonctionne, l'élément choisi dans la liste déroulante est bien ajouté dans la feuille alors pourquoi changer le code? quel est le but de cette modification?
C'est du confort, cela permet de gérer la liste des contacts possibles dans une feuille ... comme je disais, j'aime bien mettre tout ce qui est paramétrage dans la feuille, mais ce n'est pas indispensable. Toutefois, cela s'avèrera précieux pour la modification.
C'est bizarre. J'ai essayé de reproduire la proposition de créer un fichier css avec le style dans un autre fichier où j'ai deux formulaires. Ca marche bien pour le premier formulaire mais pas pour le second. Pour que ça fonctionne pour le second, il faut que je recopie tout le style dans le form.
Voici ce qui fonctionne pour le premier formulaire
<!DOCTYPE html> <html> <head> <?!= rapatrier('css') ?> </head> <body>et voici ce qui ne fonctionne pas pour le second.
<!DOCTYPE html> <html> <head> <?!= rapatrier('css') ?> </head> <body>A priori, c'est identique.
C'est dans le code .gs que ce n'est pas identique ... voici la bonne écriture en cas de mise en commun d'un fichier
function formulaire_3() {
const html = HtmlService
.createTemplateFromFile('form_test_3')
.evaluate()
.setWidth(400)
.setHeight(785);
SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter un prospect');
}je ne sais pas quel est l'autre formulaire car il y en a beaucoup et donc je m'y perds, mais aucun autre appel ne comprend evaluate et createtemplatefromfile
j'utilise les données dans les valeurs des inputs ;
value=""devient
value="<?= data[0][x] ?>"où x varie de 0 à 6
exemple pour le nom qui est le premier
<input type="text" name="nom" value="<?= data[0][0] ?>" placeholder="Nom">il y aura 2 particularités : pour les listes déroulantes et les dates ... je vous laisse chercher, réponse demain !
pour les dates cela ne convient pas ! il faut mettre la date au format de type 2021-07-05, la solution est de transformer la donnée transmise de la façon suivante
si la date est d :
<input type="date" name="Date" value="<?= ((d=='')?'':d.getFullYear()+'-'+('0'+(d.getMonth()+1)).slice(-2)+'-'+('0'+d.getDate()).slice(-2)) ?>" >pour les listes déroulantes, il faut indiquer selected en face de l'option, la solution est la suivante
si le contact est cnt
<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]==dcnt?'selected':'') ?> ><?= contacts[i][0] ?></option>
<? } ?>
</select>Bonjour,
Est-il possible d'insérer les données dans une ligne précise (B2:N2) ?
Bonjour,
Ce que je fais, c'est que j'insère toujours les données en ligne 2 en effet
- parce que l'on me l'a demandé un jour
- car cela permet de voir tout de suite les nouveaux enregistrements
- parce que c'est plus simple
- parce que cela permet de n'avoir la feuille qu'avec juste le nombre de lignes nécessaire (j commence avec 3 lignes dans ma feuille)
donc
const bdd = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('BdD');
const col = 2; // colonne à partir de laquelle les données sont enregistrées
function ajouterLigne(tab) {
bdd.insertRowBefore(2)
bdd.getRange(2,col,1,tab.length).setValues([tab])
}Le problème de CSS est résolu. Mille merci
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.