Dans la série “j’aurais du rester au lit ce matin” Jour numéro 4

Salut les loulous (au bout du 4eme jour on est familier), j'espère que vous avez passé de bonnes vacances ? Vous avez bien fait vos devoirs lors du dernier article ?

tuto-flexicontent-cinnk-magazine

Crédits : Aron Van De Pol

http://cinnk.com/magazine/aout-2016/788-dans-la-serie-j-aurais-du-rester-au-lit-ce-matin-jour-numero-3

Les champs : le pouvoir de FLEXIcontent

Comprendre les champs

Contrôler les champs

Les options qui rendent vos champs en mode Super Sayan

Afficher les champs

Ordonner les champs dans le formulaire de saisie

Le type offre

Les champs pour le type candidature

Le type candidature libre

Les champs : le pouvoir de FLEXIcontent

Après avoir mis en place vos types nous allons passer à l’ajout de champs supplémentaires. Il existe 32 champs dans FLEXIcontent. Chacun ayant ses propres fonctions.

En les utilisant correctement vous pourrez tout contrôler !!!!

Comprendre les champs

Chaque champ dispose de 3 affichages, tous paramétrables :

  1. Dans le formulaire de saisie (front et back)

  1. Dans les vues contenu et catégorie

  1. Dans les filtres de recherche

 

Il y a plusieurs type de champs :

  • Les champs de données

    • Le champ radio : affiche une série de boutons radio

  • Le champ radio image : affiche une série de boutons radio sous format image

  • Le champ checkbox : affiche une série de cases à cocher

  • Le champ checkbox image : affiche une série de cases à cocher sous format image

  • Le champ select : affiche une liste déroulante

  • Le champ select multiple : affiche une liste déroulante avec choix multiple

  • Le champ date : permet de sélectionner une date (peut se mapper avec les dates de Joomla)

  • Le champ texte : un simple champ texte

  • Le champ textarea : une zone de texte avec éditeur html possible

  • Le champ textselect : c’est un champ un peu spécial mais ô combien pratique qui combine une liste déroulante de valeurs prédéfinies et un champ texte libre.

Toute nouvelle valeur mise dans le champ texte sera proposée dans la liste déroulante pour des futures saisies

  • Le champ weblink : champ de lien (déprécié au profit de extendweblink)

  • Le champ email : pour mettre un email

  • Le champ extendweblink : champ de lien avec de nombreux régalges

  • Le champ phone : un champ téléphone évolué

  • Le champ termlist : un champ text area mais multiple

  • Le champ file : un champ de chargement de fichier avec de nombreuses options permettant de gérer les paniers de téléchargement

 

  • Le champ image : l’un des plus gros champ de flexicontent, quasiment un composant à lui tout seul, il permet l’upload, le redimensionnement, le watermarking, les effets de présentation etc …. rien que pour ce champ ça vaudrait le coup d’installer flexi !

  • Le champ mini-gallery : c’est un vieu champ qui permet de créer des mini-carrousels mais il doit être mis à jour. En attendant, le mieux c’est d’utiliser le champ image.

  • Le champ video/audio : un champ d’import de video youtube / vimeo / soundcloud avec preview en live

  • Le champ googlemaps : ce champ permet d’afficher une adresse avec une carte googlemap

  • Les champs pour le formulaire de saisie

    • Le champ fieldgroup : permet de regrouper plusieur champs pour dupliquer un groupe

    • Le champ user account via submit : permet de créer un compte Joomla lors de la soumission d’un contenu dans FLEXIcontent

    • Le champ item form tab : permet d’ajouter des onglets des fieldset ou du html dans votre formulaire

    • Le champ core property : il permet de mapper les champs de joomla pour ainsi les placer ailleurs dans le formulaire de saisie

  • Les champs qui affichent des objets

    • Le champ toolbar : une barre de partage pour les réseaux sociaux, compatible Opengraph

    • Le champ chargement de module : permet de charger un module sans avoir besoin de {loadposition}

    • Le champ navigation : il permet d’afficher une navigation entre les articles

    •  

    • Le champ liste html : ce champ permet d’afficher une liste de liens (déprécié)

    • Le champ auteur : affiche un lien vers la page de l’auteur (en cour de développement pour plus d’options)

    • Le champ Joomla profile : en cours de développement, il permettra d’ajouter des champs flexicontent dans le profil d’un utilisateur

  • Les champs de liaisons

    • Le champ relation : alors ce champ là permet des trucs de fou … il permet de lier des contenus entre eux et affiche n’importe quel champ du contenu lié. Un petit exemple

  • Le champ relation inverse : est bien c’est l’inverse lol

 

