Joomla! 3.7 sur les Champs

Cyrille POUSSIN .

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

Joomla 3.7 sur les Champs

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.

Joomla 3.7 creation 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

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

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.

Placeholder Joomla!

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

positions Joomla!

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.

Publication de la création d’un champ Joomla!

Onglet Publication de la création d’un champ

Onglet Droits de Joomla! lors de la création d’un champ

Onglet Droits de la création d’un champ

Le champ Calendrier

Champ Joomla! 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)

Camp Joomla! 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

Champ Joomla! 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

Champ Joomla! Editeur

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

Champ Joomla! 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

Champ Joomla! 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

Champ Joomla! 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

Champ Joomla! Liste 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

Champ Joomla! Media

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.

Vue du champ média Joomla!

  • 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 Joomla!

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.

Champ Joomla! Radio

Vues du champ Radio, création, article et frontend

Le champ SQL

Champ Joomla! 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

Champ Joomla! 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

Champ Joomla! Zone 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

Champ Joomla! 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

Champ Joomla! 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

Affichage du pop-up pour sélectionner un utilisateur Joomla! 3.7

Le champ Groupe d’utilisateurs

Champ Joomla! Groupe utilisateur

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

Champ Joomla! 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 !

Evenement etape 1

Étapes de la création d’un lien de menu

  1. Ajouter un lien de menu
  2. Donner un titre au lien de menu
  3. Sélectionner le type de lien de menu “blog d’une catégorie”
  4. Cliquer sur le bouton “Créer”
  5. Donner un nom à la catégorie (Je propose Événements)
  6. Cliquer sur le bouton “Enregistrer et fermer” de la fenêtre pop-up
  7. Cliquer sur le bouton “Enregistrer et fermer” de la création d’un lien de menu

Création du groupe de champs

Evenement etape 2

Étapes de la création d’un groupe de champs

Tout d’abord nous allons créer un groupe de champs :

  1. Gestion des groupes de champs
  2. Créer un nouveau groupe de champs
  3. Donner un nom au groupe de champs
  4. Vous pouvez ajouter une description au groupe de champs
  5. 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” :

  1. Cliquer sur le bouton “Champ”
  2. Créer un nouveau champ
  3. Donner un nom au champ
  4. Choisir dans le liste déroulante “Calendrier”
  5. Choisir le groupe d’articles “Événement”
  6. Donner une description
  7. Choisir la catégorie d’article dans laquelle le champ sera visible
  8. Choisir de montrer l’heure de l’événement
  9. Cliquer sur le bouton “Enregistrer et fermer”

Evenement etape 3

É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” :

  1. Cliquer sur le bouton “Nouveau”
  2. Donner un nom au champ
  3. Choisir le type de champ “Calendrier”
  4. Donner une description si besoin
  5. Choisir le nom du groupe de champs
  6. Sélectionner la catégorie dans laquelle le champ sera visible
  7. Choisir d’afficher l’heure de la fin de l’événement
  8. Cliquer sur le bouton “Enregistrer et fermer”

Evenement etape 4

Étapes de construction du champ fin de l’événement

Evenement etape 5

É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” :

  1. Cliquer sur le bouton “Nouveau”
  2. Donner un nom au champ
  3. Choisir le type de champ “Texte Area”
  4. Sélectionner le groupe de champs “Événements”
  5. Entrer une description si besoin
  6. Sélectionner la catégorie d’articles dans laquelle le champ sera visible
  7. 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.

Evenement etape 6

Étapes de rédaction des trois champs

Nous sommes sur la page des champs pour articles.

  1. Cliquer sur le lien “Article” à gauche
  2. Cliquer sur le bouton “Nouveau”
  3. Donner un titre à l’article
  4. Choisir dans la liste, le nom de la catégorie à laquelle l’article va appartenir. Pour nous ce sera “Événements”
  5. 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.
  6. Remplir le champ “Début”
  7. Remplir le champ “Fin”
  8. Remplir le champ “Adresse”
  9. Cliquer sur le bouton “Enregistrer et fermer”

Nous retrouvons ainsi notre article en frontend, et nos trois champs remplis.

Article evement front

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

Position non

Suppression de la position automatique des champs

  • Revenez sur votre article, et insérez un tableau d’une colonne et deux lignes.

Bloc evenements 01

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

Bloc evenements 02

Insertion des champs

  • Une fenêtre pop-up s’ouvre et vous donne la possibilité de choisir l’un des trois champs.

Bloc evenements 03

Sélection des champs

  • Choisissez “Début”, puis à la ligne.
  • Recommencez avec le champ “Fin” et “Adresse”.

Bloc evenements 04

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.

Bloc evenements 05

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.

Bloc evenements 06

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.

Bloc evenements 07

Titre du tableau en H3

  • Il ne vous reste plus qu’à cliquer sur le bouton “Enregistrer”. Et voilà ce que cela donne.

Bloc evenements 08

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.

Bloc evenements 09

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

Sur ce site, nous utilisons des cookies.