Written by Fort de son évolution Joomla! 3.7 nous apporte 40 nouvelles fonctionnalités et près de 700 améliorations!
L’une d’entre elles, et pas la moindre, nous donne la possibilité de rajouter des champs personnalisés pour les articles, les utilisateurs et les fiches de contact. Cela va nous permettre de créer, sans CCK et sans codage, des événements, des fiches produits, des articles de recettes etc …
Fort de son évolution Joomla! 3.7 nous apporte 40 nouvelles fonctionnalités et près de 700 améliorations!L’une d’entre elles, et pas la moindre, nous donne la possibilité de rajouter des champs personnalisés pour les articles, les utilisateurs et les fiches de contact. Cela va nous permettre de créer, sans CCK et sans codage, des événements, des fiches produits, des articles de recettes etc …
A notre disposition ce sont 16 champs et la création de groupes de champs :
Calendrier
Case à cocher (checkboxes)
Couleurs
Éditeur
Galerie
Integer
Liste
Liste d’images
Média
Radio
SQL
Texte
Zone de texte
Url
Utilisateur
Groupes d’utilisateurs
Afin de mieux appréhender l’étendue de ces champs vous en trouverez, à suivre, la présentation intégrale.Un exemple sous la forme d’un article Événement suivra cette présentation.
Préambule
Vous trouverez la possibilité de créer des champs à partir des menus :
“Utilisateurs” > “Champs” “Groupes de champs”;
“Contenu” > “Champs” “Groupes de champs”;
“Composants” > “Fiches de contacts” > “Champs” “Groupes de champs”.
Si vous utilisez la gestion des versions dans les articles, sachez que les champs n’y sont pas stockés! Vous ne trouverez donc aucune information sur les modifications des champs.
Vues vers les liens de créations des champs et groupes de champs
Affichage commun à tous les champs
Dans l’onglet général
Onglet Général de la création d’un champ
Certaines données sont obligatoires pour tous les champs :
Titre : Nom que vous donnerez à votre champ. Il ne sera pas visible lorsque vous utiliserez le champ pour un article, un utilisateur ou un contact. Il reste modifiable après enregistrement du champ.
Type : Lorsque vous créez un champ vous avez un choix disponible de 16 champs. Après l’enregistrement de ce champ le type n’est plus modifiable.
Étiquette (Label) : Texte descriptif du champ, il se remplit automatiquement du “Titre”, mais reste modifiable. C’est cette “Étiquette” qui sera utilisée lors de la création du champ dans l’article et qui sera visible dans le frontend de votre site internet.
D’autres données ne sont pas obligatoires :
Description : C’est une bulle d’aide qui apparaîtra lors de la saisie du champ dans un article, un utilisateur ou un contact. Ce texte n’est pas accessible pour la fonction multilingue et n’est pas visible dans le frontend de votre site internet.
Obligatoire (Requis) : Vous rendez obligatoire le remplissage du champ lors de la création d’un article, utilisateur ou contact. Il sera marqué d’un astérisque pour en informer le rédacteur.
Valeur par défaut (Default Value) : Vous pouvez définir dans cet espace une valeur par défaut pour votre champ. En fonction du champ il faudra le remplir par une valeur ou un indice. Ce texte reste traduisible pour les sites multilingues.
Statut : Comme pour la majorité des composants Joomla! vous avez la possibilité de choisir le statut du champ : Publié, Non publié, Archivé ou Dans la corbeille.
Groupes de champs (Field groups) : C’est la possibilité de faire appartenir votre champ à un ou plusieurs groupes de champs.
Catégories : C’est la possibilité d’attribuer le champ à une ou plusieurs catégories d’articles, utilisateurs ou contacts.
Accès : Comme pour un article pour pouvez choisir le niveau d’accès du champ pour sa visibilité en frontend.
Langue : Dans le cas d’un site multilingue vous pourrez choisir de l’attribuer à toutes ou à une seule langue.
Note : Saisir une note facultative pour le champ.
Dans l’onglet paramètres
Onglet Paramètres de la création d’un champ
Données non obligatoires :
Texte d’information (Placeholder) : C’est la possibilité d’insérer, dans le champ à remplir, un texte d’information qui sera grisé et non visible dans le frontend.
Class CSS front (Render Class) : Ajout d’un suffixe de classe CSS pour l’affichage en frontend de votre site internet.
Class CSS édition (Edit Class) : Ajout d’un suffixe de classe CSS pour l’édition du champ, par exemple lors de la création d’un article.
Afficher l’étiquette (Show Label) : Afficher ou masquer l’étiquette pour l’affichage en frontend de votre article, utilisateur ou contact.
Désactivé (Disabled) : Le champ est bien visible lors de la création d’un article, utilisateur ou contact, mais il n’est pas accessible pour le remplissage.
Lecture seule (Read-Only) : Le champ est en lecture seule et donc non modifiable dans l’édition.
Visibilité (Show On) : Le champ est visible dans le backend, frontend ou les deux.
Position (Automatic Display) : Le champ sera visible en frontend en dessous du titre, au dessus du contenu de l’article, en dessous du contenu de l’article ou pas du tout.
Vues des trois positions d’un champ
Les deux onglets suivants “Publications” et “Droits” ont les mêmes caractéristiques que la plupart des composants.
Onglet Publication de la création d’un champ
Onglet Droits de la création d’un champ
Le champ Calendrier
Vues du champ Calendrier, création, article et frontend
Le champ “Calendrier” fournit une zone d’édition qui permet de rentrer une date manuellement ou en utilisant la petite icône sur la droite. Un pop-up s’ouvre pour permettre de sélectionner une date, de l’effacer ou choisir celle du jour.En option, lors de la création du champ, vous avez la possibilité de choisir un horaire. Le format d’affichage de la date dans le frontend est fonction de la langue d’affichage de votre site internet.
Le champ Case à cocher (Checkboxes)
Vues du champ Case à cocher, création, article et frontend
Ce champ nous fournit la possibilité de créer une liste de cases à cocher simple. (pas de sélection multiple) Cela veut dire qu’une case cochée désélectionne les autres. Si vous devez remplir la case “Valeur par défaut”, elle correspond à l’une des cases “Valeur” de la Checkboxes.Le bouton “+” vous permet de rajouter des lignes. Le bouton “-” de supprimer des lignes et le symbole “multi-flèches” de déplacer les lignes pour organiser votre formulaire.
Le champ Couleurs
Vues du champ Couleur, création, article et frontend
Le champ “Couleurs” permet d’afficher une zone dans laquelle nous pouvons entrer un code couleur sous la forme #3498db . Il suffit de cliquer dans la zone pour faire apparaître un pop-up nous permettant de sélectionner une couleur. L’affichage en frontend correspond au code couleur sélectionné, sous la même forme #3498db.
Le champ Éditeur
Vues du champ Éditeur, création, article et frontend
Le champ “Éditeur” possède 4 options supplémentaires :
Afficher les Boutons (Show Buttons) : Trois choix possibles (Use From Plugin, Oui ou Non). Use From Plugin, correspond aux réglages de plug-ins de l’éditeur que vous utilisez.
Masquer les boutons (Hide Buttons) : Ici vous pouvez choisir de ne pas afficher des boutons sous forme de liste séparée par des virgules. Exemple : pagebreak,readmore.
Largeur (Width) : La largeur de l’éditeur peut être réglée en largeur par une valeur en % ou px.
Hauteur (Height) : La hauteur de l’éditeur peut être réglée par une valeur en % ou px.
Le fait d’avoir un éditeur WYSIWYG comme champ nous permet toutes les solutions html existantes comme par exemple l’affichage d’une carte Google.
Le champ Galerie
Vues du champ Galerie, création, article et frontend
Le champ “Galerie” offre la possibilité d’afficher une galerie via un dossier dans le répertoire images de votre Joomla! avec des miniatures sélectionnables.
Liste des options dans l’onglet général du champ Galerie :
Largeur des Miniatures (Thumbnail Width) : Donner une largeur aux miniatures en pixel ;
Largeur Maximale (Max Width) : Inscrire une largeur maximale à l’affichage de l’image sélectionnée dans les miniatures en pixel.
Hauteur Maximale (Max Height) : Inscrire une hauteur maximale à l’affichage de l’image sélectionnée dans les miniatures en pixel.
Inclus (Recursive) : Choisir si l’on veut que les images des sous-dossiers soient incluses > Réglage du plug-ins, Oui ou Non.
Multiple : Choisir si l’on veut pouvoir sélectionner plusieurs dossiers source > Réglage du plug-ins, Oui ou Non.
Dossier (Directory) : Préciser ici le dossier parent tel que : “images/sampledata”. Si non précisé ce sera par défaut le dossier “images”.
Le champ Integer
Vues du champ Integer, création, article et frontend
Le champ “Integer” crée une liste déroulante de nombres entiers compris entre un minimum (le plus petit nombre) et un maximum (le plus grand). Le “pas” détermine l’écart régulier entre deux nombres entiers successifs.
Les options de réglages sont :
Multiple : Choisir si l’on veut pouvoir sélectionner plusieurs nombres entiers > Réglage du plug-ins, Oui ou Non.
Premier (First) : Le plus petit nombre entier.
Dernier (Last) : Le plus grand nombre entier.
Pas (Step) : Écart régulier entre deux nombres entiers successifs.
Le champ Liste
Vues du champ Liste, création, article et frontend
Ce champ nous fournit la possibilité de créer une liste déroulante pour un ou plusieurs textes. Si vous devez remplir la case “Valeur par défaut”, elle correspond à l’une des cases “Valeur” de l’un des champs .Le bouton “+” vous permet de rajouter des lignes. Le bouton “-” de supprimer des lignes et le symbole “multi-flèches” de déplacer les lignes pour organiser votre formulaire.
Les options de ce champs sont :
Multiple : Choisir si l’on veut pouvoir sélectionner plusieurs nombres entiers > Réglage du plug-ins, Oui ou Non.
Liste de Valeurs (list Values) : Liste de champs à pré-remplir pour avoir une liste de sélection lors de l’édition d’un article, contact ou utilisateur.
Le champ Liste d’images
Vues du champ Liste d’images, création, article et frontend
Le champ “Liste d’images” nous permet de créer une liste d’images qui sont regroupées dans un répertoire de votre média.
Les options de réglages sont :
Répertoire (Directory) : Vous fournira un accès à la liste de votre répertoire de médias.
Multiple : Choisir si l’on veut pouvoir sélectionner une ou plusieurs images > Réglage du plug-ins, Oui ou Non.
Image Class : la possibilité de rajouter une Classe CSS à votre image sélectionnée.
Le champ Médias
Vues du champ Médias, création, article et frontend
Le champ “Médias” nous donne la possibilité d’ouvrir le pop-up du répertoire média et ainsi de sélectionner ou télécharger une image dans notre répertoire Médias de Joomla!. L’image sélectionnée sera affichée dans le frontend du site.
Les champs optionnels sont :
Répertoire (Directory) : Vous fournira un accès à la liste de votre répertoire de médias.
Vignette (Préview) : Une icône sur la gauche du champ dans la vue article, vous offre la possibilité de visualiser l’image sélectionnée sans ouvrir le pop-up.
Image Class : La possibilité de rajouter une Classe CSS à votre image sélectionnée.
Home Directory : Seuls les utilisateurs identifiés pourront voir l’image dans le frontend.
Vue pop-up du répertoire images
Le champ Radio
Ce champ nous fournit la possibilité de créer une liste de mots à sélectionner. Il n’y a pas de sélection multiple possible. Cela veut dire qu’un mot sélectionné désélectionne les autres. Si vous devez remplir la case “Valeur par défaut”, elle correspond à l’une des cases “Valeur” de la Checkboxes.
Le bouton “+” vous permet de rajouter des lignes. Le bouton “-” de supprimer des lignes et le symbole “multi-flèches” de déplacer les lignes pour organiser votre formulaire.
Vues du champ Radio, création, article et frontend
Le champ SQL
Vues du champ SQL, création, article et frontend
Le champ “SQL” nous fournit une liste déroulante des résultats obtenus par l’exécution d’une requête SQL sur la base de données de votre Joomla!
Les options de réglages sont :
Requête (Query) : La requête doit appeler deux colonnes > une première “valeur” qui contiendra les éléments de la liste; la deuxième “texte” contenant le texte dans la liste déroulante.
Multiple : C’est le choix de pouvoir sélectionner plusieurs valeurs dans la liste déroulante.
Pour plus d’informations suivre : https://docs.joomla.org/SQL_form_field_type
Le champ Texte
Vues du champ Texte, création, article et frontend
Le champ “Texte” créera lors de la rédaction d’un article, d’un contact ou d’un utilisateur une ligne de texte.
Filtre (Filter) : Accepter que certaines balises HTML fonctionnent. Il faut utiliser le filtre “brut” (raw) pour que le code HTML soit affiché sous sa forme de code.
Le champ Zone de texte
Vues du champ Zone de texte, création, article et frontend
Le champ “Zone de Texte” (Textarea) nous fournit la possibilité d’intégrer dans un article un champ large et cumulable sur plusieurs lignes pour pouvoir insérer du texte. Cette zone de texte ne comporte pas de mise en forme du texte.
Les réglages possibles sont :
Le nombre de lignes (Rows) : C’est le nombre de lignes affichées dans le backend. Il n’affecte pas la taille du texte qui sera affiché dans le frontend du site internet.
Colonnes (Columns) : C’est le nombre de colonnes affichées dans le backend. Ce nombre de colonnes n’affecte pas l’affichage dans le frontend du site internet.
Le champ Url
Vues du champ Url, création, article et frontend
Le champ “Url” nous offre la possibilité de créer, pour un article, un contact ou un utilisateur, un champ de lien url personnalisable.Les options de réglages sont :
Schemes : Sept formats sont disponibles : HTTP, HTTPS, FTP, FTPS, URL, FILE ou MAILTO. C’est une façon de restreindre le format lors de la création dans le backend.
Relative : Utilisez cette option pour déterminer si les liens Url relatives sont autorisés. Trois possibilités : Réglage plug-ins, oui ou non.
Le champ Utilisateur
Vues du champ Utilisateur, création, article et frontend
C’est un champ simple sans option qui nous donne accès, via une fenêtre pop-up, à la liste des utilisateurs de Joomla! et nous permet d’en sélectionner un. L’affichage dans le frontend n’est qu’une information, il n’y a pas de lien cliquable.
Affichage du pop-up pour sélectionner un utilisateur Joomla! 3.7
Le champ Groupe d’utilisateurs
Vues du champ Groupe d’utilisateurs, création, article et frontend
Le champ Groupe d’utilisateurs affiche lors de la création d’un article, contact ou utilisateur une liste déroulante vers les groupes d’utilisateurs créés dans Joomla!. La seule option de réglage pour ce champ est la possibilité de sélectionner un ou plusieurs groupes d’utilisateurs.
Le champ Groupe de champs
Vues du champ Groupe de champs, création, champ, article et frontend
Le champ Groupe de champs, nous permet de créer un groupe dans lequel nous pourrons intégrer des champs lors de leur création. Il n’y a aucun réglage possible si ce n’est la possibilité d’insérer une description du groupe de champs.
Le nom du ou des groupes de champs sera sélectionnable lors de la création d’un champ mais également visible lors de la création d’un article, contact ou utilisateur. Il ne sera pas visible dans le frontend du site internet.
Dans l’exemple on peut visualiser les quatre étapes (Création du Groupe de champs, d’un des trois champs, remplissage des trois champs dans un article et affichage du groupe dans le frontend) pour un affichage de trois champs dans un groupe de champs.
Réalisation d’un article Évènement
A cet endroit précis de votre lecture vous êtes, normalement, devenu Maître en ouverture de champs ! Travaillons plus en “profondeur” et réalisons maintenant un exemple sur la base d’un article Événement. Sans trop complexifier les choses, pour réaliser un article Événement il vous faut disposer au minimum de seulement trois éléments : une date de début, une date de fin et un lieu. Soit, en fait, deux champs “Calendrier” et un champ “Zone de texte”.
Création du lien de menu
Pour l’exercice nous allons d’abord créer un lien de menu vers un nouvelle catégorie d’article. Avec Joomla! 3.7 nous réaliserons cette étape en une seule fois !
Étapes de la création d’un lien de menu
Ajouter un lien de menu
Donner un titre au lien de menu
Sélectionner le type de lien de menu “blog d’une catégorie”
Cliquer sur le bouton “Créer”
Donner un nom à la catégorie (Je propose Événements)
Cliquer sur le bouton “Enregistrer et fermer” de la fenêtre pop-up
Cliquer sur le bouton “Enregistrer et fermer” de la création d’un lien de menu
Création du groupe de champs
Étapes de la création d’un groupe de champs
Tout d’abord nous allons créer un groupe de champs :
Gestion des groupes de champs
Créer un nouveau groupe de champs
Donner un nom au groupe de champs
Vous pouvez ajouter une description au groupe de champs
Cliquer sur le bouton “Enregistrer et fermer”
Création des trois champs
Ensuite nous allons créer le premier champ date de début de l’événement avec un champ “Calendrier” :
Cliquer sur le bouton “Champ”
Créer un nouveau champ
Donner un nom au champ
Choisir dans le liste déroulante “Calendrier”
Choisir le groupe d’articles “Événement”
Donner une description
Choisir la catégorie d’article dans laquelle le champ sera visible
Choisir de montrer l’heure de l’événement
Cliquer sur le bouton “Enregistrer et fermer”
Étapes de création du champ “Début de l’événement”
Puis le champ “fin de l’événement” avec un deuxième champ “Calendrier” :
Cliquer sur le bouton “Nouveau”
Donner un nom au champ
Choisir le type de champ “Calendrier”
Donner une description si besoin
Choisir le nom du groupe de champs
Sélectionner la catégorie dans laquelle le champ sera visible
Choisir d’afficher l’heure de la fin de l’événement
Cliquer sur le bouton “Enregistrer et fermer”
Étapes de construction du champ fin de l’événement
Étapes de construction du champ Adresse de l’événement
Et enfin la création du champ adresse de l’événement avec un champ “Zone de texte” :
Cliquer sur le bouton “Nouveau”
Donner un nom au champ
Choisir le type de champ “Texte Area”
Sélectionner le groupe de champs “Événements”
Entrer une description si besoin
Sélectionner la catégorie d’articles dans laquelle le champ sera visible
Cliquer sur le bouton “Enregistrer et fermer”
Nous constatons que nos trois champs ont bien été créés.
Création de l’article Événement
Dernière étape, la création d’un article dans la catégorie “Événements” et le remplissage des trois champs.
Étapes de rédaction des trois champs
Nous sommes sur la page des champs pour articles.
Cliquer sur le lien “Article” à gauche
Cliquer sur le bouton “Nouveau”
Donner un titre à l’article
Choisir dans la liste, le nom de la catégorie à laquelle l’article va appartenir. Pour nous ce sera “Événements”
Cliquer sur l’onglet “Événements” qui correspond au titre de notre groupe de champs. Si notre article n’avait pas été classé dans la catégorie “Evénements”, cet onglet ne serait pas présent, tout comme le bouton “Fields” dans l’éditeur TinyMCE.
Remplir le champ “Début”
Remplir le champ “Fin”
Remplir le champ “Adresse”
Cliquer sur le bouton “Enregistrer et fermer”
Nous retrouvons ainsi notre article en frontend, et nos trois champs remplis.
Vue frontend de l’article Événements
Personnalisation de l’affichage
La position automatique de ces trois champs n’est pas forcément la plus agréable et ne vous conviendra peut-être pas. Nous avions laissés les paramètres d’affichage du champ “par défaut”. Je vous propose de mettre les trois champs dans un bloc sur la droite du texte de l’article.
Pour ce faire revenir sur les paramètres des trois champs et modifier la position automatique sur “Non”.
Suppression de la position automatique des champs
Revenez sur votre article, et insérez un tableau d’une colonne et deux lignes.
Création d’un tableau
Insérez un titre sur la première ligne (Informations), puis placez votre curseur au début de la deuxième ligne. Cliquez sur le bouton “Champ” (Field).
Insertion des champs
Une fenêtre pop-up s’ouvre et vous donne la possibilité de choisir l’un des trois champs.
Sélection des champs
Choisissez “Début”, puis à la ligne.
Recommencez avec le champ “Fin” et “Adresse”.
Bouton propriétés du tableau
Une fois le tableau rempli, il nous reste à le rendre un peu plus en accord avec le template Protostar de Joomla!.
Cliquez sur le bouton propriétés du tableau en bas à gauche, une fois le tableau sélectionné.
Je vous propose de donner une largeur au tableau de 240 pixels, de donner un espace intérieur de 10 pixels, une épaisseur de bordure de 1 pixel, et enfin de faire flotter le bloc sur la droite du texte.
Propriétés de l’onglet Général
Pour être encore plus proche, nous pouvons aller sur l’onglet “Avancé” des propriétés du tableau et ajouter des couleurs aux bordures et à l’arrière plan du tableau. On s’aperçoit que le champ “Style” du tableau se remplit au fur et à mesure de nos paramètres. Nous pouvons aussi ajouter du code, comme : margin-left: 10px; pour éviter que le texte ne soit collé à gauche du tableau.
Propriétés de l’onglet Avancé
Cliquez sur “Ok” et le tableau dans l’éditeur devient plus sympa. Nous pouvons encore : rendre le texte “Justifié” en cliquant sur le bouton et mettre le titre du tableau au format H3.
Titre du tableau en H3
Il ne vous reste plus qu’à cliquer sur le bouton “Enregistrer”. Et voilà ce que cela donne.
Vue backend de l’article
Côté frontend, nous retrouvons notre bloc d’informations sur la droite du texte, totalement intégré au design du site internet.
Vue Frontend de l’article fini
Il ne s’agit ici que d’une proposition de présentation. Libre à vous d’explorer à votre guise l’énorme étendue des possibilités qui vous sont offertes pour la réalisation de livres de recettes, de catalogues ou de n’importe quels articles comprenant des informations.
NOTE : Aujourd’hui, Joomla! 3.7 est disponible en version beta, une version à ne pas utiliser pour des sites en production, mais pour des tests. Si vous souhaitez participer au projet Joomla!, n’hésitez pas à tester cette version beta et à faire remonter vos éventuels retours. Cette version peut être téléchargée à partir de ce lien : https://github.com/joomla/joomla-cms/releases/tag/3.7.0-beta4.
À propos de l’auteur
Cyrille POUSSIN
Geek et passionné d’informatique depuis toujours, c’est au Joomladay de Bordeaux que j’ai découvert Joomla! et sa communauté. Je me considère comme un curieux, un bricoleur, qui aime essayer, tester, découvrir tout ce qui touche à Joomla! et à la construction de site internet.
www.joomanji.fr