Liste déroulante dans formulaire latéral
J'avais pas encore pu regarder vu qu'avant j'étais sur portable.
Je teste le formulaire actuel dans le fichier, il m'indique que le formulaire est vide alors que je viens de le remplir.
Je mets le script de Sébastien.
@Tous ... attention à ce que lorsque le formulaire est validé l'instruction appendrow va ajouter une ligne après la dernière
SpreadsheetApp.getActiveSheet().appendRow(tab);or, s'il y a des valeurs (que je viens de supprimer) dans une ligne très éloignée, on risque de ne pas voir ou plutôt de ne pas s'apercevoir qu'une nouvelle ligne a été ajoutée très éloignée du reste !
le "formulaire_sébastien" fonctionne très bien chez moi
C'est vraiment impeccable. Ca marche super bien.
Par contre, pourquoi je ne vois pas le code lié à ce que vous avez programmé? Le menu d'Imoka et le mien ne fonctionnent plus et je ne peux pas voir celui de Sébastien pour essayer de comprendre ce qui a été fait. Comment le visualiser?
ah ! chez moi je vois bien le formulaire en question auquel Sébastien et moi même avons contribué et qui a été collé par ImoKa je suppose, c'est celui-ci
mais oui j'ai vu que les autres formulaires ne sont plus appelés par le menu car ils ont changé de nom a priori pour la plupart
<!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="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;
}
input::placeholder, textarea::placeholder {
color: #aaa;
}
input:focus::placeholder, textarea:focus::placeholder {
color: #f3f3f3;
}
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;
}
</style>
</head>
<body>
<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>
<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>j'ai tout remis au carré, ferme et rouvre le fichier ...
J'ai déconnecté les autres formulaires pour m'assurer que celui de Sébastien marche.
C'est vraiment génial.
Je vois qu'il y a trois fichiers form.html. Comment le script sait quel fichier utiliser?
Ah oui, les 3 ont été remis ... ben c'est celui qui est appelé ici :
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Ajouter un prospect')
.addItem('Formulaire', 'formulaire')
.addToUi();
}
function formulaire() {
const html = HtmlService.createHtmlOutputFromFile('form_sebastien')
.setWidth(400)
.setHeight(785);
SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter un prospect');
}ton menu appelle formulaire (la fonction) qui va créer l'objet html form_sebastien
C'est vraiment parfait.
Un petit détail, les dates de contact et la liste déroulante ne se réinitialisent pas lorsque l'ajout de ligne est fait. Qu'est-ce que je dois ajouter pour que ce soit le cas?
Autre chose, je vois que la saisie ne fonctionne pas bien. La personne qui est choisi dans la liste déroulante ne s'affiche pas. C'est la date de contact qui s'afffiche à la place (dans le tableau). Idem pour le commentaire. Il ne s'affiche pas.
J'ai vu ça, je travaille ton fichier.
Alors,
Le script récupère les valeurs du type text.
const inputs = document.querySelectorAll('input[type="text"]');Alors que les listes n'on pas d'attributs text et son des balises select et non input.
<select name="Type de contact">La solution, serait d'utiliser des boutons radios.
<input type="radio" name="Type de contact" value="Tel" />TelEt de modifié le javascript.
const inputs = document.querySelectorAll('input[type="text"]'&&'input[type="radio"]');Je précise, à tester
Bonjour,
Le script modifié me dit maintenant que le tableau est vide. De mieux en mieux.
Code html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
padding: 0;
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="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;
}
input::placeholder, textarea::placeholder {
color: #aaa;
}
input:focus::placeholder, textarea:focus::placeholder {
color: #f3f3f3;
}
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;
}
</style>
</head>
<body>
<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">
<p><strong>Type de contact</strong></p>
<input type="radio" name="Type de contact" value="" />Tel<br>
<input type="radio" name="Type de contact" value="" />Email<br>
<input type="radio" name="Type de contact" value="" />Formulaire site internet<br>
<input type="radio" name="Type de contact" value="" />Test en ligne<br>
<input type="radio" name="Type de contact" value="" />Message Vocal<br>
<input type="radio" name="Type de contact" value="" />Visite<br>
<input type="radio" name="Type de contact" value="" />Offre EDOF<br>
<p><b>Qui a pris contact ?</b></p>
<input type="radio" name="Qui a pris contact?" value="" />Phil<br>
<input type="radio" name="Qui a pris contact?" value="" />Pat<br>
<input type="radio" name="Qui a pris contact?" value="" />Séraphina<br>
<input type="radio" name="Qui a pris contact?" value="" />Mouaad<br>
<p><strong>Premier contact</strong></p>
<input type="text" name="Date1" value="" placeholder="Date">
<textarea name="Commentaire_contact1" placeholder="Commentaire"></textarea>
<p><strong>Deuxième contact</strong></p>
<input type="text" name="Date2" value="" placeholder="Date">
<textarea name="Commentaire_contact2" placeholder="Commentaire"></textarea>
<p><strong>Troisième contact</strong></p>
<input type="text" name="Date3" value="" placeholder="Date">
<textarea name="Commentaire_contact3" placeholder="Commentaire"></textarea>
<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"]'&&'input[type="radio"]');
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>Code gs:
// Menu personnalisé (https://www.sheets-pratique.com/fr/codes/menu-personnalise)
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Ajouter un prospect')
.addItem('Formulaire', 'formulaire')
.addItem('Formulaire_test', 'formulaire_ImoKa')
.addToUi();
}
function formulaire() {
const html = HtmlService.createHtmlOutputFromFile('form')
.setWidth(600)
.setHeight(785);
SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter un prospect');
}
function ajouterLigne(tab) {
SpreadsheetApp.getActiveSheet().appendRow(tab);
}
function formulaire_ImoKa() {
const html = HtmlService.createHtmlOutputFromFile('form_test')
.setWidth(600)
.setHeight(785);
SpreadsheetApp.getUi().showModelessDialog(html, 'Ajouter un prospect');
}Je fais un fichier test que j'envoie, avec j'espère la solution.
La solution radio est pas mal, mais il est possible de relever aussi ce qui a été sélectionné dans le menu déroulant.
@Mikhail: je bosse dessus dans un fichier externe.
Il vaudrait mieux passer ceci en type date (on pourrait initialiser à aujourd'hui)
<input type="date" name="Date1" value="" >en mettant à jour le style
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;
}J'avoue que j'aimerais bien arriver à comprendre mais ça fait un petit moment que je suis perdu.
S'il était possible de trouver une solution pour la liste déroulante, ce serait mieux. Ca permettrait de gagner de la place.
Il vaudrait mieux passer ceci en type date (on pourrait initialiser à aujourd'hui)
Qu'est-ce que tu passerais en type date?
J’ai pas trouvé, sinon du javascript.
J’arrête pour l’instant.
Et je regarde plus tard.
PS: Mikhail, j’apprends en même temps
Qu'est-ce que tu passerais en type date?
J'ai mis en type date dans ton formulaire tout ce qui est date ... regarde l'effet et le choix de la date
Maintenant il faut bien sûr résoudre l'exportation de la date vers la feuille ... je vais regarder (à moins qu'imoka le fasse)