Carnet Wiki

Saisies : faire son marché

Version 23 — Mai 2015 YannX

Le plugin SAISIE propose de nombreuses facilités pour organiser les formulaires : récapitulons le contenu de ce ./saisies/saisies/.

Voir aussi :
-  Saisies : Doc complémentaire.
-  Plugin vérifier

Attention, cette page présente actuellement des notes simples, non encore complètement testées.. Je reviendrais les compléter peu à peu ; mais vous pouvez aussi les compléter, et mieux, les corriger !!


Sommaire :

Pour commencer, indiquons un « bug » [1]rencontré sur une SAISIES (v_1.24.0 du plugin Saisies, encore vrai en 2.2.1..) :

[(#SAISIE{selection, filiere,
			label=<:offre:label_filiere:>,
                        explication=<:offre:explication_filiere:>,
			datas=[(#ARRAY{administrative,'Admin',technique,'Tech',culturelle,'Culture',sportive,'Sportive',autres,'etc...'})]
				 })]

Ce code ne m’affichait pas de contenu à la sélection : replacer la ligne d’option explications après la définition de datas= m’a réglé le problème...
(Y’aurait-il un souci à l’interprétation de .'})] })] ? )

Top


[type_saisie<-]

Les codes-types de SAISIES proposés


En dehors des saisies autonomes (voir plus bas

Les codes-types de SAISIES proposés



En dehors des saisies autonomes ( voir plus bas ) les traitements génériques des options (label, explication, les ’attention’ et traitements de obligatoire...affichage d’une erreur associée si il y en a une) sont assurés par une saisies/_base générique...

Ces saisies peuvent être améliorées par l’usage de nombreuses options, et par l’utilisation intégrant des options de Verifier, avec

verifier=[(#ARRAY{ 
                                #ARRAY{type,entier},
                                #ARRAY{option,   #ARRAY{
                                                                                }
                               })]

(à controler/préciser)

La saisie par défaut est naturellement :
-  input (voir aussi couleurs et recherche : zone stylisée)

-  textarea
Parametres :
- class : classe(s) css ajoutes au textarea
- rows : nombre de ligne, par defaut : 20
- cols : nombre de caracteres de large, par defaut : 40 (cela depend aussi et surtout du CSS)
- inserer_barre : barre d’outils du porte plume à insérer (forum ou edition par défaut)
- previsualisation : si égale à ’oui’, ajoute l’onglet de prévisualisation
- defaut : valeur par defaut si pas présente dans l’environnement
- valeur_forcee : valeur utilisee meme si une valeur est dans l’environnement

Top

Les choix de cases et boutons


-  case : rend « on » ou «  » (avec label_case à coté de la case )
oui_non renvoie « on » ou «  »

-  checkbox
penser à utiliser la notation tableau pour les éléments de choix (multiple)

-  choisir_objet et
choisir_objets : spécifique SPIP 3 parmi les objets editables formulaires/inc-choisir-objets

  • defaut : peut être une chaine (plusieurs valeurs ou pas) qu’on sait décomposer ]
    #SET{defaut, #ENV{defaut}|saisies_chaine2tableau}
  • valeur : doit être un tableau ! ]
  • exclus : peut être une chaine (plusieurs valeurs ou pas) qu’on sait décomposer

true_false : renvoie true or false sur deux boutons radio
radio sur un seul bouton-radio

Top

Gestion calendaire des dates

date
Zone de saisie de date proposée à l’affichage au format jj/mm/aaaa. utilisant le dateur de Bonux si présent.
Pour tous on utilise class=« date » et class=« heure » pour activer le dateur.

  • La valeur fournie peut être :
    -  au format spip jj/mm/aaaa (date uniquement)
    -  au format SQL aaaa-mm-jj (date uniquement)
    -  au format SQL aaaa-mm-jj hh:mm:ss (date et heure)
    -  un tableau avec une entrée « date » et une entrée « heure » séparée, au format SQL (date et heure obligatoire)
  • Pour utiliser les heures, il faut utiliser l’option « horaire=oui » et class=« heure » pour activer le dateur.