Avez tous ces champs il est possible de construire des types de contenus riches et simples à mettre en place pour les utilisateurs courants. Plus besoin de penser à la mise en page, plus besoin de devoir mettre un appel plugin, plus besoin de préparer ses images avant chargement …

 

Ouf j’ai essayé de bien tout décrire mais je suis un peu essoufflé …

 

Contrôler les champs

Comme je l’ai déjà dis il y a 3 affichages pour chaque champ :

L’affi… alors vous avez suivi ? j’attend vos réponses dans les com

L’affi … c’est dur avec le mojito dans la main !

L’afficha….

 

Maintenant nous allons pouvoir créer un champ.

Depuis la liste de tous vos champs cliquez sur “Nouveau”

La fenêtre se découpe en 3 zones :

  • La partie haute permet de définir le champ, son nom, son type

  • La partie à gauche en dessous permet de faire les réglages dit basiques que l’on retrouve dans tous les champs, comme l’accès, le type lié, est-il disponible pour la recherche ou le filtrage ou la gestion des droits. Et oui dans FLEXI vous pouvez créer des champs qui respectent les ACL en terme de display et de saisie. Pratique pour créer un champ de commentaires à nos candidatures seulement accessible pour les administrator et invisible pour les demandeurs …

 

  • Dans le panneau de droite vous aurez les options d’un type de champ spécifique. Bien sûr je ne vais pas vous faire un screenshot par onglet ET par type sinon on se revoit l’année prochaine ...

 

Mais l’on va retrouver à peu près le même rangement pour tous

  • Un onglet pour l’affichage dans le formulaire

  • Un onglet pour l’affichage dans le contenu

  • Un onglet pour la gestion seo

  • Un onglet pour la gestion du social (lors de partage)

  • Un onglet pour l’affichage du filtrage

 

Donc plus le champ est puissant plus il aura d’option …

 

Les options qui rendent vos champs en mode Super Sayan

Il existe 3 fonctions importantes qui vont changer votre approche lors de la conception de vos sites :

  1. Les valeurs multiples

  2. Les préfixes et suffixes

  3. L'exécution des plugins

1 Quasiment tous les champs valeurs de FLEXIContent ont un mode multiple, cad que vous pouvez donner le droit à un utilisateur de mettre plusieurs valeurs.

On peut choisir le nombre maximum, la position des boutons … l’utilisateur pourra ajouter des valeurs et les ordonner par simple glissé / déposé

 

2 Derrière ce truc tout bête se cache une des fonction les plus sympa à utiliser. Pour chaque champs on peut définir un texte d’ouverture/fermeture et un texte de préfixe/suffixe…

GNNNEEEEEE (je sais je l’ai déjà fait)

Voici un petit schéma

<texte d’ouverture>
	<prefixe>
		valeur1
	<suffixe>
<prefixe>
		valeur2
	<suffixe>
<texte de fermeture>

Vous comprenez mieux ?

 

Cela permet de créer des mises en page dans lesquelles l’utilisateur se concentre uniquement sur les valeurs et nous les gentils concepteurs on s’occupe de tout le reste.

ex :

Le prix : 12 €

texte d’ouverture “le prix :”

valeur on laisse la personne mettre ce qu’elle veut (on peut contraindre le type de valeur)

suffixe ou texte de fermeture “€”

et voilà c’est du tout cuit….

J’ai mis des <>, ce n’est pas anodin vous pouvez utiliser des balises … pratique pour gérer vos styles :

texte d’ouverture <div class=”monbloc”><img …/><span class=”label”>Prix :</span>
préfixe <span class=”bleu”>
suffixe </span>
texte de fermeture </div>

Voila avec ça, l’utilisateur saisit, vous, vous gérer les valeurs et leur affichage !!! C’est pas beau la vie ?!

 

Et alors en 3 c’est le top du top …. vous pouvez utiliser 98% des plugins joomla dans vos champs …..

Là c’est sans limite ….au lieu de taper des {appelplugin}... on les met en préfixe et suffixe et la c’est le pied : vos utilisateurs n’ont plus besoins de retenir des choses complexe ….

Un exemple concret :

Je veux afficher un bouton d’achat hikashop dans mon article flexi …

