Affichage des données enregistrées par un formulaire BreezingForms.

Voyons comment afficher les données, enregistrées par un formulaire BreezingForms, sur les pages frontend du site.

Niveau: Avancé
Prérequis: Installation de ContentBuilder
Version BF minimale requise: BreezingForms Lite

Je n'ai pas une connaissance très étendue de ContentBuilder, j'ai toutefois fait plusieurs tests afin de pouvoir vous proposer un pas à pas que j'espère cohérent et qui vous permettra d'aborder cette extension avec souplesse…

Préparatifs

Si vous ne possédez pas l'extension ContentBuilder de Crosstec, l'éditeur de BreezingForms, je vous invite à la télécharger. Elle est gratuite et illimitée.

Télécharger ContentBuilder

ContentBuilder est un composant de type CCK qui permet d'afficher des données, saisies à partir de son propre formulaire ou d'un formulaire BreezingForms, sur les pages de votre site et, par la même occasion, les rendre accessibles au public.

S'il a son propre formulaire, pourquoi diable devriez-vous dès lors utiliser BreezingForms ? Et bien tout simplement parce qu'il offre une flexibilité bien plus étendue que le simple formulaire de CB.

Avec l'installation de CB s'installent toute une série de plugins qui permettent d’interagir avec les données et, entre autre, les formater. Afficher une image en tant que telle p.ex. et en proposer l'ouverture dans une fenêtre pour un aperçu en taille réelle ou aux dimensions de votre navigateur si l'image est plus grande que votre moniteur.

Installation

Installez CB comme vous installez n'importe quelle autre extension, à partir du module d'installation des extensions de votre Joomla!

Après l'installation, le composant est disponible depuis le menu Composant de votre administration..

bf cb 01 tn

 

Mise en œuvre

Création du formulaire BreezingForms.

Pour ce pas à pas, je prendrais un exemple concret de listing de participants à une organisation de courses à pied proposant plusieurs distances. Nous y demandons le prénom et nom du coureur, sa date de naissance, adresse, téléphone, e-mail, numéro de licence et la distance qu'il souhaite parcourir.

J'ai donc créé un formulaire pour l'enregistrement de toutes ces données. Pour la création du formulaire, je présume que vous savez vous y prendre et en cas contraire, je vous invite à lire les autres tutoriels présent dans ces pages.

Après la création du formulaire, n'oubliez pas de l'enregistrer et de le tester pour vous assurer qu'il ne présente pas de lacune.

Création de la vue

ContentBuilder fonctionne à l'aide de Listes et de Vues (voire d'articles). Une Liste est un tableau qui affichera les données enregistrées souhaitées et autorisera éventuellement certaines actions telles la (dé)publication, la création d'une nouvelle entrée de données, l'édition des données déjà enregistrées, le tri selon les colonnes du tableaux, le filtrage des entrées, etc. Une vue, est un affichage de ces données sous forme d'"article" que vous pouvez formater à votre goût.

À l'aide du menu Composant → ContentBuilder (→ Views) vous affichez le composant. Si vous n'avez pas cliqué Views depuis le menu, faites-le maintenant depuis le menu de gauche afin d'afficher le module de création de vues.

bf cb 02 tnbf cb 03 tn

Cliquez le bouton Nouveau afin de créer une nouvelle vue. La fenêtre suivante vous affiche votre vue. Elle est vide et sans aucun paramètre.

bf cb 04 tn

Paramétrage de la vue

Paramétrez votre vue en lui donnant un nom, éventuellement un Tag (qui vous permettrait de filtrer vos vues plus tard), veillez à ce que le Type soit bien com_breezingforms et non com_contentbuilder. Cliquez ensuite sur le bouton Options avancées.

bf cb 05 tn

Dans les paramètres avancés, sélectionnez où vous souhaitez afficher cette vue, en Frontend, en Backend ou les deux. Votre choix dépendra des options futures à savoir, qui peut éditer ou pas les données. Dans cette présentation, j'opterai pour un affichage sur les deux parties pour pouvoir aussi bien intervenir en front qu'en backend pour d'éventuelles éditions.

