Documentation

Bazar

Créer son formulaire soi-même

  • Aller dans Base de donnée qui se trouve dans la roue crantée en haut à droite

  • cliquez sur formulaire

Vous arrivez devant l'interface suivante
image tuto_formulaire.png (85.4kB)
Vous arrivez devant la proposition suivante

Description de l'interface

Nom du formulaire Obligatoire, le nom que vous souhaitez donner à votre formulaire
Catégorie PLUS NECESSAIRE / Optionnel / Il est dorénavant possible de rassembler dans un même rendu les fiches en provenance de deux (ou plusieurs) formulaires différents simplement en mettant id="1,2" (par exemple)
Ancienne doc=> catégorie à laquelle appartient le formulaire, texte libre. (ex: dans une catégorie annuaire, on peut avoir un formulaire personne physique et un autre personne morale. Le fait d'utiliser les catégories permettra ensuite par exemple d'afficher dans une carte toutes les fiches de cette catégorie)
Description Optionnel, permet de décrire le formulaire à la personne qui va le remplir, texte libre.
Condition de saisie Optionnel, affiche un message du type "Vous devez accepter les conditions suivantes ..." avant saisie ou modification d'une fiche.
Nom de la classe CSS Optionnel, pour les webdesigners, ajoute une classe CSS pour personnaliser le graphisme de ce type de formulaire
Template Obligatoire, c'est la partie la plus importante, et la plus bizarre : c'est là que vous collez le code des champs souhaités et qui sont listés ci dessous : Vous pouvez choisir pour chaque élément du formulaire, les valeurs que vous souhaitez. En particulier vous pourrez placer dans Template la description de chaque champ : voir le détail ci-dessous

Types de champs possibles

Comment ajouter des champs dans vos formulaires ?

L'espace Template de votre formulaire permet de décrire l'ensemble des champs dont vous avez besoin, à raison d'un champ par ligne.

Exemple d'une ligne de code permettant de créer un champ "texte".
Nous allons détailler la description d'un champ typique. Vous pourrez par la suite la modifier pour l'adapter à vos besoins en comprenant comment elle fonctionne :

texte***bf_titre***Nom prénom***255***255*** *** *** ***1***0***

Pour comprendre cette ligne cabalistique, observez qu'elle propose 13 zones paramétrables séparées par trois étoiles comptez la position de la zone et lisez ci-dessous sa description

Chaque zone sert-elle toujours à la même chose ?
Certaines des zones sont :
  • génériques : elles servent toujours à la même chose (par exemple la première zone sert toujours à indiquer le type de champ) ;
  • quasi-génériques : la zone sert pratiquement toujours à la même chose pour tous les types de champs à quelques exceptions près ;
  • spécifiques : la zone sert à donner des informations différentes suivant le type de champ (texte, bouton, etc.) ;
  1. Type de champ (générique) : texte (chaque type de champ possède sa description) attention, une "fote", une majuscule provoquera une erreur au niveau de ce champ
  2. Identifiant du champ (quasi générique) : bfcontact (sans accents, tout attaché
    • devra être différent_
    • Si vous modifiez cet identifiant alors que certaines fiches ont été saisies, vous perdrez les données de ce champ des précédentes fiches)
  3. Intitulé affiché (quasi générique) : Contact
    • Cette zone indique ce que vos utilisateurs verront à l'écran, suivi de deux point ":"
    • vous pouvez changer cet intitulé au cours de la vie de votre site sans incidences
  4. Taille à l'écran (spécifique) : 15 (caractères)
  5. Nombre de caractère max (spécifique) : 15
  6. Valeur par défaut (spécifique) : non renseigné
  7. ici Non-utilisé : dans certains types de champs, toutes les zones ne sont pas utilisées, dans ce cas, les laisser vide
  8. ici Non-utilisé
  9. Saisie obligatoire (quasi générique) : 1 (champ obligatoire) 0 ou vide (pas d'obligation)
  10. Présence dans le moteur de recherche (quasi générique) : 1 (utilisé dans les recherches) 0 ou vide (pas utilisé)
  11. Texte d'aide à la saisie (quasi générique) : ce qui est écrit dans cette zone deviendra une bulle d'aide visible lorsque l'utilisateur cliquera sur un petit point d'interrogation bleu
  12. Droits d'accès au contenu du champ. (NON FONCTIONNEL avant Doryphore) Même fonctionnement que pour les droits d'accès aux pages : le contenu de ce champ permet de réserver en lecture l'accès à son contenu :
  13. *Droits d'accès à la saisie du champ**. (quasi générique) Même fonctionnement que pour les [[ControlerLAccesAuxPages droits d'accès aux pages]] : le contenu de ce champ permet de réserver l'écriture dans ce champ du formulaire : * (tout le monde, par défaut), + (utilisateurs identifiés), % (propriétaire de la fiche et administrateur uniquement), @admins (membre du groupe admins). Ici le champ indique un accès au groupe des administrateurs uniquement (@admins). Il est possible de combiner plusieurs groupes en les séparant par des espaces.