date_jour_mois_annee (Nécessite JS) à partir d’un DATETIME MySQL, par création de trois sous-champs affichés (avant la gestion du champ de saisie)
Options :
-  label_(jour|mois|annee)
-  size_(jour|mois|annee)
-  maxlength_(jour|mois|annee)
-  datetime=oui

La saisie normalisée proposera un champ au format MySQL datetime, sauf si on donne à l’option datetime une autre valeur que oui (il semble qu’il y ait un test "

L’usage de l’option ’normaliser’ de la fonction vérifier permet de rétablir un date au format MySQL

Enfin Rasta signale Yet Another DatePicker : voir une démo avec meme un outil de francisation.... http://freqdec.github.io/datePicker/ à télécharger !

Top


Saisies spécialisées

-  email

pays : pour rechercher automatiquement dans la table spip_GEO_PAYS (utiliser le plugin GeoGraphie)

police choix des polices .TTF trouvées dans le chemin

telephone -mais sans fonction de contrôle actuellement-

position_construire_formulaire

Champs « techniques » de Saisies

-  explication [2]

-  fieldset [3]

-   hidden

Top

Les sélecteurs en liste déroulante

Ces modes utilisent SPIP Bonux et les ./formulaires/selecteurs/...

-  secteur : rend un #ID_SECTEUR
Paramètres :
- class : classe(s) css ajoutes au select
- multiple : si quelquechose est passe, le select est multiple, sinon, c’est un select simple
Dans le cas multiple, defaut et valeur doivent etre un array, sinon un int
- recursif : si oui liste les rubriques de facon recursive, et pas uniquement les secteurs
- option_intro : chaine de langue de la premiere ligne vide ? (defaut :« »)
(seulement si non multiple)
- cacher_option_intro : pas de premier option vide (defaut :« »)
- defaut : valeur par defaut si pas présente dans l’environnement
- valeur_forcee : valeur utilisee meme si une valeur est dans l’environnement

selecteur (générique : pour SPIP3 uniquement)
selecteur_article
selecteur_rubrique
selecteur_rubrique_article
rendent un tableau : objet=>id

selecteur_document

selecteur_langue

selecteur_site

-  selection
selection_multiple
selection_par_groupe
Parametres :
-* ** datas : tableau de donnees
liste simple : cle=>valeur
liste avec groupes : cle=> tableau (cle=>valeur)
-* option_intro : chaine de langue de la premiere ligne vide ? (defaut :« »)
-* cacher_option_intro : pas de premier option vide (defaut :« »)
-* class : classe(s) css ajoutes au select
-* defaut : valeur par defaut si pas présente dans l’environnement
-* valeur_forcee : valeur utilisee meme si une valeur est dans l’environnement

Top
[objetspip<-]

Autres sélections d’objets SPIP 3


Outre les sélecteurs à usage des rédacteurs , listé ci-dessus , on trouve des types de saisie spécialisé pour d’autres objets standardisés dans SPIP  :

groupe_mots groupe_mots

mot
Parametres :
- class : classe(s) css ajoutes au select
- option_intro : chaine de langue de la premiere ligne vide ? (defaut :« »)
- cacher_option_intro : pas de premier option vide (defaut :« »)
- id_groupe : limiter à un groupe de mots clés à afficher (en sélecteur si ’un seul mot’,
sinon en liste de cases à cocher, sauf si est rajoutée l’option forcer_select=oui).
(defaut  :« »)
- cacher_option_intro  : pas de premier option vide ( defaut  :« »)
- id_groupe  : groupe des mots clés à afficher - defaut : valeur par defaut si pas présente dans l’environnement
- valeur_forcee : valeur utilisee meme si une valeur est dans l’environnement

articles_originaux

auteurs

destinataires

statuts_auteurs

url

[autonomes<-]

Les saisies autonomes

Les saisies qui sont autonomes sont définies par la fonction saisies_autonomes qui appelle le pipeline du même nom qui permet d’en ajouter de nouvelles. Ce sont par défaut les saisies :
-  fieldset
-  hidden
-  destinataires
-  explication

Top


Les Saisies-Vues

articles_originaux auteurs
case
checkbox
date
destinataires
explication
fieldset
groupe_mots
oui_non
radio
secteur
selecteur
selecteur_article
selecteur_article_fonctions.php
selecteur_document
selecteur_langue
selecteur_rubrique
selecteur_rubrique_article
selecteur_site
selection
selection_multiple

Top


Classes utiles

class=inserer_barre_edition
li_class=haut

Top


Autres facilités et découvertes


-  se passer d’un gros message obligatoire :
L’option obligatoire=oui [4]provoque l’affichage d’une ligne complète de texte ;

Ce serait bien agréable de ne juste afficher que l’asterique (en couleur) :

  • le code actuel est maintenant (Saisies 2.2.) :                        [<label[(#ENV{type_saisie}|match{oui_non|radio|checkbox}|non) for="champ_[(#ENV{id,#ENV{nom}}|saisie_nom2classe)]"]>(#ENV*{label})[<span class='obligatoire'>(#GET{obligatoire}|oui)[(#ENV*{info_obligatoire}|is_null|?{<:info_obligatoire_02:>,#ENV*{info_obligatoire}})]</span>]</label>]

On pouvait rajouter simplement (après la ligne 45 ou 46) de
saisies/_base.html[45] [<label[(#ENV{type_saisie}|match{oui_non|radio|checkbox}|non) for="champ_#ENV{nom}"]>(#EN l’affichage conditionnel de l’etoile par :
[<span class='obligatoire'>(#GET{obligatoire}|oui)[<a title="(#ENV*{info_obligatoire}|is_null|?{<:info_obligatoire_02:>,#ENV*{info_obligatoire}})">(*)</a>]</span>]

Ce qui vous donnerait :

		<!--!inserer_saisie_editer-->
		<li class="editer editer_[(#ENV{nom}|saisie_nom2classe)][ (#GET{obligatoire})][ (#GET{erreurs}|oui)erreur][ (#GET{li_class})][ (#ENV{li_class})][ saisie_(#ENV{type_saisie})]"[ data-id="(#ENV{id_saisie})"]>
			#ENV*{inserer_debut}
			[<label[(#ENV{type_saisie}|match{oui_non|radio|checkbox}|non) for="champ_#ENV{nom}"]>(#ENV*{label})
   [<span class='obligatoire'>(#GET{obligatoire}|oui)[<a title="(#ENV*{info_obligatoire}|is_null|?{<:info_obligatoire_02:>,#ENV*{info_obligatoire}})">(*)</a>]</span>]
			[<a title="(#ENV*{explication})">?</a>]
				</label>]
			[<span class='erreur_message'>(#GET{erreurs})</span>]
			[<!-- p class='explication'>(#ENV*{explication})</p -->]
			[<em class='attention'>(#ENV*{attention})</em>]
			[(#INCLURE{fond=saisies/#ENV{type_saisie},env,nom=[(#ENV{nom}|saisie_nom2name)], disable=#GET{disable},readonly=#GET{readonly}})]
			[(#ENV{disable_avec_post}|et{#ENV{disable_avec_post}|!={non}}|oui)<input type='hidden' name='[(#ENV{nom}|saisie_nom2name)]' value="#ENV{valeur,#ENV{defaut}}" />]
			#ENV**{inserer_fin}
		</li>

Ensuite, la « bonne » façon de faire serait plutôt d’utiliser les extensions du CSS, en particulier de définir un

form.editer .obligatoire:after {
color: #ff6600; content: "(*)";
font-size: 80%; vertical-align: top;
}

A noter que le plugin saisie intègre nativement une option info_obligatoire pour fournir un libellé à rajouter, donc don ici notre (*)..

Mais cela ne vous permettra pas d’avoir la bulle explicative (grâce au <a title=".." >) comme ci-dessus... car la class « obligatoire » est bien appliquée aux labels des champs de formulaire !
Top