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 :
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:
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 ?
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 :
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>