nb : si vous voyez le code suivant dans votre template de formulaire, les champs manquant seront proposés avec leurs valeurs par défaut
texte***bf_contact***Contact

Pour les retrouver, il suffira d'ajouter les zones paramétrables grâces aux petites étoiles
texte***bf_contact***Contact*** *** *** *** *** *** *** *** ***

puis de compléter les champs qui vous intéressent (ici aide contextuelle) de la manière suivante
texte***bf_contact***Contact*** *** *** *** *** *** *** ***entrez ici votre contact***


Un seul champ indispensable Important

Par exemple, pour un annuaire : 
texte***bf_titre***Nom prénom***255***255*** *** *** ***1***0***

Par exemple, pour un événement : 
texte***bf_titre***Titre de l'événement***255***255*** *** *** ***1***0***

Affichage dans le formulaire de saisie :
image titrenomevenement1.png (6.6kB)
Une entrée contenant le champ bftitre est obligatoire!!**""
"" ""
""**Pour aller plus loin** Il est possible de générer ce champ bftitre de manière automatique en concaténant 2, 3 ou plus de champs
dans ce cas, il ne faut pas qu'un champs avec l'identifiant bftitre soit déjà présent// Syntaxe :_
titre***{{bf_nom}}  - {{bf_prenom}} - {{listeListeOuiNon}} - {{checkboxListePartenaires}}*** ***

dans ce cas : le titre généré est le nom puis le prénom séparé d'un tiret. Si vous souhaitez mettre des listes, indiquez s'il s'agit de liste ou checkbox comme dans l'exemple.


Les plus courants

textelong***bf_adresse1***Adresse postale***200***5*** *** *** ***1***0***
texte***bf_code_postal***Code postal*** ***5*** *** *** ***0***1***
texte***bf_ville***Ville***50***80*** *** *** ***1*** ***
texte***bf_pays***Pays***50***80*** *** *** ***1*** ***


champs_mail***bf_mail***Email***40***255*** *** *** ***0***0***l'adresse mail doit être de la forme quelquechose@domaine.extension

Le champ en 7ème position s'il est rempli avec form rendra invisible le mail et le remplacera par un petit formulaire de contact direct.
champs_mail***bf_mail***Email***40***255*** ***form*** ***0***0***l'adresse mail doit être de la forme quelquechose@domaine.extension

Le champs en 10ème position permet s'il vaut 1 d'envoyer par mail le contenu du formulaire à l'adresse mail renseignée dans ce champ / cela permet donc d'envoyer aux gens une copie mail du formulaire qu'ils viennent de remplir par ex)
champs_mail***bf_mail***Email***40***255*** ***form*** ***0***1***l'adresse mail doit être de la forme quelquechose@domaine.extension

Le champs en 12ième position permet de réserver la lecture de l'adresse au groupe des admins
champs_mail***bf_mail***Email***40***255*** *** *** ***0***0***l'adresse mail doit être de la forme quelquechose@domaine.extension***@admins

Attention, ces mails peuvent tomber dans les spam !!
Syntaxe :
carte_google***bf_latitude***bf_longitude***cartogoogle***1

Attention Il faut obligatoirement un champ adresse contenant bfadresse1 (ou bfadresse2) et/ou bfville et/ou bfpays disponible pour effectuer la géolocalisation


Affichage dans le formulaire de saisie :
image champadresse_carto.png (0.3MB)


Pour changer le centre et le niveau de zoom par défaut de la carte dans le formulaire (c' est à dire la carte que les gens voient lorsqu'ils veulent valider/déplacer le marker) => DocumentationFichierDeConfiguration
Exemple de syntaxe à copier/coller :
jour***bf_date_debut_evenement***Début de l'événement***1*** *** *** *** ***1***0


