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

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. Attention, la version que nous vous proposons n'est compatible que Joomla 4 et Joomla 5

• UNZIP_FIRST_contentbuilder45-patch_2024-01-07_0145.zip (1.89 Mo) Téléchargé 51 fois

ContentBuilder étant en anglais, G. NEDELEC nous a fait l'honneur de traduire les fichiers et les mettre à la disposition de chacun. Vous pouvez télécharger ces fichiers de langue ci-dessous.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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

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…

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.

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