le plugin fonctionne comme suit  {"product" 14|cart|pricedis3|pricetax1}

  1. je crée un champ liste déroulante

  2. pour les valeurs je fais une requete sql dans la table produit => l’utilisateur choisira son produit dans une liste

  3. en affichage du champs on va activer l'exécution des plugin

  4. en préfixe {product

  5. en suffixe |cart|pricedis3|pricetax1}

  6. en valeur on récupère l’id du produit

et voilà un bon gestionnaire de produits intégré entre flexicontent et hikashop

Afficher les champs

Tatata tu pensais que j’allais tout te donner ???? et non on verra l’affichage dans le prochain numéro

The Late Show With Stephen Colbert sad crying stephen colbert late show

 

Ordonner les champs dans le formulaire de saisie

Allez après cette déception voici un petit tip pour gérer l’ordre de tes champs dans les formulaires.

On va dans la gestion des champs

On filtre par type :

Puis on clique sur “Ordre”

Maintenant on peut changer l’ordre par simple glissé / déposé

Attention ! bien penser à sauvegarder l’ordre :

Le type offre

Pour construire le type offre, j’ai utilisé :

  • 1 champ texte “temps de travail hebdomadaire”

  • 1 champ textselect pour le “type de poste” (pour éviter les double saisie mais resté évolutif pour l’administrateur)

  • 1 champ liste déroulante pour le “type de contrat”

  • 1 champ texte pour le “salaire horaire” avec un masque euro (cela aide la saisie)

  • 1 champ texte “durée de contrat”

  • 1 champ liste déroulante “expérience” (c’est le même champ affecté à plusieur type)

  • 1 champ bouton radio “permis” (c’est le même champ affecté à plusieur type)

  • 1 champ file

  • 1 champ liste déroulante “expérience” (c’est le même champ affecté à plusieur type)

  • 1 champ email (idem c’est le même)

  • 1 champ texte multiple (idem c’est le même)

  • 1 champ relation qui va permettre de lier une offre à une candidature manuellement

  • 1 champ textselect “lieu d’intervention” qui permettra de faire une filtrage de localité

Les champs pour le type candidature

Rien de bien complexe ici, j’ai utilisé :

  • 1 champ texte “téléphone”

  • 1 champ email

  • 1 champ case à cocher “type de permis”

  • 1 champ radio “véhicule”

  • 1 liste déroulante avec les “expériences”

  • 1 champ texte en multiple pour les “diplômes”

  • 1 champ file pour le “CV”

  • et la un champ groupe pour gérer les “disponibilités” … on crée 1 champs texte pour chaque jour, on leur active la fonction groupe

puis on crér un champ groupefield avec les champs jours … hop le tour est joué !

Le type candidature libre

Pour la partie candidature libre j’ai juste dupliqué “candidature” et j’ai ajouté un champ “secteur souhaité”

L'intérêt sera de pouvoir affecter un workflow et des emails de validation différents suivant le gestionnaire du site.

 

Vous voyez vous pouvez facilement faire évoluer vos type de contenus pour obtenir des contenus simples à remplir et où vous pourrez créer de beaux affichages !!!

Y a des intégrateurs qui vont être heureux !

 

life nick jonas good thing

Dans le prochain article nous aborderons les catégories et la puissance des filtres !

A chao !

À propos de l'auteur

yannick berges
Yannick Berges

Passionné du web, du multimédia et de technologies en tout genre, il bichonne des projets web et forme entre autre sur les logiciels open source comme Scribus, The Gimp ou Blender... Il est aussi très impliqué dans le projet Flexi, dont il est le Community manager.

Mon panier

Le panier est vide

Vous aimez lire Cinnk magazine ?

Abonnez-vous !

cinnk-magazine-abonnement-1-an

Envie de rejoindre le projet ?

Vous aimez écrire, vous avez une experience à partager, une expertise à apporter ou encore une vision à exposer et vous souhaitez participer au projet ?

Rejoignez-nous !

Proposer un article

Devenez annonceur

L'équipe de rédaction

Rédacteur en chef
Simon Grange
Rédacteur en chef adjoint
Christian Bardin
Directeur artistique
Vincent Velasco
Sécretaire de rédaction
Sandra Thevenet
Illustration et iconographie
Gaëlle Berguin

Ont participé à ce numéro
Christophe Avonture
Serge Billon
Yannick Berges

Please publish modules in offcanvas position.

Sur ce site, nous utilisons des cookies.