jour***bf_date_fin_evenement***Fin de l'événement***1*** *** *** *** ***1***0


  1. Type de champ : jour
  2. Identifiant du champ : bf_date_debut_evenement
  3. Intitulé affiché : Début de l'événement
  4. Non-utilisé
  5. Non-utilisé
  6. indiquer today ici permet d'afficher par défaut la date du jour
  7. Non-utilisé
  8. Non-utilisé
  9. Saisie obligatoire : 1 (oui)
  10. Non-utilisé
Syntaxe :
Affichage dans le formulaire de saisie :
image champdate.png (6.9kB)
image***bf_image***Image de présentation (facultatif)***140***140***600***600***right*** *** ***Votre image doit être au format .jpg ou .gif ou .png

  1. Type de champ : image
  2. Identifiant du champ : bf_image (sans accents, tout attaché)
  3. Intitulé affiché : image de présentation (facultatif)
  4. Hauteur de la vignette : 140 (en px)
  5. Largeur de la vignette : 140 (en px)
  6. Hauteur de l'image redimensionnée : 600 (en px)
  7. Largeur de l'image redimensionnée : 600 (en px)
  8. Classe css associée à l'image : right (ou center ou left)
  9. Saisie obligatoire : 0 (non)
  10. Présence dans le moteur de recherche : non renseigné (non).
  11. Texte d'aide à la saisie : Votre image doit être au format .jpg ou .gif ou .png, ce qui est écrit dans cette zone deviendra bulle d'aide visible lorsqu'ils cliqueront sur un petit point d'interrogation bleu
  12. Droits d'accès du champ. * (tout le monde, par défaut), + (utilisateurs identifiés), % (propriétaire de la fiche et administrateur uniquement), @admins (membre du groupe admins).
Affichage dans le formulaire de saisie :
image champimage.png (6.2kB)
lien_internet***bf_site_internet***Site Internet***40***255***http://*** *** ***0***0***Le lien doit être valide


Affichage dans le formulaire de saisie :
image champlieninternet.png (2.3kB)
Exemple de syntaxe à copier/coller :
checkbox***ListeFormations***Type de formation*** ***1*** *** *** ***1***1***

  1. Type de champ : checkbox
  2. Identifiant du champ : ListeFormations Pour trouver l'identifiant de la liste, aller sur la page Base de donnée , cliquez sur Listes et récupérez l'ID de la liste que vous souhaitez utiliser dans le menu déroulant (ex: ListeDepartementsFrancais) NB : il faudra évidemment que vous ayez fabriqué une liste
  3. Intitulé affiché : Type de formation
  4. Non-utilisé
  5. Valeur par défaut : l'élément dont l'identifiant est 1.
  6. Non-utilisé
  7. Identifiant de la liste (si la même liste est utilisées plusieurs fois dans le même formulaire) : non renseigné ici, si vous utilisez plusieurs fois cette liste dans le formulaire, allez voir l'encadré ci-dessous
  8. Choix du mode auto-complétion : vide (cases à cocher), tags (auto-complétion)
  9. Saisie obligatoire : 0 (non).
  10. Présence dans le moteur de recherche : 0 (non).
  11. Texte d'aide à la saisie : ce qui est écrit dans cette zone deviendra bulle d'aide visible lorsqu'ils cliqueront sur un petit point d'interrogation bleu
  12. Droits d'accès du champ. * (tout le monde, par défaut), + (utilisateurs identifiés), % (propriétaire de la fiche et administrateur uniquement), @admins (membre du groupe admins). ""<div class="alert alert-danger">""**Attention!**
Si l'on utilise plusieurs fois une liste dans un même formulaire : il faut mettre un identifiant en 7ieme position pour les différencier (cf. bforigine et bfarrivee)

Affichage dans le formulaire de saisie :
image champcheckbox.png (20.4kB)
Pour aller plus loin Si vous souhaitez que votre checkbox soit alimentée non pas par une liste mais par le contenu d'un autre formulaire bazar c'est possible via cette syntaxe : 
checkboxfiche***id formulaire concerné***libellé qui doit apparaître*** *** *** *** *** ***1***0***