Sélectionnez les colonnes par défaut que la vue affichera. Dans ce cas, je cocherai :

  1. Sélectionner
  2. Éditer
  3. Afficher le filtre (il ne s'agit pas d'une colonne mais du champs de recherche)
  4. Afficher la limite de liste (il ne s'agit pas d'une colonne mais du champs de sélection du nombre d'items à afficher avant de passer à une autre page).

Dans l'onglet Divers, je coche Correspondance exacte dans le filtre avant d'enregistrer une première fois la vue afin de la créer et de pouvoir continuer son paramétrage.

Après cet enregistrement, de nouvelles options apparaissent dont :

  1. Le choix du formulaire d'inscription aux courses
  2. Le type d'édition
  3. Notification par e-mail pour l'enregistrement de nouvelles entrées et de modification des entrées existantes.

Dans la liste, sélectionnez donc le formulaire BreezingForms correspondant à vos enregistrements, cochez Édition par type afin de pouvoir éditer les données depuis le même formulaire, cochez aussi les différentes notifications selon vos besoins.

Enregistrez une fois de plus pour créer la liste.

Les champs apparaissent désormais dans le paramétrage de la vue et il devient possible de faire différents choix par champ selon que l'on veuille le voir affiché en front, le rendre éditable ou non, etc.

- Onglet vue

L'onglet vue donne accès à la liste des champs de votre formulaire et des divers paramètres d'affichage et d'édition.

- Les colonnes

Chaque en-tête de colonne peut être survolé pour obtenir une description de sa fonction.
Si vous souhaitez modifier un nom de Label pour l'adapter à votre vue, cliquez sur son nom, modifiez et ressortez du champ de modification pour valider.

bf cb 06 tn

  1. Label : Il s'agit des champs du formulaire BreezingForms
  2. Inclure dans la liste : Option d'affichage dans la liste visible par toute personne ayant accès au formulaire (c'est là que l'on peut afficher les données utiles et masquer les données sensibles. Sélectionnez chaque champ que vous souhaitez afficher en activant la case à cocher en regard du champ et cliquez ensuite sur le bouton Inclure dans la liste. Vous pouvez bien sûr cliquer le bouton rouge d'inclusion, champ après champ.
  3. Inclure dans la recherche : Permet de limiter la recherche uniquement dans les données de champs autorisés. Cochez ou décochez les champs dans lesquels vous autoriserez la recherche. À savoir si vous autorisez la recherche dans tous les champs, cette recherche sera possible sur un champs qui n'est pas affiché sans toutefois afficher les données de ce dernier.
    Dans ce pas à pas, j'active la recherche uniquement sur les champs inclus dans la liste.
  4. Ajouter un lien : Ajoute un lien sur chaque donnée affichée sélectionnée et permet, par le clic, d'accéder à la vue CB. Dans le cas présent, je ne place qu'un lien sur le Nom du coureur.
  5. Éditable : Cochez les champs qui seront éditables par les personnes (groupes) autorisées. Dans ce cas, je coche tout sous peine de ne pas pouvoir enregistrer les données concernées lors d'un nouvel enregistrement.
  6. Retour à la ligne : au besoin, renseignez le nombre de caractères après lesquels il y aura un saut de ligne.
  7. Code d'élément : Il s'agit d'une option pour insérer du code, un formatage, un redimensionnement d'image, etc. Dans le cas présent, je vais mettre le nom du participant en gras. J'indique donc dans ce champ :
    <strong>{value}</strong>
  8. Publié : Confirme que le champ soit publié ou non. Je laisse tout publié.
  9. Trier par : Permet d'ordonner des champs dans la liste comme vous le préférez.
  10. Le dernier bouton de droite : enregistre l'ordre modifié des champs

Enregistrez et fermez la vue afin de pouvoir la publier (la rendre disponible). Une fois sortie de la vue, vous apercevez celle-ci dans le module de vues. À l'aide du clic sur l'icône Publié, publiez votre liste.

bf cb 07 tn

Afin de voir à quoi ça ressemble, publiez un lien de menu de type contentBuilder → List View dans l'un de vos menus, validez et dans l'onglet List View, sélectionnez votre vue. Paramétrez votre lien comme à votre habitude et enregistrez-le. Passez sur votre frontend afin d'avoir un aperçu de votre liste encore vide.

bf cb 08 tn

Comme la vue a été définie pour un affichage en front comme en backend, sachez qu'elle est désormais disponible depuis l'administration via le menu Composants → ContentBuilder Views → Nom de votre vue.

- Onglet Liste d'états

La liste d'états permet de paramétrer jusque 10 états de l'enregistrement en cas de besoin.  Je n'en nécessite pas vraiment pour ce pas à pas mais j'en active un pour que vous puissiez comprendre comment l'utiliser. J'active donc uniquement un état, je le titre Validé et lui choisis une couleur verte. Il faut alors retourner dans les options avancées de la vue pour activer État de l'onglet Voir. Enregistrez.

bf cb 09 tn

- Liste des textes d'introduction

La traduction est peut-être mal choisie et je l'adapterai avant de vous la proposer au téléchargement.

Il s'agit des textes que vous pouvez insérer et qui apparaîtront avant la liste. Vous pouvez y insérer un titre et des informations, des images, etc. tout comme vous le feriez lors de la rédaction d'un article. Cette introduction se rédige à l'aide de votre éditeur par défaut.

bf cb 11 tn

- Le template de contenu

Il s'agit de la partie où vous mettrez en page l'affichage de la vue elle même. Il faut la créer puis l'adapter à vos besoins. Si l'affichage vous convient, vous pouvez bien entendu ne pas y toucher.

Créons le template.

Sélectionnez le type de vue que vous désirez Exemple ou Article. Dans le cas d'un article, vous pourrez depuis la gestion de vos articles, éditer l'article à votre guise et y ajouter tout ce que vous voudrez. Un clic sur l'item de liste sur lequel vous avez placé un lien affichera l'Exemple ou l'Article selon votre choix.

bf cb 12 tn

Dans le cas présent, je ne souhaite pas d'article, je coche donc Exemple, je coche également l'option de publication automatique. Paramétrez les autres options à votre goût puis enregistrez pour vois apparaître le contenu de votre template dans la zone d'édition de l'éditeur.

bf cb 13 tn

Le contenu de ce template est sous forme de liste. Il vous est possible de formater ce contenu comme vous le souhaitez, supprimer certaines données de l'affichage telles les données sensibles et personnelles s'il y en a., ajouter un texte standard, etc.

Sa structure se présente comme suit :

<ul class="category list-striped list-condensed">
{hide-if-empty prenom}
<li class="cat-list-row0"><strong class="list-title">{prenom:label}</strong>
<div>{prenom:value}</div>
</li>
{/hide}
</ul>

Chaque item de liste est entourée de balises {hide-if-empty champ} item de liste {/hide}. Cette partie de code entre accolades permet de ne pas afficher un champ si ce dernier n'a pas été renseigné et à donc une valeur nulle. Il est important de ne pas modifier cette structure, vous pouvez très bien remplacer le formatage en liste par un formatage en paragraphe, div, etc. mais chaque élément concernant un champ du formulaire doit se voir entouré de ces instructions. C'est surtout important si les champs de votre formulaire ne sont pas des champs requis (obligatoires).

Entre ces deux parties entre accolades, nous avons {champ:label} et {champ:value}. Le premier étant l'intitulé du champ et le second sa valeur, renseignée par l'internaute.

- Préparer le contenu

Ne maitrisant pas cette partie, je passerai. Si j'obtiens des informations à ce sujet, je compléterai l'article.

- Template éditable, Préparer l'édition et Template d'email

Le formulaire étant géré par BreezingForms, il n'est pas possible de modifier ou de paramétrer ces onglets.

Permissions

C'est dans cet onglet que l'on autorisera les différents groupes à accéder aux différentes options des listes et vues.

Il est possible de paramétrer différemment les options sur le frontend et le backend. Nous paramétrons le front, le backend pourra être paramétré en suivant l'exemple.

Assurez-vous que l'option Frontend soit sélectionnée, elle est alors soulignée.

  1. Propres listes uniquement : N'autorise la vue dans les listes aux visiteurs que pour leur propre soumission (ne concerne que les enregistrements d'utilisateurs inscrits et connectés.
  2. Options limitées d'articles : Concerne la publication en tant qu'article et pose une limite aux paramètres des articles.
  3. Forcer les autorisations sur le propriétaire : Est prioritaire sur les permissions accordées à chaque groupe.
  4. Afficher toutes les langues : Concerne les sites multilingues
  5. Forcer la connexion après la soumission : Redirige vers le formulaire de connexion au site après la soumission du formulaire BreezingForms.
  6. Forcer l'URL après la soumission : Saisissez une URL vers laquelle rediriger l'internaute après la soumission du formulaire. Laisser vide redirige l'internaute vers la vue qu'il vient d'enregistrer.

- Les permissions de groupes

Pour l'exemple, je souhaite autoriser l'accès aux listes, aux vues et à la création de nouveaux enregistrements à tous, membres ou non, connecté ou non.

Je souhaite en outre autoriser l'édition, la suppression, l'édition de l'état et la publication au Super Utilisateur et aux administrateurs qui pourront gérer les enregistrements.

Je coche ces options pour ces deux groupes.

bf cb 14 tn

Liste et vue en frontend

Avant de passer au frontend, revenons sur le lien de menu créé pour accéder à la liste.
Afin de proposer un boutons de retour à la liste dans le contenu de la vue, éditez le lien de menu et dans l'onglet List View et assurez-vous que l'option Show back button soit activée. Expérimentez les autre options si vous le souhaitez.

Maintenant que les paramètres sont entièrement terminés, nous pouvons tester notre affichage en frontend. Allez-y et faites apparaître votre liste à l'aide du lien que vous aviez créé à cet effet.

La liste s'affiche, vide, avec un bouton intitulé Nouveau qui permettra l'accès au formulaire BreezingForms pour la création d'une nouvelle entrée.

Cliquez donc le bouton et remplissez votre formulaire avant de la valider et être redirigé vers la vue…

bf cb 15 tn

Cliquez le bouton retour afin de revenir vers la vue et y voir l'enregistrement effectué. Selon que vous soyez connecté ou non et que vous ayez accès à l'édition, suppression des entrées, les options vous seront ou non affichées.

bf cb 16 tn

- Modifier l'état d'une entrée dans la liste pour la confirmer comme étant validée.

Une fois connecté en tant que Super Utilisateur ou Administrateur, cochez la case devant l'entrée à traiter et ouvrez la liste d'état. Sélectionnez Validé et cliquez le bouton confirmer pour voir l'état de l'entrée se modifier.

Dans la colonne Éditer, une icône d'édition apparaît, cliquer cette icône ouvrira le formulaire BreezingForms afin de pouvoir éditer l'entrée.

Attention, si vous utiliser un champ de type calendrier, l'édition le chargera avec la date du jour, l'enregistrer telle qu'elle est modifiera la date dans la vue pour afficher la date du jour.

Si vous accédez à une vue en tant qu'administrateur ou Super Utilisateur, les boutons d'édition, de suppression sont également présents et fonctionnels.

Votre affichage des données de formulaire BreezingForms est désormais en place. Il est également possible d'y insérer des images, des fichiers, etc. Nous verrons ça dans un futur tutoriel.

ContentBuilder étant en anglais, j'ai essayé de le traduire. La traduction n'est pas encore entièrement terminée mais le fichier pour le frontend et une partie du backend sont fonctionnels. Vous pouvez télécharger ces fichiers de langue ci-dessous. Je mettrai le lien à jour lorsque tout sera terminé, relu et approuvé. images popup

Télécharger les fichiers de langue française pour ContentBuilder

Pack_francais_ContentBuilder.zip
Téléchargé 5 fois

Si vous souhaitez tester les fonction de création de Liste et Vue, les options d'édition, de suppression, etc. rendez-vous sur cette page. Tous les droits sont ouverts afin que vous puissiez tout tester.

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

 Commentaires  
Navarro
0#Conflit en BForms et CBuilderNavarro25-08-2019 21:31
Excellent tuto, je l'ai mis en œuvre sur notre site et le résultat correspond à nos espérances.
Cependant je rencontre un problème assez pénalisant, quand l'affichage des données est publié les formulaires BreezingForms ne sont plus accessibles par le public (problème d'accès à la page).
Si je dépublie la vue dans ContentBuilder le formulaire est à nouveau accessible mais donc plus l'affichage des données.
J'ai testé tous les paramètres des deux outils BF et CB mais rien n'y fait.
Avez-vous le même problème ou avez une indication pour me permettre de résoudre ce problème ?
Répondre | Répondre en citant | Citer
Eddy
0#RE: Conflit en BForms et CBuilderEddy26-08-2019 12:00
Bonjour B.

