Un total de 132 pages ont été trouvées avec le mot clé documentation.

{{abonnement}}


  • Comportements
proposer une fenètre permettant de s'inscrire à une liste de discussion / diffusion

syntaxe minimale : {{abonnement mail="lolo@loo.lol"}}
syntaxe complexe : {{abonnement mailinglist="ezmlm" mail="lolo@loo.lol" template="subscribe-form.tpl.html" class="center"}}

Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
mailinglist indique si on travaille avec le logiciel ezmlm ou sympa pour la mailing list. Ceci permet de gérer les mails de confirmation envoyés par ezmlm ou sympa correctement
mail l'adresse d'abonnement à la liste, généralement de type subscribe_lolo@lolo.lol (sur ezmlm) sinon le nom de la liste sur framalistes
template permet d'appeler un template sinon par défaut subscribe-form.tpl.html
class pull-left / pull-right

Cette action donne :
Pour une liste sous ezmlm
{{abonnement mail="toto@mondomaine.be" mailinglist="ezmlm"}}

Pour une liste sous sympa (commes chez www.framalistes.org)
{{abonnement mail="toto@framalistes.org" mailinglist="sympa"}}

Accordéon

Ce template est fourni avec un yeswiki de base oui il est fourni par défaut
accordeon_image_accordeon_accordeon.png
Présentation rapide Affiche sous forme de fiches à déplier/plier
Informations importantes à propos de ce template C'est l'affichage par défaut.
Lien vers un wiki où le template est visible http://yeswiki.net/cercopitheque/demo/?ListeAccordeon
Lien vers le wiki démo où le template est visible http://yeswiki.net/cercopitheque/demo/?ListeAccordeon
Code source du formulaire qui a servi pour cet exemple
texte***bf_titre***Prénom et nom***60***255*** *** *** ***1***0***
image***bf_image***Image de présentation (facultatif mais c'est plus sympa)***140***140***600***600***right*** *** ***
texte***bf_fonction***Mon métier, ma fonction***60***255*** *** *** ***0***0***
textelong***bf_description***Mes lieux d'investissement pro ou perso***5***5*** *** ***wiki *** 
textelong***bf_projet***Mon projet***5***5*** *** ***wiki *** 
texte***bf_tel***Téléphone pro (ou perso)***10***20*** *** *** *** ***0
champs_mail***bf_mail***Email (n'apparaitra pas sur le web)***60***255*** ***form*** ***1***0***
texte***bf_structure***Nom de la structure***60***255*** *** *** ***0***0***
lien_internet***bf_site_internet***Site Internet***40***255***http://*** *** ***0***0
texte***bf_adresse***Adresse***50***50*** *** *** ***0***0
texte***bf_code_postal***Code postal***8***8*** *** *** *** ***0
texte***bf_ville***Ville***50***80*** *** *** *** ***0
labelhtml***<span style="color:#cc3333;">Il faut maintenant cliquer sur le bouton bleu pour placer votre point sur la carte </span><br>*** ***
carte_google***bf_latitude***bf_longitude***cartogoogle***
labelhtml***<h3>Il ne vous reste plus qu'à valider ! </h3>*** ****** *** *** *** *** *** *** ***@admins
Mot clés documentation

{{accordion}} et {{panel}}

démo de l'action
L'action accordion quand elle est utilisée autour d'une ou plusieurs actions panel permet d'afficher ces panels en mode accordéon. Les panels sont alors affichés fermés par défaut et un seul panel peut être ouvert à la fois.
Il est également possible de laisser un panel ouvert à l'affichage de la page en spécifiant sur ce panel le paramètre type = "colapsible" (voir la page de démo pour plus d'informations).

Comportements
Sert a masquer une ou plusieurs parties de la page

Remarque
Un ensemble de panels ouvrables/fermables sont différents d'un accordéon qui rassemblent plusieurs panels : dans le premier cas, l'ouverture/fermeture des panels est indépendantes tandis que dans le deuxième cas, l'ouverture d'un panel provoque la fermeture des autres panels qui font partie de l'accordéon.
syntaxe minimale :
{{accordion}}
{{panel title="Titre de la section 1"}}
texte a masquer
{{end elem="panel"}}
{{panel title="Titre de la section 2"}}
texte a masquer
{{end elem="panel"}}
...
{{end elem="accordion"}}

Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
title Titre qui apparaît et sur lequel il faut cliquer pour faire apparaître le texte masqué
class détermine la couleur dominante du titre et du panel : "panel-success" pour du vert ; "panel-info" pour du bleu ; "panel-warning" pour du orange ; "panel-danger" pour du rouge

Action {{bazarcarto}}

Cette action permet d'afficher le contenu d'une base de données (on parlera de fiches) sur un fond cartographique. Il faut bien entendu que ces fiches comportent une adresse postale !
Exemple de code pour mettre en couleur ou en icones :
  • colorfield="listeListetype"
  • color="orange = 1, green = 2, red= 3, blue= 4, purple = 5"
  • iconfield="listeListetype"
  • icon="graine-d-oasis = 1, oasis-ressource = 2, oasis-de-vie = 3, ecosite-sacre = 4"


image affichage_carto1.png (0.4MB)
image Capture_decran_20160405_a_095424.png (0.4MB)

Affiche cartographique multicouches
  • Affichage multicouches sur une carto Bazar. Où comment afficher potentiellement sur une carte : un fond de carte Openstreetmap + des données statiques Geojson + des tuiles dynamiques + bien sûr vos données de formulaire

Sur les yeswikis récents, utilisez cette syntaxe :
{{bazarliste id="" template="map.tpl.html" provider="OpenStreetMap" lat="" lon="" zoom=""  width="" height="" query=""}}


Syntaxe obsolète
{{bazarcarto id="" lat="" lon="" zoom=""  width="" height="" query=""}}


Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
  • Des paramètres supplémentaires pour le filtrage : voir BazarFacette
nom du paramètre valeurs du paramètre
id id de la base de données à afficher, si vide toutes les bases de données sont affichées. Il est possible d'afficher sur une même carte plusieurs bases de données spécifiques en entrant leur id séparé par une virgule
query permet de n'afficher qu'une partie de la base de données en fonction d'un tri sur un champ voir la doc query
colorfield Définis le champ (souvent une liste) qui détermine la couleur du point. Par exemple colorfield="checkboxListeImaginaire" signifie qu'on va trier sur la base de la liste Listeimaginaire, et que cette liste est utilisé en tant que checkbox (cases à cocher) dans le formulaire. Pour une liste utilisée en tant que liste déroulante, on aurait écrit colorfield="listeListeImaginaire". Pour une carte qui affiche les résultats de plusieurs formulaires, il faut indiquer colorfield="id_typeannonce"
color fait la corrélation entre la valeur du champ et la couleur associée ex : color="darkgreen=Dir, pink=Secr" ... Attention : nombre de couleurs limitées pour carto ('red', 'darkred', 'lightred', 'orange', 'beige', 'green', 'darkgreen', 'lightgreen', 'blue', 'darkblue', 'lightblue', 'purple', 'darkpurple', 'pink', 'cadetblue', 'white', 'gray', 'lightgray', 'black') pour les agendas et les listes, possibilité d'utiliser les code hexadécimaux.
iconfield Définis le champ (souvent une liste) qui détermine l'icône du point.
icon Soit le nom de l'icône (ex: icon="glyphicon glyphicon-envelope") (voir la liste sur https://getbootstrap.com/docs/3.3/components/ ), soit utilise le paramètre "iconfield" pour faire la corrélation entre la valeur du champ et l'icône (ex : icon="plane=Dir, pencil=Secr")
smallmarker par défaut sur 0 si 1 met des petits marqueurs sur la carte plutôt que les gros
barregestion "true" or "false" : si présent (defaut), ajout des liens vers la gestion de la fiche
lat Permet de préciser la latitude du point central de la carte affichée. Par défaut la carte est centrée sur le centre du monde.
lon Permet de préciser la longitude du point central de la carte affichée. Par défaut la carte est centrée sur le centre du monde.
zoom Permet de préciser le niveau de zoom : de 1 (plus éloigné) à 15 (plus proche), par défaut : 8.
width Permet de préciser la largeur de la carte affichée, exemple : 600px pour une largeur de 600 pixels.
height Permet de préciser la hauteur de la carte affichée, exemple : 400px pour une hauteur de 400 pixels.
spider Permet d'éclater un regroupement de points lorsque l'on clique dessus. true ou false (false par défaut)
cluster Regroupe les points par zone. true ou false (False par défaut)
navigation "true" (par défaut) ou "false". Fait apparaître le contrôle du zoom avec les 2 boutons + et -
zoommolette "true" or "false"
provider Le nom du fournisseur de fond de carte. ex: "OpenStreetMap", "OpenStreetMap.France", "OpenStreetMap.BlackAndWhite", "OpenTopoMap", "Thunderforest", "Thunderforest.Landscape", "Thunderforest.SpinalMap". La liste des providers
typecarto obsolète Type de carto google utilisé : ROADMAP ou SATELLITE ou HYBRID ou TERRAIN (TERRAIN par defaut).
stylenavigation obsolète "SMALL" ou "ZOOM_PAN" ou "ANDROID" ou "DEFAULT"
layercarto obsolète Permet de préciser le fond carto utilisé. layercarto="google" : fond google / layercarto="osm" : fond OpenStreetMap (défaut).
choixcarte obsolète "true" ou "false"
stylechoixcarte obsolète "HORIZONTAL_BAR" ou "DROPDOWN_MENU" ou "DEFAULT"
echelle obsolète "true" or "false"

Action bazarcartocoul


Cette page est obsolète, consultez la documentation de l'action "ActionBazarcarto".

Cette action permet d'afficher des fiches sur un fond cartographique avec des couleurs différentes en fonction d'une liste. Voir un exemple en suivant ce lien

Syntaxe
{{bazarcartocoul id="" lat="" lon="" zoom=""  typecarto="" width="" height="" champcoul="" query=""}}


Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
id id de la base de données à afficher, si vide toutes les bases de données sont affichées. Il est possible d'afficher sur une même carte plusieurs bases de données spécifiques en entrant leur id séparé par une virgule
lat Permet de préciser la latitude du point central de la carte affichée. Par défaut la carte est centrée sur le centre du monde.
lon Permet de préciser la longitude du point central de la carte affichée. Par défaut la carte est centrée sur le centre du monde.
zoom Permet de préciser le niveau de zoom : de 1 (plus éloigné) à 15 (plus proche), par défaut : 8.
typecarto Type de carto google utilisé : ROADMAP ou SATELLITE ou HYBRID ou TERRAIN (TERRAIN par defaut).
width Permet de préciser la largeur de la carte affichée, exemple : 600px pour une largeur de 600 pixels.
height Permet de préciser la hauteur de la carte affichée, exemple : 400px pour une hauteur de 400 pixels.
spider Permet d'éclater un regroupement de points lorsque l'on clique dessus. True ou False (false par défaut)
layercarto Permet de préciser le fond carto utilisé. layercarto="google" : fond google / layercarto="osm" : fond OpenStreetMap (défaut).
champcoul Définis la liste qui détermine la couleur du point. (Par défaut 'ListeCouleur')
query permet de n'afficher qu'une partie de la base de données en fonction d'un tri sur un champ voir la doc query


Questions pour Florian

je vois dans carte oasis ces paramètres
  • colorfield="listeListetype"
    • je suppose que c'est champcoul ?? faut mettre colorfield ou champcoul ??
  • color="orange = 1, green = 2, red= 3, blue= 4, purple = 5"
    • ce champ est nécessaire du coup ou pas ?
  • iconfield="listeListetype"
    • on peut l'indiquer dans la doc ou spécifique à oasis ?
  • icon="graine-d-oasis = 1, oasis-ressource = 2, oasis-de-vie = 3, ecosite-sacre = 4"
    • on peut l'indiquer dans la doc ou spécifique à oasis ? et si oui c'est quoi le fonctionnement ?

j'ai aussi retrouvé ça ailleurs dans la doc....
iconprefix => prefixe des classes CSS utilisées pour icones dans les marqueurs de la carte ex fa fa- ou glyphicon glyphicon-
iconfield => désigne le champ utilisé pour les icones des marqueurs ex : checkboxListeProf
icon => fait la corélation entre la valeur du champ et l'icone associée ex : markericon="plane=Dir, pencil=Secr"
colorfield => désigne le champ utilisé pour les couleurs des marqueurs ex : checkboxListeProf
color => fait la corélation entre la valeur du champ et la couleur associée ex : markercolor="darkgreen=Dir, pink=Secr" (nombre de couleurs limitées pour carto ('red', 'darkred', 'lightred', 'orange', 'beige', 'green', 'darkgreen', 'lightgreen', 'blue', 'darkblue', 'lightblue', 'purple', 'darkpurple', 'pink', 'cadetblue', 'white', 'gray', 'lightgray', 'black') pour les agenda et liste, possibilité d'utiliser les code hexa
smallmarker => pour bazarcarto par défaut sur 0 si 1 met des petits marqueurs sur la carte plutôt que les gros

Action {{bazarliste}}

Cette action vous permet d'affiche le contenu d'une base de données (ou seulement une partie) sur une des pages du wiki et cela sous différentes formes suivant le template choisi (simple liste, liste déroulante, annuaire, liens...)

Syntaxe : {{bazarliste id="1"}}

Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
  • Des paramètres supplémentaires pour le filtrage : voir BazarFacette
nom du paramètre valeurs du paramètre
id id de la base de données à afficher, si vide toutes les bases de données sont affichées. Il est possible d'afficher plusieurs bases de données d'un coup en entrant leur id séparé par une virgule. Avant, le paramètre s'appelait idtypeannonce qui marche encore, mais id, plus court, est recommandé.
nb Indique le nombre limite de résultats a afficher, par ex. nb="12" pour afficher les 12 derniers. Par défaut : pas de limite
pagination Indique le nombre de fiches présentes par page avant pagination, par ex pagination="10". Par défaut : pas de pagination
ordre Permet d'afficher la liste par ordre croissant ou décroissant. Par défaut : rangé par ordre croissant (asc) sinon mettre "desc" pour l'ordre décroissant
champ Permet de choisir le champ utilisé pour le tri. Par défaut : tri sur le champ titre (bf_titre). Par date par ex : champ="date_creation_fiche" ou date_maj_fiche
query permet d'afficher une partie seulement de la base de données sur base d'un tri Voir le détail de la syntaxe
template Indique le look pour l'affichage des fiches. Par défaut : en accordéon. voir ci-dessous pour un aperçu des templates disponibles
iconfield On indique soit la liste, soit idtypeannonce qui doit servir à déterminer les différentes icons
icon Nom de l'icon (par ex glyphicon glyphicon-plane)="valeur de la liste ou id du formulaire"
colorfield On indique soit la liste, soit idtypeannonce qui doit déterminer les différentes couleurs
color Nom de la couleur (par ex red ou #ff3333)="valeur de la liste ou id du formulaire"
colorfield="id_typeannonce" color="green=28, blue=29, red=30, #ffffff=28"
period n'affiche que les résultats dont la fiche est plus récente que la date donnée. Exemple: period="2020-12-31" ; à partir de Doryphore 2021-02-04-2
redirecturl permet de rediriger sur une page voulue lors de la validation du formulaire redirecturl="une url complète (pas juste une page wiki)"
random permet de mélanger les fiches pour les afficher dans un ordre aléatoire. Exemple: random="1"
user n'affiche que les résultats dont l'utilisateur donnée est le propriétaire ; vide par défaut. Exemple: user="Wikiadmin ; à partir de Doryphore 2021-02-04-2
filteruserasowner n'affiche que les résultats dont l'utilisateur courant est le propriétaire ; faux par défaut. Exemple: filteruserasowner="true" ; à partir de Doryphore 2021-02-04-2
search permet d'afficher une barre de recherche en haut de l'affichage des résultats. Exemple: search="true" ; faux par défaut
shownumentries affiche le nombre de résultats trouvés en en-tête. Exemple : shownumentries="true" ; faux par défaut
barregestion affiche la barre de gestion en bas de chaque fiche. Exemple : barregestion="false" ; true par défaut

A savoir : appeler sur son wiki les fiches d'un autre wiki

{{bazarlisteexterne id="" url="urlduwiki"}}


Il est maintenant possible d'utiliser l'action bazarliste pour afficher les données distantes. Tout est décrit dans cette documentation.

Les templates disponibles sous yeswiki

ATTENTION: certains ne sont pas fourni par défaut avec yeswiki et doivent être téléchargés

20 item(s) corresponding to your filters
Fourni par défaut ou pas
Accordéon

Accordéon

Affiche sous forme de fiches à déplier/plier

annuaire_alphabetique.tpl.html

annuaire_alphabetique.tpl.html

permet de créer une liste de type annuaire classée par ordre alphabétique

blog.tpl.html

blog.tpl.html

Le template blog permet d'afficher des actualités :
- dernier aticle mis en avant
- affiche la date et l'auteur del'article sous le titre
- le résumé affiché est un champ "bf_chapo" - car on ne voulait pas avoir une description tronquée

carousel.tpl.html

carousel.tpl.html

Ce template permet de faire un slider pour faire défiler des images automatiquement. Souvent utiliser en pageheader.
Tous les champs sont cachés si pas remplis sauf image bien sûr et bf_titre (champ obligatoire)
Cela dit on peut cacher aussi le bf_titre via un paramètre (voir ci-dessous)

compteur.tpl.html

compteur.tpl.html

ce template permet d'afficher la somme du champ bf_nombre

damier.tpl.html

damier.tpl.html

Affiche toutes les fiches d'un formulaire sur la même page sous la forme d'un damier de cases alternativement blanches et de couleur (la couleur est définie par le paramètre couleur).
L'affichage des fiches peut être
précédé de texte (contenu dans une page appelée via le paramètre pageDessus),
et/ou suivi de texte (contenu dans une page appelée via le paramètre pageDessous).
Pour chaque fiche sont affichés les champs :

  • bf_titre
  • bf_debut
  • bf_fin
  • bf_lieu
  • bf_image
  • bf_description
Et un bouton, permet de pointer vers l'adresse contenue dans bf_lien.
Le libellé du bouton provient du champ bf_bouton. Le bouton renvoie,
  • soit vers l'adresse contenue dans le champ bf_lien s'il est renseigné,
  • si bf_lien est vide, le bouton permet de télécharger le fichier indiqué par bf_fichier.
Si, ni lien, ni fichier ne sont renseignés, aucun bouton ne s'affiche.
Certaines fiches peuvent être mises en exergue. On utilise pour cela la valeur du champ bf_exergue. Les fiches mises en exergue seront celles dont ce champ porte la valeur précisée par le paramètre valeurexergue.

galerie_photos.tpl.html

galerie_photos.tpl.html

ce template permet d'afficher une galerie de photos "classique" en 6 colonnes avec la photo et le titre par dessous.

liste_fiches_horscarte.tpl.html

liste_fiches_horscarte.tpl.html

ce template permet de récupérer sour forme de liste les titres des fiches (avec une carte cartogoogle) pour lesquelles les utilisateurs ont oubliés de cliquer sur le bouton "placer le point sur la carte".

liste_galerie.tpl.html

liste_galerie.tpl.html

Ce template permet d'afficher une galerie photo en deux colonnes. Celle de gauche reprend en mini vignettes toutes les photos disponibles et sur celle de droite, une vue agrandie de la photo sélectionnée dans la partie gauche.

liste_liens.tpl.html

liste_liens.tpl.html

affiche les liens vers les fiches sous forme de liste à puces

liste_liens_date.tpl.html

liste_liens_date.tpl.html

affiche une liste de liens pointant vers les fiches

liste_mails_seuls.tpl.html

liste_mails_seuls.tpl.html

Ce template permet de récupérer sour forme de liste les emails d'un formulaire afin de pouvoir facilement les copier-coller dans un webmail.

mails_maj.tpl.html

mails_maj.tpl.html

Ce template affiche les fiches non mises à jour depuis x jours (180 par défaut, paramètre : nbjour="x") et d'envoyer un mail paramétrable aux contacts des fiches.

map.tpl.html

map.tpl.html

Cette action permet d'afficher le contenu d'une base de données (on parlera de fiches) sur un fond cartographique. Il faut bien entendu que ces fiches comportent une adresse postale !

material-card.tpl.html

material-card.tpl.html

présentation sous forme de vignettes graphiques souvent utilisées pour réaliser des annuaires visuels (si l'image n'est pas fournie une image par défaut est générée)

photo-oxygen.tpl.html

photo-oxygen.tpl.html

Galerie photo avec un joli effet zoom et rotation au survol de l'image
L'auteur est affiché au survol ainsi qu'une loupe pour affichage plein écran

photobox.tpl.html

photobox.tpl.html

permet de créer une sorte de galerie photos qui peut s'ouvrir en pleine page

semi-ouvert.tpl.html

semi-ouvert.tpl.html

ce template affiche sous forme de liste des "blocs" le contenu du formulaire avec une image à gauche et des champs (bf-titre et ... ) à droite + télécharger fichier, lien vers url et bouton en savoir plus pour ouvrir la fiche complètement (tous les champs de ce template sont cachés s'ils ne contiennent pas de données / ou image par défaut).

timeline.tpl.html

timeline.tpl.html

affiche les fiches sous forme de ligne du temps

trombinoscope.tpl.html

trombinoscope.tpl.html

affiche uniquement les fiches qui ont une image sous forme de bloc. Il est donc parfois nécessaire de rendre le champ image obligatoire sinon certaines fiches n'apparaitront pas.

Action {{bazarliste}} : afficher les données d'autres YesWiki


L'action {{bazarliste}} permet d'afficher les données des formulaires. Il est possible d'afficher les données d'autres YesWiki en même temps que les données locales.
Cette fiche de documentation correspond à une action en cours de développement uniquement utilisable avec la version doryphore à partir de 2021-05-12.

Il est possible d'afficher les données d'un autre site YesWiki.

1. Mettre à jour le YesWiki et le distant pour avoir la version Doryphore après 2021-05-12-24
2. Définir l'action
{{bazarliste id="1" template="map" ...}}
pour correspondre au besoin (documentation ou utiliser le bouton composants lors de la modification d'une page)
3. Identifier l'adresse des YesWiki distants et les formulaires recherchés. Ex:
https://www.example.com/?PagePrincipale
formulaire 4 et
https://www.example.com/trombi2/?PagePrincipale
formulaire 5
5. remplacer pour l'action bazarliste id par
id="1,https://www.example.com/?PagePrincipale|4,https://www.example.com/trombi2/?PagePrincipale|5,6"

6. Sauver la page et enjoy

Explications:
  • chaque formulaire est séparé par une virgule
  • un formulaire local est uniquement représenté par un nombre. Dans l'exemple, nous avons les formulaires 1 et 6
  • un formulaire distant est représenté par son url suivi de `|` suivi du numéro de son formulaire. Dans l'exemple, nous avons deux formulaires distants.
  • S'il faut plusieurs formulaires distants d'un même YesWiki, il faut à chaque fois répéter l'url devant `|`

Rafraichir les données locales:

Il y a un système de cache des requêtes externes dont la durée est paramètrable par les variables baz_external_service_time_cache_for_entries et baz_external_service_time_cache_for_forms (voir config.yaml). Pour forcer un rafraîchissement des données, il faut être connecter et ajouter à la fin de l'url :
&refresh=1


Pour aller plus loin, pour les personnes connaissant les fields:
  • pour configurer l'affichage des données sur le site local, il faut plutôt créer un formulaire qui ressemble au formulaire distant (même nom de champs) mais avec vos adaptations
  • noter le numéro de ce formulaire en local (A pour l'exemple)
  • noter le numéro du formulaire distant (B pour l'exemple)
  • entrer dans id ceci
    id="http://www.exemple.com/?PagePincipale|B->A"
    
  • Tout se joue avec l'association de B vers A.

Pour lier à un template custom fiche-x.tpl.html:
x étant le numéro du formulaire local concerné
  • 1. dupliquer le formulaire distant sur le YesWiki local en utilisant la fonctionnalité d'importation disponible en bas de la page BazaR
  • 2. copier le fichier fiche-x.tpl.html dans le dossier local custom/templates/bazar/ avec le nom fiche-y.tpl.html où y est le numéro du formulaire dupliqué en local
  • 3. modifier le formulaire y en local en mode code en remplaçant, z étant le numéro du formulaire distant
    • liste***...***...*** *** ***...
      
      par
      externalselectlistfield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***liste***...
      
    • listefiche***...***...*** *** ***...
      
      par
      externalselectentryfield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***listefiche***...
      
    • listefiches***...***...*** *** ***...
      
      par
      externallinkedentryfield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***listefiches***...
      
    • listefichesliees***...***...*** *** ***...
      
      par
      externallinkedentryfield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***listefichesliees***...
      
    • checkbox***...***...*** *** ***...
      
      par
      externalcheckboxlistfield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***checkbox***...
      
    • checkboxfiche***...***...*** *** ***...
      
      par
      externalcheckboxentryfield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***checkboxfiche***...
      
    • radio***...***...*** *** ***...
      
      par
      externalradiolistfield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***radio***...
      
    • tags***...***...*** *** ***...
      
      par
      externaltagsfield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***tags***...
      
    • fichier***...***...*** *** ***...
      
      par
      externalfilefield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***fichier***...
      
    • image***...***...*** *** ***...
      
      par
      externalimagefield***...***...*** https://www.example.com/?BazaR/json&demand=forms&id=y***image***...
      

Dans l'exemple:
  • le formulaire concerné est
    https://www.example.com|z
    
  • la formule entrée dans le paramètre id de
    {{bazarliste id="}}
    est
    https://www.example.com|z->y
    


Si dans votre formulaire local vous voulez un comportement correct pour les liens, inspirez-vous des externalfields, comme par exemple :
  • pour les urls vers les fiches
    $fiche['url']
    
  • pour les urls vers les fiches avec un handler
    $fiche['url'] . '/pdf'
    
  • pour savoir si la fiche est externe
    isset($fiche['external-data'])
    
  • pour avoir l'url de base du site distant pour les fiches externes
    $fiche['external-data']['baseUrl']
    

Selon sa propre mise en page (avancé)

Doc en cours d'écriture

Il est possible de faire des templates spécifiques pour chaque formulaire et ainsi faire apparaître selon votre propre mise en page les infos contenues (ou une partie seulement) dans ces formulaires.

Pour ce faire il faut créer un fichier nommé fiche-id.tpl.html et le placer dans /themes/tools/bazar/templates (ID étant ici l'id du formulaire en question)
Avec la version Doryphore, les templates personnalisés seront chargés prioritairement depuis lerépertoire custom/templates/bazar/templates.
ATTENTION, ce faisant toutes les fiches possedant cet ID de formulaire seront avec le look personnalisé plutot que le look proposé par défaut... pour pouvoir réutiliser les templates, il faut enlever fiche-id.tpl.html (ou le renommer avec un .old)

Il vous reste ensuite à éditer ce fichier et à construire votre mise en page. (code html / css...)

La syntaxe est la suivante :

vous pouvez utiliser
<h2><?php echo $fiche['bf_titre']; ?></h2>
ici la mise en page se fait avec les balises html et un echo classique

<?php show($fiche["bf_champ"], â??Label du champs', 'classe CSS du paragraphe', â??balise HTML du paragraphe'); ?>
Les 3 champs sont facultatifs.
  • show($fiche : valeur brute telle qu'on la voit avec /raw (par ex si c'est une liste, il va chercher la valeur et pas ce qu'on voit nécessairement à l'écran)
  • un exemple : <?php show($fiche["bf_nomduchamp"], '', '', 'h5'); ?>

show($html["bf_champ"], â??Label du champs', 'classe CSS du paragraphe', â??balise HTML du paragraphe'); ?>
- show($html = montre la valeur contenue dans le champ mise en forme
  • exemple = <?php show($fiche["bf_telephone1"] . ' / ' . $fiche["bf_telephone2"], 'Téléphone(s) :'); ?>
  • principalement utilisé pour afficher le contenu de liste ou checkbox (<?php show($html["checkboxListeTheme"], '', ''); ?>)

Il est aussi possible d'affiche le contenu de formulaires liés

Il est possible d'appeler des formulaires liés en utilisant cette syntaxe
<?php echo $GLOBALS['wiki']->Format(
    '{{bazarliste idtypeannonce=«ID du formulaire lié" query=« listeficheID du formulaire de départ=' . $fiche['id_fiche'] . â??«  template="nom du template"}}'
); ?>

par exemple :
<?php echo $GLOBALS['wiki']->Format(
        '{{bazarliste idtypeannonce="6" query="listefiche7=' . $fiche['id_fiche'] . '"}}'
    ); ?>

  • Attention parfois c'est listefiche parfois checkboxfiche
  • Attention, il faut bien que les deux formulaires bazar soient bien liés.
  • Si les deux formulaires ne sont pas liés clairement (ou uniquement dans un sens), il faut alors aller voir dans /raw et voir comment le champ est renommé par yeswiki. Ce sera listeficheid ou checkboxficheid et utiliser la syntaxe : <?php show($html["checkboxfiche2"]); ?>

un 1er exemple complet

<?php
$imgwidth = 320;
$imgheight = 240;
?>
<?php
if ($_GET['wiki'] == $fiche['id_fiche']): ?>
    <h3>
    <a href="wakka.php?wiki=AnnuaireS">Répertoire des structures
    </a> </h3>
    <?php
endif; ?>
<?php
if (isset($fiche['imagebf_image']) && $fiche['imagebf_image'] != ''): ?>
    <img class="pull-left img-rounded img-profil" style="margin-right:20px;margin-bottom:20px;" alt="<?php
        echo htmlentities($fiche['bf_titre']); ?>" src="<?php
        echo redimensionner_image(
            'files/' . $fiche['imagebf_image'],
            'cache/image_' . $imgwidth . 'x' . $imgheight . '_' . $fiche['imagebf_image'],
            $imgwidth,
            $imgheight,
            'crop'
        ); ?>">
    <?php echo $html['imagebf_image']; ?>
    <?php
endif; ?>
<h2><?php echo $fiche['bf_titre']; ?></h2>
<?php show($fiche["bf_acronyme"], '', '', 'h5'); ?>
<?php if (!empty($fiche["bf_site_internet"] )) show('<a href="' . $fiche["bf_site_internet"] . '">' . $fiche["bf_site_internet"] . '</a>', ''); ?>
<?php show($fiche["bf_telephone1"] . ' / ' . $fiche["bf_telephone2"], 'Téléphone(s) :'); ?>
<?php show($fiche["bf_fax"], '', 'fax'); ?>
<?php show($html["bf_mail"] . ' / ' . $html['bf_mail_sec'], 'Mail(s) :'); ?>
<?php show($html["checkboxListeInfos"], 'Particularité : ', ''); ?>
<div class="clearfix"></div>
<div class="well">
  <?php echo $GLOBALS['wiki']->Format($fiche["bf_description_longue"]); ?>
</div>
<div class="row">
  <div class="col-md-6 span6">
    <h4>Centres d'intérêt</h4>
    <?php show($html["checkboxListeTheme"], '', ''); ?>
    <h4>Activités proposées</h4>
    <?php show($html["checkboxListeActivite"], '', ''); ?>
    <h4>Public cible</h4>
    <?php show($html["checkboxListePublic"], '', ''); ?>
  </div>
  <div class="col-md-6 span6">
    <h4>Matériel disponible en prêt</h4>
    <?php show($html["checkboxListeMatos"], 'Matériels de base :', ''); ?>
    <?php show($html["checkboxListeMatospro"], 'Matériels professionnel :', ''); ?>
    <?php show($html["checkboxListeInfrastructure"], 'Infrastructure :', ''); ?>
  </div> </div>
  <hr>
  <h3>Coordonnées</h3>
  <?php echo $fiche["bf_adresse"]; ?><br>
  <?php echo $fiche["bf_code_postal"]; ?> -
  <?php echo $fiche["bf_ville"]; ?><br>
  <?php show($fiche["bf_capcacite"], 'Capacité  :'); ?>
  <?php show($fiche["bf_horaire"], 'Horaire :'); ?>
  <h3>Liste des personnes liées :</h3>
  <?php echo $GLOBALS['wiki']->Format(
    '{{bazarliste idtypeannonce="6" query="listefiche7=' . $fiche['id_fiche'] . '"}}'
); ?>
<?php
 if ($fiche['checkboxListeIndic'] == '1') :   ?>
 <div class="pull-right">
  <h4>A voir aussi sur</h4>
 <A HREF="http://www.inforjeunestournai.be/" target="blank"> <img class="img-responsive" src="files/logo-wape.jpg"></A>
</div>
<?php endif; ?>
  <br>Pour éditer cette fiche, double cliquer sur cette phrase.



Autre exemple complet – Un template qui n'affiche les informations que pour les membres du groupe @admins

<?php
if($GLOBALS['wiki']->UserIsAdmin()) {
	// on recupere les valeurs de la fiche
	$fichebazar['values'] = baz_valeurs_fiche($fiche['id_fiche']);
	// on recupere les infos liees à ce type de fiche
	$f = $fichebazar['values']['id_typeannonce'];
	$fichebazar['form'] =  baz_valeurs_formulaire($f);
	// on parcourt le tableau des valeurs pour les afficher
	for ($i = 0; $i < count($fichebazar['form']['template']); ++$i) {
		if (function_exists($fichebazar['form']['template'][$i][0])) {
			echo $fichebazar['form']['template'][$i][0](
				 $formtemplate,
				 $fichebazar['form']['template'][$i],
				 'html',
				 $fichebazar['values']
			);
		}
	}
} else {
    echo 'Votre inscription est bien prise en compte, elle n\'est visible que par les admins';
}
?>
démo de l'action

animation

Permet de créer des sections de texte sur lequel vous pourrez appliquer des effets
Comportements
La bibliothèque animation permet d'ajouter des animations sur des parties choisies (titres, images ou texte) au sein des class avec différents styles que vous pouvez découvrir sur animate.css.


Ces class peuvent s'appliquer aux éléments suivants :
  • L'action {{attach}} notamment quand elle sert à insérer une image dans votre page
  • L'action {{section}} grâce à laquelle, tout élément de votre page pourra clignoter, rebondir, s'envoler...
et autres endroits où on peut mettre des champs class...

Exemple :
  1. Ajoutez : { {section class="wow slideInRight" data="wow-iteration=3"} }, ce qui donnera le comportement du texte "exemple" quand vous êtes arrivé
  2. la partie à animer doit être fermée par { {end elem="section"} }
Explication :
  • class="wow slideInRight" => l'effet choisi fait apparaitre le texte entre { {section} } et { {end elem="section"} } par glissement depuis la droite de l'écran
  • data="wow-iteration=3" => ici, effet slideInRight répété trois fois

pour comprendre les éléments que vous pourrez activer :
  • class="wow => puis le nom de l'effet que vous trouverez sur animate.css"
vous pourrez ensuite ajouter :
  • data="
    • wow-iteration=le nb d'itération souhaitée,
    • wow-length=la durée en seconde de l'effet (ex : 2s),
    • wow-offset=délais de l'animation quand l'élément apparaît à l'écran,
    • wow-delay=délais de l'animation quand la page est chargée en seconde"
image oiseau.png (0.2MB)

annuaire_alphabetique.tpl.html

Ce template est fourni avec un yeswiki de base oui il est fourni par défaut
annuairealphabetiquetplhtml_capture-décran-2018-12-08-à-12.27.09.png
Présentation rapide permet de créer une liste de type annuaire classée par ordre alphabétique
Informations importantes à propos de ce template il faut au moins un bf_titre
Lien vers un wiki où le template est visible https://co-construire.be/wakka.php?wiki=InscritS
Lien vers le wiki démo où le template est visible http://yeswiki.net/cercopitheque/demo/?AnnuaireAlpha
Mot clés documentation

{{ariane}}

Ajoute un fil d'ariane basé sur la navigation de l'internaute (affiche l'historique des ses pages consultées sous forme de fil d'ariane)
Comportements
ajoute un filtre d'ariane reprenant l'historique des pages visitées
  • permet de revenir en arrière
syntaxe minimale : {{ariane}}
syntaxe complexe : {{ariane nb="6"}}

Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
nb nb de sous menu exploré" par défaut 4

  • Attention : plutôt à placer dans le squelette de votre theme par ex juste au dessus de {WIKINI_PAGE}
Cette action donne :

Astuces pour des mises en page qui déchirent

Petit préambule : plusieurs astuces permettent de jouer très fortement sur les apparences de vos pages.
Ceci dit, si vous n'avez aucune capacité graphique, il y a de forte chance pour que votre page soit à l'image de vos compétences...


D'abord, pensez à illustrer


Les actions qu'il vous faut

  • Background image permet de créer des aplats de couleur ou des images en fond de texte.
  • Avec nav vous aurez un menu de type navigation supplémentaire au sein de votre page
  • Comme son nom l'indique button transforme vos liens en boutons multicolores auxquels vous pourrez rajouter des icônesd
  • Accordion permettra d'activer des parties de texte sous un accordéon
  • Grid et col et le colonage de votre page n'aura plus de mystère
  • Tocjs ajoutera automatiquement un sommaire qui reprendra vos titres ; ce sommaire suivra la page lors du scroll

Bootstrap quand tu nous tiens


Bootstrap est une bibliothèque qui permet de préfigurer des mises en forme, des styles

sur le site de bootstrap, il est possible de récupérer des éléments de style qui donneront des looks à toute une série de composants. Il suffit de copier le code des éléments proposés, d'ajouter deux guillemets devant et derrière et le tour est joué. Ainsi :

<div class="alert alert-danger" role="alert">joli texte entouré de rouge</div>
donne

Et là, il suffit de cliquer sur la petite croix pour supprimer ce cadre...


Et avec une pincée d'html

Un code en html entouré de deux guillemets sera interprété
<span style="color:red;">texte coloré</span>
et donnera texte coloré
Sur internet vous trouverez une foule d'exemples à copier pour améliorer vos pages

Et autres librairies

L'action {{animation}} placée en haut de votre page ou de votre site permettra de solliciter des animations que vous trouverez documentés ici (en anglais) mais aussi de jouer sur la durée, le délais, la répétition de vos animations !!! Attention le kitch n'est pas loin, à utiliser avec parcimonie et légèreté
Ces class peuvent s'appliquer aux éléments suivants :
  • L'action {{backgroundimage}} qui permet de mettre des images de fond ou des aplats de couleur
  • L'action {{attach}} notamment quand elle sert à insérer une image dans votre page
  • L'action {{ section }} grâce à laquelle, tout élément de votre page pourra clignoter, rebondir, s'envoler...
et autres endroits où on peut mettre des class...

ainsi,
class="wow slideInRight" data="wow-delay=3s, wow-iteration=3"
donnera le comportement de cette ligne...
démo de l'action

{{attach}}

Permet de lier un fichier à une page, de téléverser (uploader) ce fichier et de télécharger ce fichier.
L'usage de cette action est simplifiée par le bouton "joindre / insérer un fichier" dans la barre de menu.
Comportements
Affiche un lien de téléchargement de fichier
  • Si le fichier est une image, elle est affichée dans la page.
  • Lorsque le fichier est sur le serveur, il est possible de faire une mise à jour de celui-ci.
syntaxe minimale : {{attach file="lolo.jpg" desc="lolo"}}
syntaxe complexe : {{attach file="lolo.jpg" desc="image lolo.jpg (0.3MB)" size="medium" class="left medium" legend="le texte de la légende" link="https://yeswiki.net/wakka.php?wiki=AccueiL"}}

Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
file nom du fichier tel qu'il sera dans le wiki (attention a conserver la meme extension que pour le fichier original). pas d'url (voir {{player}}). Il est possible d'afficher le fichier d'une autre page ex: 'NomAutrePage/NomFichier.ext'
desc Texte du lien pour télécharger le fichier ou contenu du parametre alt pour une image.
caption Uniquement pour une image, texte au survol de celle-ci.
legend Uniquement pour une image, texte en dessous de celle-ci.
link Lien vers lequel renvoie l'image
nofullimagelink Uniquement pour une image, Pas de lien pour afficher l'image en grand quand on clique dessus: nofullimagelink="1"
class Ajoute une classe CSS à la balise figure entourant l'image / lightshadow, left / right / center, whiteborder, zoom, img-rounded, mg-circle, img-thumbnail
size small, medium, large ou original. Définis la taille de l'image par rapports aux paramètres
small: largeur de 140px, hauteur de 97px ; medium: largeur de 300px, hauteur de 209px ; large: largeur de 780px, hauteur de 544
La largeur peut aussi être réglé finement grâce au paramètre "width" ci-dessous)
width Largeur de l'image en pixels. Ex: width="400"
height Hauteur de l'image en pixels. Ex: height="300"
displaypdf Permet d'afficher le fichier si c'est un pdf. Ex: displaypdf="1". Dans ce cas, class="left" ou "right" permet de définir la position du PDF, et les autres paramètres de l'action PDF sont utilisables


Ouvrir le lien d'une image dans une fenêtre modale
/!\ class="modalbox" ne fonctionne pas avec les images car les classes css s'appliquent ici a l'image et non au lien
Une méthode de substitution existe via du code html : <a href="monlien.fr" class="modalbox" title="Titre de la modale">{{attach file="monimage.jpg" desc="imagetest" data-size="modal-lg" size="original" class="center" nofullimagelink="1"}} </a>

nofullimagelink="1" évite qu'il y ai un lien vers l'image en plus grand (comme on rajoute un lien par dessus, on ne peut pas avoir un lien dans un lien)

data-size="modal-lg" fait une modale plus large que celle de base

Exemple :

Mettre une image, (un bandeau) en entête ou un applat de couleur


passez votre PageHeader en mode édition, vous devez voir un code du style
{{section bgcolor="var(--neutral-color);" class="cover white text-center"}}
======Description de mon wiki======
Double cliquer ici pour changer le texte et l'image de fond.
{{end elem="section"}}

  • Pour ajouter une image au bandeau, ajouter file="bandeau.jpg" sauver, puis charger votre bandeau préalablement préparé : cette image devra avoir comme taille 1920 X 300 et 90 dpi de résolution
  • Vous souhaitez que le texte soit foncé : enlever le white dans class="white ..."
  • Vous souhaitez que le texte soit centré ou à gauche : remplacer text-right par text-center ou text-left
  • Vous souhaitez un aplat d'une autre couleur : supprimer file="bandeau.jpeg" et remplacer dans bgcolor="var(--neutral-color)" par un code couleur :

En résumé :
{{section bgcolor="#990066" class="cover text-center"}}
======Description de mon wiki======
Double cliquer ici pour changer le texte et l'image de fond.
{{end elem="section"}}

donne

Description de mon wiki

Double cliquer ici pour changer le texte et l'image de fond.
et
{{section file="bandeau.jpg" class="cover white text-center"}}
======Description de mon wiki======
Double cliquer ici pour changer le texte et l'image de fond.
{{end elem="section"}}

donne

Description de mon wiki

Double cliquer ici pour changer le texte et l'image de fond.


Une petite Bandothèque au cas où...


Pour télécharger un bandeau, cliquez dessus puis clic droit/enregistrer sous (ou pomme clic sous apple).
Pour en fabriquer, elles doivent faire 1920 X 250 px et avoir une résolution de 72 dpi.
image horizon.jpg (86.6kB)
image Puzzle.jpg (0.1MB)
image spiral.jpg (0.3MB)
image vache.jpg (90.6kB)
image vague.jpg (0.1MB)
image ville.jpg (0.2MB)
image etoile.jpg (0.2MB)
image route.jpg (0.3MB)
image citron.jpg (0.2MB)
image bois.jpg (0.2MB)
image bandeauboatseattle.png (0.2MB) CC-BY-SA NicolasGeiger
image couleur.jpg (45.7kB)
image fenetre.jpg (0.3MB)
image vitre.jpg (0.1MB)
image faience.jpg (0.4MB)
image champ.jpg (0.1MB)
image grille.jpg (0.2MB)
image homme.jpg (80.1kB)
image bandeau.jpg (0.1MB)
image foule.jpg (0.2MB)
image toto.jpeg (0.2MB)

Afficher le contenu d'une base de données

démo de l'action bazar
Il est possible d'afficher le contenu d'une base de données sous différentes formes :

Sous forme de carte

image affichage_carto1.png (0.4MB)
  • Affichage multicouches sur une carto Bazar. Où comment afficher potentiellement sur une carte : un fond de carte Openstreetmap + des données statiques Geojson + des tuiles dynamiques + bien sûr vos données de formulaire

Actions dépréciées
Veuillez utiliser l'action {{bazarcarto}}.

Sous forme de trombinoscope

image affichage_trombi1.png (0.3MB)

Avec un système de recherche (facette)

image facette.png (0.6MB)
Des paramètres supplémentaires pour le filtrage

Permettre la saisie de données dans un formulaire


image formulaire_structure1.png (38.9kB)
Voilà à quoi ressemble un formulaire (cliquez pour afficher cette image en plein écran)

Permet d'afficher un formulaire de saisie afin d'ajouter des données. La syntaxe est à placer sur la page où l'on souhaite faire apparaître le formulaire de saisie
Syntaxe minimale : {{bazar voirmenu="0" vue="saisir" id=" "}}

Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
id Id du formulaire dans lequel on souhaite ajouter des données
vue valeur à indiquer = saisir
redirecturl Page vers laquelle on souhaite renvoyer l'utilsateur lorsqu'il fait valider = une url complète
voirmenu si valeur=0 n'affiche pas le menu complet si valeur=1 affiche tout le menu / si ce paramètre n'est pas indiqué, le menu est affiché par défaut


Voilà à quoi ça ressemble (cliquez sur l'image pour la voir en plein écran) :
image formulaire_evenement1.png (40.1kB)
image formulaire_phototeque1.png (29.8kB)

Affichage cartographique multicouches


Où comment afficher potentiellement sur une carte :
  • un fond de carte Openstreetmap
  • + des données statiques Geojson
  • + des tuiles dynamiques
  • + bien sûr vos données issues de vos formulaires

Prenons l'exemple d'une association qui souhaite faire apparaitre :
  • un fond de carte Openstreetmap
  • les délimités des régions françaises (fichier GeoJson)
  • tous les itinéraires cyclables pour se rencontrer (depuis un serveur de tuiles)
  • et enfin la localisation des membres de son réseau (depuis un formulaire Bazar)

Etape 1 : fabriquer son formulaire


Etape 2 : trouver des données cartographiques

  • des serveurs de tuiles (de cartes) pour faire apparaitre des cartes dynamiques provenant d'une source distante (par exemple des serveurs de tuiles openstreetmap sur différents sujets)

  • des données au format Geojson : ce sont des données statiques que l'on peut obtenir de différentes façons : un tableur CSV avec des données lat/lon, un fichier opendata, une extraction de données openstreetmap, etc.
    • Une fois récupéré le fichier GeoJson, l'ouvrir avec un éditeur de texte.
    • Copier le code complet.
    • Coller les data GeoJson dans une page du Wiki dédiée (que vous appellerez ensuite avec le handler "/raw" comme dans l'exemple ci-après.)
Il arrive souvent qu'en sauvant la page yeswiki indique une erreur
Query failed: INSERT INTO yeswiki__pages SET tag ....... (Data too long for column 'body' at row 1)

2 solutions pour remedier à ce problème :
- soit modifier le type de champ body dans phpmyadmin pour longtext
- soit transférer votre fichier geojson par ftp dans votre dossier files par exemple et adapter le paramètre URL du layer en remplacant par le nompage/raw par l'adresse complete du fichier https://yeswiki.net/files/departement.geojson
layers="Dpt|GeoJson|color:'#17B0CF'|https://infopublic71.xyz/files/departement.geojson"


Etape 3 : visualiser les résultats sur carte
  • Choisir la page ou créer une page où seront affichés les résultats.
  • Insérez l'action Bazar Carto ([ActionBazarcarto voir documentation]) en utilisant le code suivant. Exemple ici avec :
    • 1 layer tiles Waymarkedtrails un serveur qui montre les grandes voies cyclables en France
    • 1 layer geojson avec contours de certaines régions de France (issu de OSM boundaries) copié/collé dans la page BacASableGeoJson1


{{Bazarcarto id="1" layers="Waymarkedtrails|Tiles|https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png,Régions|GeoJson|wakka.php?wiki=BacASableGeoJson1/raw" }}




  • * "layers" : une liste de layers (couches).
Pour comprendre les termes du code :
  • * format pour chaque layer : NOM|TYPE|URL ou NOM|TYPE|OPTIONS|URL
  • * - OPTIONS: facultatif ex: "color:red; opacity:0.3"
  • * nota bene: le séparateur d'options est le ';' et pas la ',' qui est déjà utilisée pour séparer les LAYERS.
  • * - TYPE: Tiles ou GeoJson
  • * - URL: Attention au Blocage d?une requête multi-origines (Cross-Origin Request).

Votre layer est bien présent mais il faut l'activer en cliquant sur le bouton multicouche de votre carte.
Voici un template custom qui permet d'ajouter un paramètre visiblebydefault et d'activer le layer directement
layers="Dpt|GeoJson|color:'#17B0CF';visiblebydefault|https://infopublic71.xyz/files/departement.geojson"

Création d'un formulaire de saisie

La page base de données est installée par défaut et se trouve dans la roue crantée en haut à droite
Première étape :
  • Se connecter avec un compte administrateur. Puis se rendre sur le menu Base de données.
image formulaire.png (0.1MB)
Vous devez vous identifier comme admin
  • Pour accéder un menu de création du formulaire, il faut cliquer sur l'onglet "Formulaires".
    image formulaire.png (0.1MB)
    Cliquer sur formulaire

3 façons de créer un formulaire

Méthode 1 :
L'importer depuis un autre wiki

en cliquant simplement sur le lien formulaire :
image Capture_du_20160405_091317.png (0.1MB)
Importer les formulaires d'un autre yeswiki
Méthode 2 :
Partir d'un modèle par copier coller

en cliquant sur formulaire puis créer un nouveau formulaire :
image tuto_formulaire.png (85.4kB)
Créer un nouveau formulaire
Méthode 3 :
Le créer soi-même

en cliquant sur formulaire puis créer un nouveau formulaire :
image tuto_formulaire.png (85.4kB)
Créer un nouveau formulaire

Facette : un module de recherche dans bazar


Facette est une interface graphique qui permet d'interroger une base de données sur base de critères prédéfinis (via des listes, des radio ou des checkbox)
Facette s'active TOUT SEUL quand l'action {{bazarliste}} s'accompagne du paramètre groups
Par défaut toutes les fiches sont affichées.

{{bazarliste id=" " groups="Nomduneliste,duchamp"  titles="titredelaliste, duchamp" pagination="15" template="nomdutemplate.tpl.html"}}

image Capture_decran_20160405_a_105411.png (0.1MB)
Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
id Id du formulaire dans lequel il faut faire la recherche
groups On place les champs du formulaire sur lesquels on veut permettre la recherche, séparés par des virgules (les champs) / si c'est un liste, indiquer listeListeNomdelaliste / si c'est un radio, indiquer radioListeNomdelaliste / si c'est un checkbox, indiquer checkboxListeNomdelaliste / si c'est un champ, indiquer bf_nomduchamp /si c'est une liste qui est formé par le contenu d'un autre formulaire, indiquer listefiche+id de l'autre formulaire / si c'est un checkbox qui est formé par le contenu d'un autre formulaire, indiquer checkboxfiche+id de l'autre formulaire
Si le but de la recherche est de choisir parmi plusieurs formulaires affichés, utiliser groups="id_typeannonce"
groupsexpanded true ou false permet de plier ou pas par défaut les champs de recherche.
titles on place dans le même ordre que dans "groups" le nom des champs de recherche
groupicons une liste de class css pour mettre des icônes aux intitulés des groupes, juste à gauche des valeurs indiquées dans titles. ex: groupicons="glyphicon glyphicon-plane,glyphicon glyphicon-home"
filterposition Pour aligner l'encadré de filtre à droite /par défaut/ ou à gauche (filterposition="left") des fiches bazar
filtercolsize Pour choisir la largeur des encadrés "filtres". Chiffre entre 1 et 12. Ex : filtercolsize="12" et filterposition="left" placera les filtres au-dessus des résultats et sur toute la largeur
template Nom du template à utiliser / par défaut bazarliste / Attention tous les templates ne fonctionnent pas avec facette / Si on souhaite un rendu cartographique : map.tpl.html
pagination Nombre de fiches qu'on veut voir par page
height Hauteur en pixels
zoom Niveau de zoom quand on utilise un rendu cartographique
lat Latitude pour centrer la carte quand on utilise un rendu cartographique
long Longitude pour centrer la carte quand on utilise un rendu cartographique

Des exemples ?

En combinant champ mot clé et critères prédéfinis

Il est possible de combiner une recherche par mot clé libre et des critères prédéfinis.
image Capture_decran_20160405_a_105411.png (0.1MB)
{{bazar id="" vue="consulter" voirmenu="0" groups="Nomduneliste,duchamp"  titles="titredelaliste, duchamp" pagination="15" template="nomdutemplate.html.tpl"}}

Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
id Id du formulaire dans lequel il faut faire la recherche
groups On place les champs du formulaire sur lesquels on veut permettre la recherche séparés par des virgules / si c'est un liste, indiquer listeListeNomdelaliste / si c'est un radio, indiquer radioListeNomdelaliste / si c'est un checkbox, indiquer checkboxListeNomdelaliste / si c'est un champ, indiquer bf_nomduchamp /si c'est une liste qui est formé par le contenu d'un autre formulaire, indiquer listefiche+id de l'autre formulaire / si c'est un checkbox qui est formé par le contenu d'un autre formulaire, indiquer checkboxfiche+id de l'autre formulaire
Si le but de la recherche est de choisir parmi plusieurs formulaires affichés, utiliser groups="id_typeannonce"
groupsexpanded true ou false permet de plier ou pas par défaut les champs de recherche.
titles on place dans le même ordre que dans "groups" le nom des champs de recherche
template Nom du template à utiliser / par défaut bazarliste / Attention tous les templates ne fonctionnent pas avec facette / Si on souhaite un rendu cartographique : map.tpl.html
pagination Nombre de fiches qu'on veut voir par page
height Hauteur en pixels
zoom Niveau de zoom quand on utilise un rendu cartographique
lat Latitude pour centrer la carte quand on utilise un rendu cartographique
long Longitude pour centrer la carte quand on utilise un rendu cartographique

Importer/exporter depuis/vers bazar


Il est possible
  • d'importer des données externes (d'un tableur par exemple) dans un formulaire bazar
  • d'exporter des données d'un formulaire bazar pour les utiliser ensuite dans un tableur classique

Étapes pour importer des données

  • se connecter au wiki (il faut être parmi les administrateurs pour pouvoir importer des données)
  • se rendre sur la page permettant la gestion des formulaires (elle contient l'action{{bazar}})
  • cliquer sur le bouton importer
  • choisir parmi les formulaires celui dans lequel on souhaite importer des données
image importbazzar1.png (34.6kB)
  • le wiki fournit alors diverses infos sur la structure du fichier nécessaire pour permettre un bonne importation
  • le wiki fournit un fichier type vide au format CSV comme exemple (on peut le remplir et se servir de celui-ci ensuite)
image importbazarnext1.png (55.1kB)
  • une fois que l'on a préparé son fichier d'importation selon les consignes données
  • on choisit son fichier à importer
  • on clique sur le bouton Importer le fichier`
  • une étape de contrôle / validation est proposée
  • si tout s'est bien passé on reçoit un message

Étapes pour exporter des données

  • se connecter au wiki (il faut être parmi les administrateurs pour pouvoir importer des données)
  • se rendre sur la page permettant la gestion des formulaires (elle contient l'action{{bazar}})
  • cliquer sur le bouton exporter
  • choisir parmi les formulaires celui que l'on souhaite exporter
image bazarexport1.png (34.6kB)
  • le wiki génère un fichier CSV à télécharger
image bazarexportnext1.png (26.6kB)

Quoi faire avec mon fichier CVS ? Un CSV peut s'ouvrir avec Excel, Open Office, Google Doc ... en précisant simplement que le caractère d'espacement est une virgule.

Afficher les fiches YesWiki sur une carte de type umap


Il existe un tutoriel suivant : BazarAfficherSurCarteUMAP pour afficher les fiches YesWiki sur une carte de type umap.

Rechercher dans la base de données

Il existe plusieurs façons de permettre une recherche par les utilisateurs dans la base de données.

Par mots-clés libres

Il est possible d'afficher TOUT le contenu d'une des base de données avec un champ de recherche par mot clé


image Capture_decran_20160405_a_103557.png (73.4kB)

Par critères prédéfinis

Facette est une interface graphique qui permet d'interroger une base de données sur base de critères prédéfinis (via des listes ou des checkbox)

image Capture_decran_20160405_a_103643.png (0.2MB)

En combinant mots-clés et critères

Il est possible de combiner recherche par mot clé ET recherche par critères prédéfinis.

image Capture_decran_20160405_a_103643.png (0.2MB)

Créer un widget carto avec bazar

L'outil Widget permet d'afficher les contenus venant d'un formulaire bazar sous forme :
  • d'une fenêtre dans la page de votre wiki
  • d'une fenêtre dans n'importe quel site web autre (dans Wordpress, Spip, Joomla, etc.)

Nous nous intéressons ici à la création de cartes issues de formulaires bazar. (Voir page ActionBazarcarto pour en savoir plus sur l'affichage carte)

Voici par exemple le widget issu du bazar des personnes ressources YesWiki

Créer facilement des cartes


Vous avez besoin de créer des cartes pour :
  • montrer les membres de votre réseau,
  • faire une carte des adhérents,
  • partager vos initiatives, projets
  • faire une carte pour un événement, un colloque, un festival
  • inventorier des éléments du patrimoine, l'accessibilité de lieux,
  • etc...

Vous pouvez utiliser yeswiki pour :
  • fabriquer des cartes thématiques pour afficher dans votre wiki
  • utiliser yeswiki comme cartothèque, c'est à dire un lieu central pour créer des cartes à la volée et les afficher dans n'importe quel site web via un code embed

Etape 1 : rendez-vous sur la page Bazar de votre wiki

  • choisissez le formulaire que vous voulez afficher sous forme de cartes.
  • cliquez sur le bouton Widget
image Capture_bazar.png (13.1kB)



Etape 2 : Sur la page widget

  • Type de Visualisation : par défaut vos données s'affichent sous forme d'accordéon. Choisissez cartes avec fiches entières
  • Options de la carte : Choisir un fond de carte en fonction de ses besoins : topographie, délimités communaux, noir et blanc ou couleur, etc. (Voir la liste des fournisseurs de cartes)
image pagewidgetcarto.png (0.5MB)


















Etape 3 : Sélection des couches Facettes

  • Sélectionnez les couches Facettes que vous voulez voir apparaitre
  • Attention : pour l'instant le widget carto ne gère pas de couleurs différentes en fonction des couches facettes. Donc tous les points sont affichés avec le style par défaut. Mais ça viendra !
image widgetcartofacette.png (15.1kB)











Etape 4 : choix code d'intégration

Avant la création du code final vous pouvez aussi :
  • ajuster la taille des marqueurs
  • définir des coordonnées
  • définir la taille d'affichage du widget carto

Une fois tout paramétré vous avez deux codes à copier/coller à votre disposition :
  • le premier un iframe à installer dans votre site web (voir intégration iframe en fonction de votre CMS wordpress, spip, joomla, etc)
  • le second c'est l'action Bazar à intégrer dans la page de votre choix de votre wiki


image widgetembed.png (90.8kB)


Alternative, utiliser gogocarto


{{bazarliste id="2" template="gogomap.tpl.html" width="100%" height="600px" groups="checkboxListeCategories" titles="Mes catégories" colorfield="checkboxListeCategories" color="#98A100= market, #1E8065= organic" iconfield="checkboxListeCategories" icon="leaf=market,cogs=organic"  iconprefix="fa fa-"}}


image Capture_dcran_de_20191021_122151.png (0.1MB)

Pour les icones, j'ai utilisé la librairie fontawesome, vous pouvez trouver des icones ici : https://fontawesome.com/icons?d=gallery&m=free

Toute la configuration de gogocarto n'est pas disponible via des paramètres de bazarliste. A la place, vous pouvez donner un fichier de configuration en utilisant "jsonconfurl"
{{bazarliste id="2" template="gogomap.tpl.html" jsonconfurl="https://pixelhumain.github.io/GoGoCartoJs/web/data/configuration-pwa.json"}}


Voir tout la configuration possible sur https://pixelhumain.github.io/GoGoCartoJs/docs/configuration.html

blog.tpl.html

Ce template est fourni avec un yeswiki de base non il doit être téléchargé
blogtplhtml_capture-blog.png
Présentation rapide Le template blog permet d'afficher des actualités :
- dernier aticle mis en avant
- affiche la date et l'auteur del'article sous le titre
- le résumé affiché est un champ "bf_chapo" - car on ne voulait pas avoir une description tronquée
Détails des différents paramètres spécifiques à ce template pas de paramètres, pas de variantes
Lien vers les fichiers à télécharger si besoin https://github.com/YesWiki/templates-bazar/blob/master/templates/blog.tpl.html
Informations importantes à propos de ce template dans le template ci-dessous, les lignes "labelhtml" sont facultatives. Elles ont été ajoutées pour permettre la mise en forme de l'article complet lorsqu'on clique sur "Plus d'infos".
Lien vers un wiki où le template est visible https://adrets-asso.fr/?Blog
Lien vers le wiki démo où le template est visible http://yeswiki.net/cercopitheque/demo/?BloG
Code source du formulaire qui a servi pour cet exemple
labelhtml*** *** ***<div class=" sans-titre">
texte***bf_titre***Titre de l'article de blog***255***255*** *** *** ***1***0***
labelhtml*** *** ***</div>
labelhtml*** *** ***<div class="row">  <div class="col-md-3 text-center">
jour***bf_date_article***Date de l'article***1*** *** *** *** ***1***0
labelhtml*** *** ***</div> <div class="col-md-3 text-center">
listefiche***3***Auteur*** *** *** *** *** ***0***0***
labelhtml*** *** ***</div></div>
labelhtml*** *** ***<div class=" sans-titre">
labelhtml*** *** ***<div class="row">  <div class="col-md-4 text-center">
image***bf_image***Image de présentation (350x150px)***350***150***350***150***right***1***0***Votre image doit être au format .jpg ou .gif ou .png en de taille 350x150px
labelhtml*** *** ***</div>  <div class="col-md-8 lead  ">
textelong***bf_chapo***Chapo de l'article***40***10*** *** *** ***0
labelhtml*** *** ***</b></i></div>  </div>
textelong***bf_description***Corps de l'article***40***10*** *** *** ***0
labelhtml*** *** ***</div>
lien_internet***bf_video***Lien vers une vidéo***40***255***http://*** *** ***0***0
lien_internet***bf_site_internet***Lien Internet***40***255***http://*** *** ***0***0
fichier***bf_fichier***Document joint***20000000*** *** *** *** ***0*** ***ne pas dépasser 20 Mo
Mot clés documentation

{{button}}

démo de l'action
Un joli bouton cliquables pour vos liens
Comportements
permet d'ajouter un bouton de différentes couleurs, tailles...

syntaxe minimale : {{button link="http://lolo.lol"}}
syntaxe complexe : {{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" icon="book" class="btn-primary"}}

Moi je voudrais...

Pour créer un bouton, il vous suffit d'utiliser le code suivant, en inscrivant derrière "link" le lien de la page vers lequel mène votre bouton, et derrière "text" le texte que vous voulez voir apparaître dans votre bouton.

{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site"}}

Pour ajouter un icone, nous allons ajouter dans le code du bouton le paramètre correspondant en ajoutant icon="nom de mon icone". Cela donnera par exemple pour un icone de livre :

{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" icon="book"}}

Pour retrouver le nom des différents icones disponibles, il vous suffit d'aller voir sur l'un de ces deux liens :

Nous allons pour cela ajouter un paramètre dans le code du bouton en ajoutant class="Ma classe". Pour un bouton prenant toute la page, cela donnera :
{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" class="btn-block"}}

Il existe plusieurs paramètres possibles en fonction de la taille désirée, du plus petit au plus grand :
  • btn-xs | très petit
  • btn-sm | moyen
  • btn-lg | grand
  • btn-block | pour avoir le bouton en pleine largeur
/!\ Si vous utilisez d'autres options faisant appel au paramètre "class", il vous faudra mettre un espace entre les différentes informations de class.


Nous allons pour cela utiliser un nouveau paramètre : le "nobtn" qui permet de ne pas afficher les bords et la couleur du bouton. Cela permettra d'utiliser des boutons transparents qui donneront l'illusion de menus classiques. En les combinant au paramètre "icon" (voir plus haut), le tour sera joué.

Il suffira donc de remplacer les liens des menus par des boutons de ce type:
{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" icon="book" nobtn="1"}}


Nous allons pour cela ajouter un paramètre dans le code du bouton en ajoutant class="Ma classe". Pour un bouton prenant toute la page, cela donnera :
{{button link="http://lolo.lol" text="cliquez ici pour aller sur le site" class="btn-success"}}

Il existe de nombreux paramètres possibles en fonction de la couleur souhaitée, celle-ci dépendra de votre thème, le mieux sera de les tester :
  • btn-success
  • btn-primary
  • btn-info
  • btn-warning
  • btn-danger
  • btn-inverse


/!\ Si vous utilisez d'autres options faisant appel au paramètre "class", il vous faudra mettre un espace entre les différentes informations de class.

Une page de démo très complète est accessible via ce lien : https://yeswiki.net/?DemoButton




Paramètres utilisables
  • les paramètres en gras sont obligatoires
  • un paramètre se déclare de la manière suivante nomduparametre="valeurduparametre"
nom du paramètre valeurs du paramètre
link nom de la page wiki ou url
text texte affiché sur le bouton
title texte affiché au survol du bouton
icon nom de l'icone sur boostrat https://getbootstrap.com/docs/3.3/components
nobtn si la valeur est à " 1", alors la mise en forme type "bouton" n'apparaît pas
class Aller piocher dans la page de demo les valeurs disponibles
hideifnoaccess valeur "true" permet de cacher le bouton si l'utilisateur n'a pas les droits d'accès à la page cible (uniquement version Doryphore)


Visualisation :
cliquez ici pour aller sur le site
Pour inclure un petit bouton "important" ou "info"
Important et Info
""<span class="label label-important">Important</span>"" et ""<span class="label label-info">Info</span>""

Pour inclure un bouton cliquable Plus d'infos sur les boutons = http://yeswiki.net/wakka.php?wiki=DocButton
découvrez le crie de mouscron
version wiki (donc sans ""  "") copier coller ceci : {{button class="btn btn-danger" link="lienverspage" icon="plus icon-white" text="votre texte"}}

Pour un bouton cliquable qui ouvre dans une autre fenêtre
""<a href="votrelien" target="_blank" class="btn btn-primary btn-large">votre texte</a>""
un bouton vert ? remplacer btn btn-danger par btn btn-success
un bouton orange ? remplacer btn btn-danger par btn btn-warning,
un bouton bleu ? remplacer btn btn-danger par btn btn-info

Et pour cacher un bouton ?
Parfois on souhaite simplement cacher un bouton (pour pouvoir ensuite le rendre visible très rapidement, sans avoir à retaper tout le code....)
Il suffit d'ajouter une classe "hide" dans le code en première position :
Pour reprendre l'exemple ci dessus
  • Bouton caché :
version wiki (donc sans ""  "") copier coller ceci : {{button class= "hide" "btn btn-danger" link="http://www.criemouscron.be" icon="plus icon-white" text="découvrez le crie de mouscron"}}


Cacher en fonction des droits de l'utilisateur [Disponible en version Doryphore]
ne pas afficher un lien vers une page pour lesquelles on a pas les droits
paramètre : hideifnoaccess="true"

carousel.tpl.html

Ce template est fourni avec un yeswiki de base oui il est fourni par défaut
carouseltplhtml_capture-décran-2018-12-09-à-17.18.13.png
Présentation rapide Ce template permet de faire un slider pour faire défiler des images automatiquement. Souvent utiliser en pageheader.
Tous les champs sont cachés si pas remplis sauf image bien sûr et bf_titre (champ obligatoire)
Cela dit on peut cacher aussi le bf_titre via un paramètre (voir ci-dessous)
Détails des différents paramètres spécifiques à ce template
  • sanstitre="oui" permet de cacher le titre de la fiche (bf_titre)
  • avecpage="oui" permet d'afficher un contenu fixe en superposition du slider
  • en activant le paramètre avecpage="oui" - un lien apparaitra sur votre slider pour vous éditer la page de contenu fixe "Éditer PageDessusSlider?"
L'option est visible sur ce wiki ...https://www.pnth-terreenaction.org
Lien vers un wiki où le template est visible https://yeswiki.net
Lien vers le wiki démo où le template est visible http://yeswiki.net/cercopitheque/demo/?CarouseL
Mot clés documentation

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) : bf_contact (sans accents, tout attaché)
    • Nous vous conseillons de garder les intitulés proposés. Si vous les changez, cela pourra poser des problèmes dans les modes de restitutions
    • Si vous utilisez un autre champ de ce type dans le même formulaire, l'identifiant du champ 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 : * (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.
  13. Droits d'accès à la saisie du champ. (quasi générique) Même fonctionnement que pour les 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 bf_titre est obligatoire!!

Pour aller plus loin
Il est possible de générer ce champ bf_titre 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 bf_titre 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 bf_adresse1 (ou bf_adresse2) et/ou bf_ville et/ou bf_pays 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).
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)

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***



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).
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)

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 :
image champliste1.png (8.4kB)



Exemple de syntaxe à copier/coller :
radio***ListeFormations***Type de formation*** ***1*** *** *** ***1***1***

  1. Type de champ : radio
  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 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 : non renseigné.
  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).
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)

Affichage dans le formulaire de saisie :
image champradio.png (6.7kB)


texte***bf_tel***Téléphone***10***20*** *** *** *** ***0


texte***bf_contact***Contact***15***15*** *** *** ***1***0*** ***

Explication :
  1. Type de champ : texte
  2. Identifiant du champ : bf_contact (sans accents, tout attaché)
  3. Intitulé affiché : Contact
  4. Taille à l'écran : 15 caractères
  5. Nombre de caractère max : 15 caractères
  6. Valeur par défaut : ici non renseigné, si texte alors il sera proposé par défaut
  7. Non-utilisé
  8. Non-utilisé
  9. Saisie obligatoire : 1 (oui) 0 ou vide (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).

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
*bf_date_fin_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 précédent.

Dans ces 2 exemples (avec une liste et un checkbox), 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 -->*** ***


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_form, listeListeCompetence...) et bien le noter
4. Trouver la clé associée à l'entrée voulue :
  • pour les listes ou les checkbox : dans la page BazaR concernant les listes, consulter la liste concernée et noter la clé associée à la valeur retenue
  • pour les formulaires : noter le nom de la fiche associée (id_fiche)
5. revenir dans la modification du formualaire, 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_nom" ordre="desc"
  • nombre de fiche : nombre maximum de fiche à afficher - peut rester vide
  • template de restitution : liste_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"

Changer les polices du wiki

Il est possible de changer les polices par défaut utilisées dans le wiki afin de lui donner une touche plus personnelle.
  • La première méthode (la propre) consiste à travailler directement dans le fichier css de votre wiki. Cela nécessite toutefois d'avoir accès au serveur sur lequel se trouve ce fichier css. Ceci n'est malheureusement pas à la portée de tous (techniquement ou pratiquement).
  • Il existe une deuxième méthode, moins propre, qui permet en déposant un bout de code html dans la page footer de votre wiki de "passer au-dessus" des polices fournies par défaut avec Yeswiki.

A défaut de mieux pour l'instant :

Voici une méthode s'appuyant sur google fonts

  • rendez vous sur google fonts et faites un choix parmi les polices proposées (max 3 pour éviter l'effet "arbre de Noël sur votre wiki)
    • chaque fois que vous voyez une police qui vous plait, vous cliquer sur le + rouge
    • une fois votre choix effectué, vous récupérer le code fourni par google en bas de page
    • ça devrait ressembler à ceci
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Roboto" rel="stylesheet">
et ceci fourni pour exemple
font-family: 'Gloria Hallelujah', cursive;
    font-family: 'Roboto', sans-serif;


Rendez vous maintenant dans votre PageFooter pour y coller ce code
""<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Roboto" rel="stylesheet">""

et ensuite celui-ci que vous adaptez en fonction de vos envies les titres et la police pour tout le document (body)
""<style>
h1 {
  font-size: 32px;
  font-family: 'Gloria Hallelujah', cursive;
  color:#7EB6D9;
}

h2 {
  font-size: 28px;
  font-family: 'Gloria Hallelujah', cursive;
  color:#707322;
}

h3 {
  font-size: 24px;
  font-family: 'Gloria Hallelujah', cursive;
  color:red;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

body {font-family: 'Roboto', sans-serif;}
</style>""


compteur.tpl.html

Ce template est fourni avec un yeswiki de base non il doit être téléchargé
compteurstplhtml_capture-décran-2018-12-06-à-12.56.26.png
Présentation rapide ce template permet d'afficher la somme du champ bf_nombre
Détails des différents paramètres spécifiques à ce template (si votre formulaire initial n'avait pas de champ bf_nombre, vous pouvez utiliser correspondance="bf_nombre=votre champ")
Lien vers les fichiers à télécharger si besoin https://github.com/YesWiki/templates-bazar
Informations importantes à propos de ce template Les champs nécessaires minimaux sont bf_nombre.
(si pas dans votre formulaire, utilisez correspondance="bf_nombre=votre champ").
Lien vers un wiki où le template est visible https://unarbrepourlawapi.be
Lien vers le wiki démo où le template est visible http://yeswiki.net/cercopitheque/demo/?CompteurS
Code source du formulaire qui a servi pour cet exemple
texte***bf_titre***Nom de l'événement***60***255*** *** *** ***1***0***
textelong***bf_description***Description***40***10*** *** *** *** 
textelong***bf_chapo***Chapo de l'article***40***10*** *** *** ***0
texte***bf_nombre***Nombre de participants***60***255*** *** *** ***0***0***
Ce texte n'apparait pas dans le formulaire
il est NECESSAIRE d'avoir les deux champs ci-dessous si on veut un affichage en calendrier
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
texte***bf_horaire***Horaire***60***255*** *** *** ***0***0***
jour***bf_date_debut_publication***Début de la publication***1*** ***  *** ***  ***1***0
jour***bf_date_fin_publication***Fin de la publication***1*** ***  *** ***  ***1***0
texte***bf_horaire***Horaire***60***255*** *** *** ***0***0***
lien_internet***bf_site_internet***Site Web***40***255***http://*** *** ***0***0
image***bf_image***Image (facultatif)***140***140***600***600***right*** *** ***Votre image doit être au format .jpg ou .gif ou .png
fichier***fichier***Documents***20000000*** *** *** *** ***0*** ***ne pas dépasser 20 Mo
texte***bf_adresse***Adresse***50***50*** *** *** ***0***0
texte***bf_code_postal***Code postal***8***8*** *** *** *** ***0
texte***bf_ville***Ville***50***80*** *** *** *** ***0
labelhtml***<span style="color:#cc3333;">Il faut maintenant cliquer sur le bouton bleu pour placer votre point sur la carte </span><br>*** ***
carte_google***bf_latitude***bf_longitude***cartogoogle***
labelhtml***<h3>Il ne vous reste plus qu'à valider ! </h3>*** ****** *** *** *** *** *** *** ***
Mot clés documentation

Créer une page de menu (gauche ou droite)

page inutile : voir plutôt DocumentationColonneMenu

damier.tpl.html

Ce template est fourni avec un yeswiki de base oui il est fourni par défaut
damiertplhtml2_capture-template-damier.png
Présentation rapide Affiche toutes les fiches d'un formulaire sur la même page sous la forme d'un damier de cases alternativement blanches et de couleur (la couleur est définie par le paramètre couleur).
L'affichage des fiches peut être
précédé de texte (contenu dans une page appelée via le paramètre pageDessus),
et/ou suivi de texte (contenu dans une page appelée via le paramètre pageDessous).
Pour chaque fiche sont affichés les champs :
  • bf_titre
  • bf_debut
  • bf_fin
  • bf_lieu
  • bf_image
  • bf_description
Et un bouton, permet de pointer vers l'adresse contenue dans bf_lien.
Le libellé du bouton provient du champ bf_bouton. Le bouton renvoie,
  • soit vers l'adresse contenue dans le champ bf_lien s'il est renseigné,
  • si bf_lien est vide, le bouton permet de télécharger le fichier indiqué par bf_fichier.
Si, ni lien, ni fichier ne sont renseignés, aucun bouton ne s'affiche.
Certaines fiches peuvent être mises en exergue. On utilise pour cela la valeur du champ bf_exergue. Les fiches mises en exergue seront celles dont ce champ porte la valeur précisée par le paramètre valeurexergue.
Détails des différents paramètres spécifiques à ce template Les paramètres peuvent être passés dans l'action bazar ou bazarliste, mais sont spécifiques à ce template.
Les paramètres génériques à tous les templates et particulièrement applicables avec le présent template sont rappelés à la fin.

pageDessus=NomWikiDeLaPage
  • S'il est rempli,
    • indique le nom Wiki d'une page du wiki qui apparaîtra au dessus des fiches.
  • S'il n'est pas rempli ou pas présent,
    • rien n'apparaîtra avant les fiches.
pageDessous=NomWikiDeLaPage
  • S'il est rempli,
    • indique le nom Wiki d'une page du wiki qui apparaîtra au dessous des fiches.
  • S'il n'est pas rempli ou pas présent,
    • rien n'apparaîtra après les fiches.
nbcol="4"
  • S'il est rempli,
    • permet de changer le nombre de fiches affichées sur une ligne.
  • S'il n'est pas rempli ou pas présent,
    • les fiches seront 4 par ligne.
ATTENTION -
1. Sur un écran de téléphone, une seule fiche sera affichée par ligne.
2. Sur un écran d'ordinateur, le nombre de colonnes sera le suivant :
  • si nbcol = 1, alors les fiches apparaîtront sur 1 colonne,
  • si nbcol = 2, alors les fiches apparaîtront sur 2 colonnes,
  • si nbcol = 3, alors les fiches apparaîtront sur 3 colonnes,
  • si nbcol = 4, alors les fiches apparaîtront sur 4 colonnes,
  • si nbcol = 5 ou 6, alors les fiches apparaîtront sur 6 colonnes,
  • si nbcol 7 ou plus, alors les fiches apparaîtront sur 12 colonnes.
ordreaffichage="image, titre, date, lieu, texte, bouton"
  • S'il est rempli,
    • permet de définir l'ordre d'affichage des informations de toute fiche.
  • S'il n'est pas rempli ou pas présent,
    • les informations de chaque fiche seront affichées dans l'ordre "image, titre, date, lieu, texte, bouton"
Pour afficher, par exemple, le titre, puis l'image, puis le bouton, puis le texte, il faut préciser, en séparant les mots par des virgules : ordreaffichage="titre, image, bouton, texte"
ATTENTION – Si une information est absente de la liste, par exemple, comme ci-dessus, ni date, ni lieu ne figurent, cette information ne sera pas affichée.
couleur="SeaGreen" ou couleur="#2E8B57"
  • S'il est rempli, indique la couleur utilisée (nom ou code de couleur HTML)
  • S'il n'est pas rempli ou pas présent, la couleur sera SeaGreen=#2E8B57.
urldebase="https://adresse.demon.site/?"
Permet de préciser l'adresse de base du wiki.
Ne pas oublier de mettre le "?" à la fin.
  • S'il n'est pas rempli ou pas présent,
    • les liens internes au Wiki ne fonctionneront pas.
valeurexergue="1"
  • S'il est rempli,
    • indique, la valeur du champ bf_exergue pour laquelle une fiche sera mise en $exergue. Autrement dit seront mises en exergue les fiches dont le champ bf_exergue porte la même valeur que le paramètre valeurexergue.
  • S'il n'est pas rempli ou pas présent,
    • aucune fiche ne sera mise en exergue.
ombreportee="oui"
  • S'il est rempli,
    • indique, si chaque fiche est présentée sans une ombre portée (non) ou avec (tous les autres cas). Si on choisit d'avoir une ombre portée, les coins des fiches sont également arrondis. Sinon, les fiches sont des rectangles.
  • S'il n'est pas rempli ou pas présent ou pas égal à "non",
    • il y a une ombre portée

Paramètres génériques à tous les templates et particulièrement applicables ici

correspondance
Permet, lorsque le nom de l'un ou plusieurs des champs de votre formulaire diffère(nt) de (bf_image, bf_bouton, bf_description, bf_exergue, bf_lien ou bf_fichier), de préciser le(s)quel(s) de vos champs utiliser.
Ex. : correspondance="bf_texte=bf_monchamp, bf_image=bf_photo_vacances"
champ
Permet de trier les fiches autrement que par ordre alphabétique des titres.
Ce paramètre permet de définir le champ de votre formulaire sur lequel s'effectuera le tri des fiches avant leur affichage.
Ex. : champ="bf_monchamp" *
ordre
Permet de trier les fiches autrement que par ordre alphabétique des titres.
Ce paramètre permet de changer l'odre de tri des fiches.
Par défaut, les fiches sont affichées dans l'ordre croissant des titres ou du champ défini par le paramètre champ.
On peut changer cet ordre et le rendre décroissant.
Ex. : ordre="desc"
Informations importantes à propos de ce template
Limitations sur ce template
Lien vers un wiki où le template est visible https://osons.cc/?PageEquipe
Code source du formulaire qui a servi pour cet exemple Exemple de formulaire :
texte***bf_titre...
image***bf_image...
jour***bf_debut... <= date et heure éventuelles de début de l'événement
jour***bf_fin... <= date et heure éventuelles de fin de l'événement
texte***bf_lieu
textelong***bf_description...
texte***bf_lien... <= lien à activer en cliquant sur le bouton
fichier***bf_fichier... <= fichier à télécharger cliquant sur le bouton
texte***bf_bouton... <= texte à afficher sur le bouton
texte***bf_exergue... <= détermine les fiches à mettre en exergue
Mot clés documentation

Action bouton

Affiche un lien sous forme de bouton cliquable, avec de nombreuses possibilités de personnalisation.


Note: même s'ils peuvent se ressembler en apparence label ("étiquette") et bouton ne sont pas la même chose. Un label est une mise en forme du texte.

Je suis un label Je suis un bouton
Réduite au minimmum, la syntaxe pour créer un bouton serait
{{button link="DocumentatioN" text="Je suis un bouton de test"}}
ce qui donne "seulement":
Je suis un bouton de test
C'est pourquoi on peut personnaliser l'apparence et le comportement des boutons.

Personnaliser l'apparence des boutons


Paramètre class

Précise la classe CSS utilisée pour l'apparence du bouton.
On peut combiner plusieurs classes en les mettant d'affilée avec un espace.

Classes de taille de boutons

{{button class="btn-success" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-success btn-lg" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-success btn-sm" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-success btn-xs" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation


Bouton sur toute la largeur
{{button class="btn-default btn-block" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

Classes de couleur de bouton

{{button class="btn-success" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-primary" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-info" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-warning" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-danger" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
{{button class="btn-inverse" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

Mettre un bouton à droite de la page

{{button class="pull-right btn-danger" link="DocumentatioN" text="Voir la documentation"}}

Voir la documentation

Paramètre icon

Rajoute une icône au début du bouton.
Voir liste disponible ici ( https://getbootstrap.com/docs/3.3/components/#glyphicons ) ou là ( https://icons.getbootstrap.com ). On en trouve également ici : https://fontawesome.com/v4.7.0/icons/ .
Il faudra enlever le 'icon-' devant le nom des icônes.

{{button icon="plane" link="http://fr.wikipedia.org/wiki/%C3%87a_plane_pour_moi" text="Ca plane pour moi!"}}
donne:
Ca plane pour moi!

Paramètre nobtn

si ce paramètre est égal à 1 , il n'y a pas de décoration type bouton autour, juste un lien avec une éventuelle icône
{{button nobtn="1" icon="book" link="DocumentatioN" text="Doc"}}
donne :
Doc

Paramétrer le comportement du bouton


Paramètre title

Ajoute un titre au survol d'un bouton. Dans le cas d'une fenêtre modale (voir ci-dessous "Fenêtres modales"), ce titre sert de titre de la fenêtre
{{button class="modalbox" icon="book" link="DocumentatioN" text="Doc" title="Voir la superbe documentation"}}
donne :
Doc

Ouvrir dans une nouvelle fenêtre à partir d'un bouton

Pour permettre l'ouverture dans une nouvelle page, il existe cette syntaxe wiki utilisant l'action button sinon vous pouvez bien sûr utiliser le code html suivant
{{button nobtn="1" class="new-window" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

Fenêtres modales

Une fenêtre modale est une fenêtre qui s'ouvre en "popup" au dessus de la page active. Ceci permet par exemple d'afficher du contenu venant d'ailleurs sans quitter la page sur laquelle on est.
ATTENTION :
  • les modales ne fonctionnent que si on demande l'affichage d'une page du wiki (les liens vers des pages extérieures ne fonctionnent pas)
  • si la page que vous affichez en modalbox contient un formulaire bazar en vue saisir, il ne pourra être validé.
Pour une fenêtre modale classique
{{button icon="book" class="btn-primary modalbox" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

Pour une fenêtre modale qui s'affiche au survol (et qui disparaît quand on retire la souris)
{{button icon="book" class="btn-primary modalbox-hover" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

Action grid et col

Une colonne de 2, une de 4, une de 6

{{grid}}
{{col size="2"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}} 
{{col size="4"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}} 
{{col size="6"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}}
{{end elem="grid"}}

donne
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
Texte de la colonne à remplacer par votre texte (ou votre image ou...)

Colonne de 4, une de 4, une de 4

{{grid}}
{{col size="4"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}} 
{{col size="4"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}} 
{{col size="4"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}}
{{end elem="grid"}}

donne
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
Texte de la colonne à remplacer par votre texte (ou votre image ou...)

Colonne de 3, une de 3, une de 3 et une de 3

{{grid}}
{{col size="3"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}} 
{{col size="3"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}} 
{{col size="3"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}}
{{col size="3"}}
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
{{end elem="col"}}
{{end elem="grid"}}

donne
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
Texte de la colonne à remplacer par votre texte (ou votre image ou...)
  • Cette page est migrée et découpée en bas de la page de documentation générale.
Ici : https://yeswiki.net/?DocumentatioN
  • DocumentatioN

Action {{button text="..." link="..."}}

Affiche un lien sous forme de bouton cliquable, avec de nombreuses possibilités de personnalisation.


Code minimal

{{button text="Voir la documentation" link="DocumentatioN"}}
donne:
Voir la documentation

Code toutes options

{{button link="DocumentatioN" class="btn-success btn-lg" icon="glyphicon glyphicon-book" text="Voir la documentation" title="Cliquer pour voir la doc"}}
donne:
Voir la documentation

Paramètres disponibles


Paramètre link (obligatoire)


Indique le lien qui sera ouvert au clic du bouton.
Peut être un NomWiki pour un lien interne au wiki ou une adresse url d'un site pour n'importe quel autre lien



Paramètre text


Texte à l'intérieur du bouton.



Paramètre class


Précise la classe CSS utilisée pour l'apparence du bouton.
On peut combiner plusieurs classes en les mettant d'affilée avec un espace.

Classes de taille de boutons
{{button class="btn-default btn-lg" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
{{button class="btn-default btn-sm" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
{{button class="btn-default btn-xs" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

Bouton sur toute la largeur
{{button class="btn-default btn-block" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
Classes de couleur de bouton
{{button class="btn-default" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
{{button class="btn-primary" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
{{button class="btn-info" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

{{button class="btn-success" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
{{button class="btn-warning" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation
{{button class="btn-danger" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation


Mettre un bouton à droite de la page:
""<div class="pull-right">""{{button class="btn-danger" link="DocumentatioN" text="Voir la documentation"}}""</div>""
ou
{{button class="pull-right btn-danger" link="DocumentatioN" text="Voir la documentation"}}
Voir la documentation



Paramètre icon


Rajoute une icône parmi celles disponibles ici : https://getbootstrap.com/docs/3.3/components/#glyphicons , placée devant le bouton. Il faudra enlever le 'icon-' devant le nom des icônes.
{{button class="btn-success" icon="glyphicon glyphicon-plane" link="https://fr.wikipedia.org/wiki/%C3%87a_plane_pour_moi" text="Ca plane pour moi!"}}
donne:
Ca plane pour moi!
{{button class="btn-danger" icon="glyphicon glyphicon-facetime-video" link="https://youtube.com" text="Aller sur youtube"}}
donne:
Aller sur youtube



Paramètre nobtn


si ce paramètre est égal à 1 , il n'y a pas de décoration type bouton autour, juste un lien avec une éventuelle icône
{{button nobtn="1" icon="glyphicon glyphicon-book" link="DocumentatioN" text="Doc"}}
donne :
Doc


Paramètre title


Ajoute un titre au survol d'un bouton. Dans le cas d'une fenêtre modale, ce titre sert de titre de la fenêtre
{{button class="modalbox" icon="glyphicon glyphicon-book" link="DocumentatioN" text="Doc" title="Voir la superbe documentation"}}
donne :
Doc


Fenêtres modales

Une fenêtre modale est une fenêtre qui s'ouvre en "popup" au dessus de la page active. Ceci permet par exemple d'afficher du contenu venant d'ailleurs sans quitter la page sur laquelle on est.
ATTENTION :
  • les modales ne fonctionnent que si on demande l'affichage d'une page du wiki (les liens vers des pages extérieures ne fonctionnent pas)
  • si la page que vous affichez en modalbox contient un formulaire bazar en vue saisir, il ne pourra être validé.
Pour une fenêtre modal classique
{{button icon="book" class="btn-primary modalbox" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation


Pour une fenêtre modale qui s'affiche au survol (et qui disparaît quand on retire la souris)
{{button icon="book" class="btn-primary modalbox-hover" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation


Pour une fenêtre modale qui s'affiche au survol d'un bouton "lien" (et qui disparaît quand on retire la souris)
{{button icon="book" class="btn btn-link btn-glossaire modalbox-hover" link="DocumentatioN" text="Voir la documentation"}}
donne :
Voir la documentation

Ouvrir dans une nouvelle fenêtre

Pour permettre l'ouverture dans une nouvelle page, il existe cette syntaxe wiki utilisant l'action button sinon vous pouvez bien sûr utiliser le code html suivant
{{button class="btn btn-link new-window " link="DocumentatioN" text="Voir la documentation"}}
donne
Voir la documentation
  • DocumentatioN

Captcha


L'extension captcha rajoute sur chaque page en mode édition, un champ captcha à compléter avant de valider la page.
Ceci permet de limiter le spam sur le wiki.

Statistique

Avec google stat

se connecter sur son compte google analytics
aller dans la roule crantée, créer un compte pui sremplir les infos demandées
  • nom du compte = ça vous décidez
  • nom du site web = ça vous décidez
  • URL du site Web : ça c'est l'url de votre wiki
cochez ce que vous souhaitez garder puis
  • => obtenir un ID de suivi

Récupérez le code global site tag et insérez le dans la page footer de votre wiki

A priori ça devrait compter les passants sur chacune des pages de votre wiki

Google Drive

Syntaxe Markdown


YesWiki dans sa version Doryphore intègre une bibliothèque Markdown.
Afin d'utiliser la syntaxe markdown vous devez utiliser les balises suivantes :
""<div class="markdown"> votre markdown ici </div>""


Mémo syntaxe Markdown


Markdown Rendu
Titre 1
# Titre 1
# Titre 1
Titre 2
## Titre 2
## Titre 2
Titre 3
### Titre 3
### Titre 3
Gras
Un peu de **texte en gras**
Un peu de **texte en gras**
Italique
Un peu de *texte en italique*
Un peu de *texte en gras*
Citation
> Laurent.
> YesWiki c'est génial?
> Les autres.
> C'est bon on a compris !!!!
> Laurent. > YesWiki c'est génial? > Les autres. > C'est bon on a compris !!!!
Liste
* Lait
* Oeuf
* Fromage
    * Fourme
    * Langres
* Jambon
* Lait * Oeuf * Fromage * Fourme * Langres * Jambon
Liste ordonnée
1. Introduction
2. Acte 1
3. Acte 2
    1. Scène 1
    2. Scène 2
4. Acte 3
1. Introduction 2. Acte 1 3. Acte 2 1. Scène 1 2. Scène 2 4. Acte 3
Code Source
Voilà du `JavaScript()`
Voilà du `JavaScript()`
Bloc de code
Voilà un peu de code en JavaScript :

```
function bonjour() {
    alert('Bonjour');
}
```

Le langage est normalement détecté automatiquement,
mais vous pouvez aussi le spécifier:

```sql
SELECT * FROM users;
DELETE FROM sessions;
```

Voilà un peu de code en JavaScript : ``` function bonjour() { alert('Bonjour'); } ``` Le langage est normalement détecté automatiquement, mais vous pouvez aussi le spécifier: ```sql SELECT * FROM users; DELETE FROM sessions; ```
Lien Hypertexte
Ceci est détecté comme un lien:

https://yeswiki.net

Et ceci est un lien avec un texte ancré :

[YesWiki](https://yeswiki.net)

Et ceci est un lien avec un texte ancré 
et un texte en survol :

[YesWiki](https://yeswiki.org "Page d'accueil de YesWiki")

Ceci est détecté comme un lien: https://yeswiki.net Et ceci est un lien avec un texte ancré : [YesWiki](https://yeswiki.net) Et ceci est un lien avec un texte ancré et un texte en survol : [YesWiki](https://yeswiki.org "Page d'accueil de YesWiki")
Images ![Icône YesWiki](https://frama.link/YesWiki)
![Icône YesWiki](https://frama.link/YesWiki)
Ligne Horizontale
Une ligne :
***
ou
Une autre ligne :
---
Une ligne : *** ou Une autre ligne : ---


Tableaux


Les tableaux sont créés en utilisant des pipes | et des traits d'union -.

Voici un tableau en Markdown :
|     Mardi     |    Mercredi   |
| ------------- | ------------- |
|    Laurent    |    Jérémie    |
|   Sébastian   |    Romain     |

Et voici le rendu :
| Mardi | Mercredi | | ------------- | ------------- | | Laurent | Jérémie | | Sébastian | Romain |


Notez qu'il faut au moins trois caractères de séparation dans chaque cellule titre.

La ligne 2 peut être utilisée pour aligner les colonnes:
| Ce Tableau     | Est              | Cool            |
| -------------- |:----------------:| ---------------:|
| col 3 est      | alignée à droite | Doryphore       |
| col 2 est      | centrée          | Cercopithèque   |

Et voici le rendu :
| Ce Tableau | Est | Cool | | -------------- |:----------------:| ---------------:| | col 3 est | alignée à droite | Doryphore | | col 2 est | centrée | Cercopithèque |

Query, un paramètre pour n'afficher qu'une partie de la base de données

Il est possible d'afficher seulement une partie des données présentes dans la base de données en utilisant le paramètre query.

Vous souhaitez :
  • trier sur base du contenu d'une (ou plusieurs) liste(s)
    • query="listeListeGenre=M|listeListeDep=26"
    • notez qu'il est possible de trier sur plusieurs valeurs au sein de la même query en séparant les valeurs par une virgule (sans espace)
    • Notez bien que la syntaxe est bien liste+Nomdelaliste=clé ou liste+Nomdelaliste=clé1,clé2 (dans votre liste, la clé n'est pas le texte mais bien l'identifiant que vous avez indiqué juste devant)
  • trier sur base du contenu d'une (ou plusieurs) checkbox(s)
    • query="checkboxListeGenre=M|checkboxListeDep=26"
    • Notez bien que la syntaxe est bien checkbox+Nomdelaliste=clé
  • trier sur base du contenu de boutons radios
    • query="radioListeGenre=M|radioListeDep=26"
    • Notez bien que la syntaxe est bien radio+Nomdelaliste=clé
  • trier sur base du contenu d'un champ (bf_...)
    • query="bf_titre=a.*" (affiche tous les titres commençant par a)
    • query="bf_titre=*.a" (affiche tous les titres finissant par a)
    • query="bf_titre=NomYeswiki (affiche la fiche dont le champ titre est NomYeswiki)
    • query="bf_titre=." (affiche toutes les fiches dont le champ "bf_titre" est vierge)
  • trier sur base d'une liste dynamique de type "checkboxfiche"
    • query="checkboxfiche<numeroduformulaireappelé>=Chat-Mot dufiltre"}}
    • Exemple :
      {{bazarliste id="2" query="checkboxfiche1=TesT"}}
      
      Cet exemple est un annuaire. Ici, on veut voir les personnes qui ont rempli l'annuaire (formulaire 2), en affichant uniquement les personnes qui appartiennent au groupe de travail "Test" (dont le ChatMot est TesT - donc à écrire exactement comme ça)


dupliquer une liste bazar

Info importante
Il est essentiel de veiller à bien respecter la clé sur laquelle vous souhaitez effectuer le tri.
Une majuscule manquante ou en trop, une faute de frappe et le tri ne sera pas effectif !!!
Lorsque cette clé vient d'une liste ou d'un checkbox, veillez à bien vérifier la valeur de votre clé en visitant dans l'action {{bazar}} l'onglet liste.
  • DocumentatioN

Action {{textsearch}}

Moteur de recherche interne aux page du wiki. Recherche en texte plein.


Exemple :





Cette action utilise la fonction d'indexation en texte intégral de MySQL et hérite de ses qualités et défauts :
  • la recherche est quasi instantanée
  • la recherche est limitée à des mots de 4 lettres au minimim
  • la recherche n'accepte pas de caractères génériques (ou caractères joker : ".*?", etc.)
  • la recherche n'est pas lématisée : MotWiki
    • la recherche de "protocole" ne trouvera pas "protocoles" ; fdfdf
    • la recherche de "lascif" ne trouvera pas "lascive"
  • la recherche n'est pas effectuée sur une partie de MotWiki : la recherche de "text" ne donnera pas ActionTextSearch pour résultat


  • DocumentatioN