Vous pouvez aller plus loin en liant des formulaires entre eux...

Exemple de syntaxe à copier/coller :
liste***ListeDepartementsFrancais***Département*** *** ***1*** *** ***1***1***

  1. Type de champ : liste
  2. Identifiant du champ : ListeDepartementsFrancais Pour trouver l'identifiant de la liste, aller sur la page Base de donnée , cliquez sur Listes et récupérez l'ID de la liste que vous souhaitez utiliser dans le menu déroulant (ex: ListeDepartementsFrancais) NB : il faudra évidemment que vous ayez fabriqué une liste
  3. Intitulé affiché : Département
  4. Non-utilisé
  5. Non-utilisé
  6. Valeur par défaut : l'élément dont l'identifiant est 1. si vous laissez ce champ vide, sera affiché "choisir"
  7. Identifiant de la liste (si la même liste est utilisées plusieurs fois dans le même formulaire) : non renseigné ici, si vous utilisez plusieurs fois cette liste dans le formulaire, allez voir l'encadré ci-dessous
  8. Non-utilisé
  9. Saisie obligatoire : 0 (non).
  10. Présence dans le moteur de recherche : 0 (non).
  11. Texte d'aide à la saisie : Lister les formations ici. ce qui est écrit dans cette zone deviendra bulle d'aide visible lorsqu'ils cliqueront sur un petit point d'interrogation bleu
  12. Droits d'accès du champ. * (tout le monde, par défaut), + (utilisateurs identifiés), % (propriétaire de la fiche et administrateur uniquement), @admins (membre du groupe admins). ""<div class="alert alert-danger">""**Attention!** Si l'on utilise plusieurs fois une liste dans un même formulaire : il faut mettre un identifiant en 7ieme position pour les différencier (cf. bf_origine et bf_arrivee)""</div>"" %%liste*ListeDepartementsAlpins *Département d'origine* *05* *bf_origine* *0*1* liste*ListeDepartementsAlpins *Département d'arrivée* *05* *bf_arrivee* *0*1*
    Affichage dans le formulaire de saisie :
{{attach file="champliste1.png" desc="image champliste1.png (8.4kB)" size="big" class="center" img class="img-responsive img-thumbnail"}}

""<div class="alert alert-warning">""Vous pouvez [[LierFormulairesEntreEux aller plus loin en liant des formulaires entre eux...]]""</div>""
----
{{end elem="panel"}}
{{panel title="Radio (un choix parmi une liste visible)"}}
Exemple de syntaxe à copier/coller :
    radio    *ListeFormations*Type de formation* *1* * * *1*1*
    1) **Type de champ** : radio
 - **Identifiant du champ** : ""ListeFormations"" Pour trouver l'identifiant de la liste, aller sur la page [[BaZar Base de donnée]] , cliquez sur Listes et récupérez l'ID de la liste que vous souhaitez utiliser dans le menu déroulant (ex: ListeDepartementsFrancais) NB : il faudra évidemment que vous ayez [[FabriquerListe fabriqué une liste]]
 - **Intitulé affiché** : Type de formation
 - Non-utilisé
 - Valeur par  défaut : l'élément dont l'identifiant est 1.
 - Non-utilisé
 - Identifiant de la liste  (si la liste est utilisées plusieurs fois dans le même formulaire) : non renseigné ici, si vous utilisez plusieurs fois cette liste dans le formulaire, allez voir l'encadré ci-dessous
 - Non-utilisé
 - Saisie obligatoire : 0 (non).
 - Présence dans le moteur de recherche : 0 (non).
 - Texte d'aide à la saisie : non renseigné.
 - Droits d'accès du champ.  * (tout le monde, par défaut), + (utilisateurs identifiés), % (propriétaire de la fiche et administrateur uniquement), @admins (membre du groupe admins).