Merci pour votre compliment.
Je ne rencontre pas ce problème. Avez-vous bien vérifié les autorisations que vous avez appliquées à votre vue ?
N'hésitez pas à me faire parvenir une capture d'écran de vos autorisations par e-mail. Vous connaissez mon adresse e-mail. ;-)
Répondre | Répondre en citant | Citer
Symphorien D
0#Ajout d'un champ à la vueSymphorien D26-08-2019 21:28
Bonsoir, Excellent tuto, ca m'a beaucoup aidé à avancer sur le site que je developpe actuellement. J'aimerais savoir si c'est possible d'ajouter un champ observations ou remarques à une vue existante.
Merci
Répondre | Répondre en citant | Citer
Eddy
0#RE: Affichage des données enregistrées par un formulaire BreezingForms.Eddy27-08-2019 11:58
Bonjour Symphorien.

Merci pour votre compliment.

Oui bien sûr, il suffit d'ajouter le champ au formulaire, à l'emplacement où vous le désirez.
Ouvrez ensuite votre vue ContentBuilder pour l'y voir intégré. Il faut adapter ses options, à savoir s'il doit apparaître dans la liste, etc.

Ensuite, il faudra passer par l'onglet Template de contenu et insérer le champ :
  • soit manuellement si vous aviez personnalisé l'affichage
  • soit en recochant votre choix Article ou Exemple si vous n'aviez pas personnalisé