""<div class="alert alert-danger">""**Attention!**
Si l'on utilise plusieurs fois une liste dans un même formulaire : il faut mettre un identifiant en 7ieme position pour les différencier (cf. bf_origine et bf_arrivee)""</div>""
Affichage dans le formulaire de saisie :
{{attach file="champradio.png" desc="image champradio.png (6.7kB)" size="medium" class="center" img class="img-responsive img-thumbnail"}}
""<div class="alert alert-warning">""Vous pouvez [[LierFormulairesEntreEux aller plus loin en liant des formulaires entre eux...]]""</div>""
----
{{end elem="panel"}}
{{panel title="Téléphone"}}
    texte    *bf_tel*Téléphone*10*20* * * * *0
    ----
{{end elem="panel"}}
{{panel title="Texte court"}}
    texte*bf_contact*Contact*15*15* * * *1*0*
  13. *Type de champ*
  14. *Identifiant du champ*
  15. *Intitulé affiché** : Contact
  16. Taille à l'écran : 15 caractères
  17. Nombre de caractère max : 15 caractères
  18. Valeur par défaut : ici non renseigné, si texte alors il sera proposé par défaut
  19. Non-utilisé
  20. Non-utilisé
  21. Saisie obligatoire : 1 (oui) 0 ou vide (non)
  22. Présence dans le moteur de recherche : 0 (non)
  23. Texte d'aide à la saisie : ce qui est écrit dans cette zone deviendra bulle d'aide visible lorsqu'ils cliqueront sur un petit point d'interrogation bleu
  24. Droits d'accès du champ. * (tout le monde, par défaut), + (utilisateurs identifiés), % (propriétaire de la fiche et administrateur uniquement), @admins (membre du groupe admins).
Exemple de syntaxe à copier/coller :
textelong***bf_description***Description***80***5*** *** ***wiki***0*** ***

Explication :
  1. Type de champ : textelong
  2. Identifiant du champ : bf_description (sans accents, tout attaché)
  3. Intitulé affiché : Formations proposées
  4. Largeur de la zone de saisie : 80 caractères
  5. Nombre de lignes de la zone de saisie : 5 lignes (attention au delà la case commence à être trop haute)
  6. Valeur par défaut : non renseigné
  7. Non-utilisé
  8. Format d'écriture : wiki (par défaut, syntaxe wiki) html (propose un éditeur wyzywig), ou nohtml (html non interprété)
  9. Saisie obligatoire : 0 (non).
  10. Présence dans le moteur de recherche : non renseigné (non).
  11. Texte d'aide à la saisie : ce qui est écrit dans cette zone deviendra bulle d'aide visible lorsqu'ils cliqueront sur un petit point d'interrogation bleu
  12. Droits d'accès du champ. * (tout le monde, par défaut), + (utilisateurs identifiés), % (propriétaire de la fiche et administrateur uniquement), @admins (membre du groupe admins).
Permet de joindre un fichier à une fiche.
Exemple de syntaxe à copier/coller :
fichier***bf_fichierstage***Documents produits lors du stage***20000000*** *** *** *** ***0*** ***ne pas dépasser 20 Mo

Explication :
  1. Type de champ : fichier
  2. Identifiant du champ : bf_fichierstage (sans accents, tout attaché)
  3. Intitulé affiché : Documents produits lors du stage
  4. Taille maximum du fichier : 2000000 (20 mega, c'est beaucoup !).
  5. Non-utilisé
  6. Non-utilisé
  7. Non-utilisé
  8. Non-utilisé
  9. Saisie obligatoire : 0 (non)
  10. Présence dans le moteur de recherche : non renseigné (non).
  11. Texte d'aide à la saisie : ne pas dépasser 20 Mo, ce qui est écrit dans cette zone deviendra bulle d'aide visible lorsqu'ils cliqueront sur un petit point d'interrogation bleu
  12. Droits d'accès du champ. * (tout le monde, par défaut), + (utilisateurs identifiés), % (propriétaire de la fiche et administrateur uniquement), @admins (membre du groupe admins).
Permet d'entrer des mots-clés dans le champ.
Chaque mot-clé est validé par la touche "entrée"
Exemple de syntaxe à adapter : 
tags***bf_tags***Trois mots-clés que Yeswiki vous inspire***150***1*** *** *** ***0***1***Appuyer sur la touche "Entrée" pour séparer les mots-clés


En image
image capturetags.png (6.0kB)

Pour complexifier

inscriptionliste***info@gcn-quinoa.org***Je souhaite m'inscrire à la liste pour recevoir des informations sur le réseau***bf_mail***ezmlm***


Explication des zones
  1. Type de champ : inscriptionliste
  2. adresse de la liste : l'adresse de la mailing liste que vous avez précédemment crée (via votre hébergement, via framaliste...)
  3. Intitulé affiché : Je souhaite m'inscrire à la liste pour recevoir des informations sur le réseau
  4. Mail à inscrire : indique le champ utilisé dans le formulaire pour inscrire l'adresse mail. Pr défaut bf_mail
  5. gestionnaire de liste : indique quel logiciel est utilisé pour la liste. par exemple : ezmlm (pour des listes crées chez OVH), sympa (pour des framalistes)

Affichage dans le formulaire de saisie :
image champinscription.png (5.0kB)
labelhtml***<h3>Coordonnées</h3>*** ***<h3>Coordonnées</h3>

On peut écrire ce que l'on veut en langage HTML! (par exemple, pour mettre un titre : <h3>nom du titre</h3>)
On écrit 2 fois le titre : la première fois c'est pour apparaître dans la saisie, la deuxième fois c'est pour la visualisation de la fiche
Il s'agit d'une utilisation détournée de labelhtml
d'abord on ouvre un label html de ce type
labelhtml***<div style="display:none">*** *** ***

Ensuite on place les champs qui doivent être encodés mais pas vus ensuite / par ex :
jour*bf_date_debut_publication*Date de publication*1* * * * *1*0 jour*bfdatefin_publication*Date de déplubication*1* * * * *1*0

on ferme le labelhtml
labelhtml***</div> *** *** ***


utilisateur_wikini***bf_titre***bf_mail***

Attention, veiller à bien utiliser en complément cet autre champ (pour gérer les droits de la fiche-utilisateur créée) dans votre formulaire, écrit de la sorte 
acls*** * ***user***user***

Une question s'affiche seulement si un choix précis a été fait dans une liste ou un checkbox ou un radio précédent.

Dans ces 3 exemples (avec une liste et un checkbox et un radio), une première question propose de choisir parmi des compétences, et une seconde question s'affiche seulement si on choisit "autre" (écrit exactement comme ça comme clé dans la ListeCompetences).

Exemple 1 :
La liste propose une option "autre" qui, si elle est sélectionnée, fait apparaître une question texte pour préciser :
liste***listeListeCompetences***Compétences*** ***1*** *** *** ***1***1***
labelhtml***<div id="ListeCompetences_autre" style="display:none;">*** ***
textelong***bf_autrecompetence***Autre(s) compétence(s)***80***5*** *** ***wiki***0*** *** ***
labelhtml***</div> <!-- fin de la condition -->*** ***


Exemple 2 :
Le checkbox propose une option "autre" qui, si elle est cochée, fait apparaître une question texte pour préciser :
checkbox***ListeCompetences***Compétences*** ***1*** *** *** ***1***1***
labelhtml***<div id="checkboxListeCompetences_autre" style="display:none;">*** ***
textelong***bf_autrecompetence***Autre(s) compétence(s)***80***5*** *** ***wiki***0*** *** ***
labelhtml***</div> <!-- fin de la condition -->*** ***


Exemple 3 : (uniquement disponible à partir de doryphore 2021-10-25-3)
Le radio propose une option "autre" qui, si elle est choisie, fait apparaître une question texte pour préciser :
radio***ListeCompetences***Compétences*** ***1*** *** *** ***1***1***
labelhtml***<div id="radioListeCompetences_autre" style="display:none;">*** ***
textelong***bf_autrecompetence***Autre(s) compétence(s)***80***5*** *** ***wiki***0*** *** ***
labelhtml***</div> <!-- fin de la condition -->*** ***


Comment trouver le nom à placer dans le champ id ?
1. identifier le champ qui va permettre de déclencher l'affichage
2. afficher une fiche du formulaire concerné (donc après création du formulaire) en ajoutant 
/raw
à la fin de l'url de cette fiche
3. dans le texte ainsi affiché, reperer le champ concerné (exemple : checkboxListeCompetences, checkboxfiche4, checkboxfiche5bf
  • fiche)
5. revenir dans la modification du formulaire, onglet code et mettre :
<div id="<nom_du_champ_note_plus_haut>_<cle_notee_au_point_4>" style="display:none;">


Il faut intégrer plusieurs éléments dans la constitution du formulaire comme le montre l'exemple ci-dessous pour 3 onglets :
NB : Les noms des onglets (Onglet 1, Onglet 2, Onglet 3) peuvent être modifiés dans les différentes occurrences ci-dessous, l'exemple est également transposable pour seulement 2 onglets ou plus de 3.

Voir un exemple

Indique qu'il y aura 3 onglets :
labelhtml***<ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#menu1" role="tab" data-toggle="tab">Onglet 1</a></li><li role="presentation"><a href="#menu2" role="tab" data-toggle="tab">Onglet 2</a></li><li role="presentation"><a href="#menu3" role="tab" data-toggle="tab">Onglet 3</a></li></ul><div class="tab-content"><!--indique qu'il y aura 3 onglets, les noms des onglets (Onglet 1, Onglet 2,...) peuvent être modifiés ici (et dans leur différentes occurences ci-dessous)--> *** ***

Ouvre le premier onglet :
labelhtml***<div role="tabpanel" class="tab-pane active" id="menu1"><br><br><!--ouvre le premier onglet-->*** ***


Questions de l'onglet 1


Affiche un bouton pour passer à l'onglet 2 :
labelhtml***<a class="btn btn-lg btn-primary pull-right" href="#menu2" role="tab" data-toggle="tab">Onglet 2<i class="glyphicon glyphicon-chevron-right"></i></a><!--Affiche un bouton pour passer à l'onglet 2-->*** ***

Ferme l'onglet 1 et ouvre l'onglet 2 :
labelhtml***<div class="clearfix"></div></div><!-- ferme l'onglet 1 --> <div role="tabpanel" class="tab-pane" id="menu2"><br><br><!-- ouvre l'onglet 2-->*** ***


Questions de l'onglet 2


Affiche un bouton pour revenir à l'onglet 1 et un bouton pour passer à l'onglet 3 :
labelhtml***<a class="btn btn-lg btn-primary pull-left" href="#menu1" role="tab" data-toggle="tab"> <i class="glyphicon glyphicon-chevron-left"></i> Onglet 1</a><a class="btn btn-lg btn-primary pull-right" href="#menu3" role="tab" data-toggle="tab">Onglet 3<i class="glyphicon glyphicon-chevron-right"></i></a><!--Affiche un bouton pour revenir à l'onglet 1 et un bouton pour passer à l'onglet 3-->*** ***

Ferme l'onglet 2 et ouvre l'onglet 3 : 
labelhtml***<div class="clearfix"></div></div><!-- ferme l'onglet 2 --> <div role="tabpanel" class="tab-pane" id="menu3"><br><br><!-- ouvre l'onglet 3-->*** ***


Questions de l'onglet 3


Affiche un bouton pour revenir à l'onglet 2 et un bouton pour enregistrer la fiche :
labelhtml***<a class="btn btn-lg btn-primary pull-left" href="#menu2" role="tab" data-toggle="tab"> <i class="glyphicon glyphicon-chevron-left"></i>Onglet 2</a><button class="pull-right btn btn-lg btn-success bouton_sauver" name="valider" type="submit">Enregistrer</button><!--Affiche un bouton pour revenir à l'onglet 2 et un bouton pour enregistrer la fiche-->*** ***

Ferme l'ensemble des onglets et efface les boutons Valider/Annuler en bas de chaque onglet :
labelhtml***<div class="clearfix"></div></div><!-- ferme l'onglet 3 --> </div><!-- ferme l'ensemble des onglets --><style>#formulaire .form-actions { display:none; }</style><!--Efface les boutons Valider/Annuler en bas de chaque onglet-->*** ***


Attention Si un des onglets comprend un champ carto et qu'à l'affichage il manque des tuiles à la carte, il faut ajouter le code suivant (à tous les liens qui mènent à l'onglet dans tab et boutons précédent suivant )
onclick="window.dispatchEvent(new Event('resize'))"

ce qui donne ceci (en supposant que la carte est sur l'onglet 3)
<a href="#menu3" role="tab" data-toggle="tab" onclick="window.dispatchEvent(new Event('resize'))">

ainsi que 
<a class="btn btn-primary pull-right" href="#menu3" role="tab" data-toggle="tab" onclick="window.dispatchEvent(new Event('resize'))">Onglet 3. Localisation<i class="glyphicon glyphicon-chevron-right"></i></a>

Utile par exemple pour simplifier un formulaire long.

Voici le bout de code à insérer dans votre fomulaire
labelhtml***<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Cliquez ici pour accéder aux champs optionnels       </a> </h4> </div>    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body">*** *** ***
textelong***bf_textelong***description***20***4*** ***1000*** *** ***
texte***bf_adresse***Adresse postale***200***200*** *** *** *** ***0***
labelhtml***</div></div></div></div>*** *** ***

Voir un exemple ici


Pour insérer plusieurs accordions :
Si vous voulez une 3ème, 4ème... accordion, pensez à personnaliser les parties écrites en majuscules dans le code (par ex COLLAPSE3 ou ACCORDION3...)
labelhtml***<div class="panel-group" id="ACCORDION1" role="tablist" aria-multiselectable="true"><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#ACCORDION1" href="#COLLAPSE1" aria-expanded="true" aria-controls="COLLAPSE1">Tu souhaites rejoindre l'organisation (en amont de l'événement) </a> </h4> </div>    <div id="COLLAPSE1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body">*** *** ***
ICI INSERER LES CHAMPS QUE VOUS VOULEZ
labelhtml***</div></div></div></div>*** *** ***

labelhtml***<div class="panel-group" id="ACCORDION2" role="tablist" aria-multiselectable="true"><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#ACCORDION2" href="#COLLAPSE2" aria-expanded="true" aria-controls="COLLAPSE2">Tu souhaites donner un coup de main (durant l'événement) </a> </h4> </div>    <div id="COLLAPSE2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body">*** *** ***
ICI INSERER LES CHAMPS QUE VOUS VOULEZ
labelhtml***</div></div></div></div>*** *** ***

Voir un exemple avec plusieurs accordions par là


acls***accès à la fiche en lecture***accès à la fiche en écriture***accès à la fiche en commentaire***

Par exemple : 
acls***+***NelsonMandela***NelsonMandela***
signifie que seuls les utilisateurs enregistrés peuvent lire la fiche, et que seul l'utilisateur NelsonMandela peut modifier et commenter la fiche

Pour rappels les différents symbole sont :
  • * signifie "tout le monde sans identfication"
  • + signifie les utilisateurs enregistrés
  • % signifie l'utilisateur qui a crée la fiche
  • @admins signifie le groupe d'utilisateur @admins
- et on peut aussi spécifier un ou pluieurs comptes utilisateurs en particulier.

metadatas***colibris***1col.tpl.html***colibris.bootstrap.min.css***foret.jpg


  • 1 ) type de champ : metadas
  • theme : nom de dossier
  • squelette : squelette de theme
  • style : style css du theme associe
  • bgimg : image de fond dans files/backgrounds
permet de définir le thème associé à la fiche

Cases a cocher:
checkboxfiche***36***Médias liés***<vide>***<vide>***<vide>***id*** ***0***0***

Auto-complétion
checkboxfiche***36***Médias liés***<vide>***<vide>***<vide>***id***tags***0***0***


Plus d'explications sur cette page.
texte***bf_range***slider***0***10*** *** ***range***


texte***bf_color***couleur***0***10*** *** ***color***


champs_cache***bf_champs_cache***valeur cachée***

Il suffit d'utiliser la combinaison des deux actions "cacher des champs en mode vue" et "adresse mail", ce qui nous donne : 
labelhtml***<div style="display:none"> *** ******
champs_mail***bf_mail1***Email***40***255***monmail@votremail.fr *** *** *** ***1*** ***@admins
labelhtml***</div>*** *** ***


Pour comprendre : Un champs mail permanent est intégré, c'est un champs "adresse mail" dont le contenu est pré-remplis avec notre propre adresse mail ... mais il est rendue invisible lors de la saisie grâce à l'action "cacher des champs en mode vue".
Il est également invisible pour l'utilisateur qui reçoit sa fiche grâce au paramètre de confidentialité définis sur"@admins"

mot_de_passe***bf_cache***mot de passe***


bookmarklet***Veille cooperative***Copier ce bookmark***bf_url***

  • Type de champ : listefichesliees
  • id du formulaire lié :
  • query : peut rester vide
  • param de l'action : champs="bf
  • liens.tpl.html par exemple
  • type de fiche liee : checkbox pour checkboxfiche , rien pour listefiche
  • Non-utilisé
  • Non-utilisé
  • Non-utilisé
  • Non-utilisé

Pour aller plus loin pour les développeurs, tutoriel "créer un champ Bazar custom"