puis en effectuant un enregistrement.
Dans le cas de personnalisation et d'ajout manuel, veillez à ce que les cases à cocher Article et Exemple soient bien décochées avant l'enregistrement sous peine d'écraser le template personnalisé par celui par défaut !
Répondre | Répondre en citant | Citer
Symphorien D
0#RE: Affichage des données enregistrées par un formulaire BreezingForms.Symphorien D27-08-2019 12:43
Bonjour,
Merci beaucoup pour votre retour.
Je le test puis je vous reviens.
Merci encore
Répondre | Répondre en citant | Citer
Symphorien D
0#RE: Affichage des données enregistrées par un formulaire BreezingForms.Symphorien D28-08-2019 13:30
Bonjour
Juste pour vous remercier.
Ca marche correctement.
Merci
Répondre | Répondre en citant | Citer
Eddy
+1#RE: Affichage des données enregistrées par un formulaire BreezingForms.Eddy28-08-2019 13:38
Bonjour Synmphorien,

Ravi d'avoir pu vous apporter la solution !
Répondre | Répondre en citant | Citer
 Ajouter un commentaire
En utilisant ce formulaire de commentaires, vous acceptez que les informations demandées soient enregistrées, affichées ci-dessous et utilisées pour un éventuel contact (dans ce cas, n'oubliez pas de renseigner votre e-mail). L'adresse e-mail n'est jamais affichée aux visiteurs.