Gestion des champs

De Quickform.
<< Gestion des formulaires

Sommaire

Gestion des champs

Pour chacun des formulaires, il vous est possible de créer une liste infinie de champs, d'en définir les autorisations et d'en personnaliser l'aspect, les fonctions et la mise en page.

Voici la barre de menu que vous trouvez dans la section gestion des champs. Cette barre est assez simple de compréhension, mais mérite toute votre attention car elle pourra vous aider avec quelques fonctionnalités que vous ne soupçonnez pas:

  • Nouveau vous permet de créer un nouveau champs
  • Editer vous permet de modifier un champs existant
  • Copier vous permet de copier les paramètres d'un champs
  • Supprimer supprime juste le champ de la table de paramétrage du champ
  • Définitif supprime complètement le champ aussi bien de la table des paramètres que de la table de stockage. Si vous utilisez cette option, attention d'être sûr de vous, car il n'y a aucun recours possible pour récupérer les données saisies et le champ de la table.
  • Reconstruire vous permet d'optimiser et réparer le table de paramétrage et la table de stockage au sens de MYSQL, mais également de mettre à jour tous les champs, et de supprimer les entrées ACL supprimées de la table ACL mais toujours existante dans la gestion des accès de votre champ.
  • Publier vous permet de publier un ou plusieurs champs en même temps
  • Dépublier vous permet de dépublier un ou plusieurs champs en même temps
  • Paramètres vous permet définir les options générales e l'ensemble du composant composant
Important : Ordre des champs
L'ordre des champs dans l'administration est celui qui sera appliqué lors de l'affichage pour l'utilisateur.

Etape de création d'un champ

Afin de créer un champ vous devez respecter les étapes suivantes et dans l'ordre indiqué :

  1. Cliquer sur Nouveau
  2. Donner un Nom en respectant les conventions de nommage des champs
  3. Choisissez dans la liste le type de champ

Convention de nommage des champs

Les règles de définition d'un nom de champ de champ dans QuickForm sont simple, nous vous laissons les définir. Autrement dit vous avez carte blanche, mais nous vous invitons tout de même à observer quelques règles simples afin de rendre pour le plus grand nombre d'entre vous, l'utilisation et le codage des plugins de personnalisation, plus aisé.

  • Champ lié à une table Joomla : core_nomtable_nomduchampdevotrechoix
  • Champ lié à un composant : core_nomducomposant_nomduchampdevotrechoix
  • Champ lié à un autre formulaire : idduformulaire_nomduchampdevotrechoix

Important : un nom de champ ne peut être écrit qu'en minuscule, doit être alphanumérique. Le seul caractère spécial accepté est le _. Pas d'espace.

Liste des champs disponibles

  • Texte (Input)
  • Mot de passe (Password)
  • Zone de texte (Textarea)
  • Liste déroulante (Droplist)
  • Case à cocher multiples(Checkbox)
  • Boutons radio (Radiogroup)
  • Calendrier
  • Texte libre sans saisie
  • Champ caché (Hidden)
  • Zone de saisie interative (WYSIWYG)
  • Chargement de fichier (Upload)
  • Champs de sécurité
  • Boutons
  • Zone d'onglets/accordéon
    • Onglets/accordéons

Description et paramétrage des champs

Généralités

La fenêtre de création/édition des champs est quasiment la même pour tous les champs. Compte tenu du grand nombre de similarités, vous allez dans un premier temps découvrir la présentation des éléments identique quelques soit le champ, puis sera repris chacun des champs ou sera précisé les particularités.

  • Nom du champ
    Est le nom technique du champ, c'est à dire le nom du champ dans la table MYSQL. Il est de valeur unique et doit respecter quelques critères. Lorsque le nom existe déjà ou ne correspond pas, vous retournez à la liste des champs ou un message d'erreur apparait si vous essayez de changer le type de champ et que le nom n'est pas valide.

  • Réactiver un champ orphelin
    Vous permet de réintégrer un champ de la table qui n'est plus paramétré dans QuickForm suite à une suppression. On dit alors que ce champ est orphelin. Pour le réactiver, il suffit de le sélectionner dans la liste et de ne pas le modifier.

  • Type de champ
    Détermine la composition du champ (input, droplist, password,....)

  • Publié
    Vous permet d'afficher ou masquer le champ pour l'utilisateur d'un simple clic

  • Libellé
    Est l'intitulé/label du champ. Il remplace le tag {caption} ou {nomduchamp:caption} lors de la génération du formulaire.

  • Description
    Vous permet d'apporter plus de détails pour faciliter la saisie de l'utilisateur. Il remplace le tag {desc} ou {nomduchamp:desc} lors de la génération du formulaire.

  • Accès
    Vous permet de restreindre la visibilité de ce champ à une liste d'utilisateurs de votre choix. Si l'utilisateur ne fait pas partie de la liste, le champ ne s'affiche pas. Attention, par défaut si un formulaire restreint l'accès aux administrateurs, même si vous donnez accès au champ à tous les utilisateurs, seuls les administrateurs auront accès.

  • Personnalisation du champ
    Vous permet d'ajouter de l'HTML afin de définir l'affichage du champ ou des actions 
class="inputrose" style="width:100%;" onclick="javascript:alert();"
  • Pré-remplir le champ

  • Mise en page de la ligne
    La mise en page d'une ligne est quelque chose de relativement simple. Par défaut, la mise en page est celle des paramètres que vous avez saisis généralement lors de l'installation.
    Si toutefois la mise en page par défaut ne vous convient pas pour ce champ, vous avez la possibilités de personnaliser le code dans cette section. Pour avoir plus de détails lisez la section dédiée ci-dessous.

  • Paramètres de validation avant enregistrement
    La validation des données est importante. Elle vous garantit une certaine sécurité et une certaine mise en forme des données saisies par l'utilisateur. Cette étape est des plus importante pour une bonne sécurité et une bonne gestion des données.
  • Pour réaliser une pré validation en AJAX
    Consulter la rubrique AJAX facile pour QuickForm

  • Requis
    permet de rendre obligatoire la saisie.

  • Type de validation
    Vous permet d'utiliser des fonctions de validations pour vérifier les données soumises. Vous pouvez également ajouter vos propres fonctions de test. Me rappeler comment ajouter des types de validation.

  • Message d'erreur
    Vous permet de personnaliser le message d'erreur par défaut 
Données invalides. Vérifiez que vos données ont bien été saisies, 
mais également que le contenu, le format ou la taille de vos 
données sont bien valide.

Pré-remplissage d'un champ

Vous aurez très certainement envie de pré-remplir vos champs avec des données, ou des listes de données. Pour ce faire QuickForm met à votre disposition une multitude d'outils, aussi bien pour les débutants que pour les experts.

Avec du texte

Méthode la plus simple, vous pouvez tout simplement insérer du texte de votre choix, ou des variables QuickForm afin de pré remplir le champ. Cette méthode est accessible lorsque vous choisissez inscrire des valeurs manuellement (pas de code) dans la liste déroulante.

Exemple Afficher le texte : Ceci est du texte dans votre champ 
Ceci est du texte dans votre champ

Attention : Lorsque vous souhaitez pré-remplir une listbox, un radio, ou une checkbox, la méthode est un peu différente car il faut concilier des items et non plus du texte simple. Vous noterez l'utilisation du & entre valeur, texte et pour pré sélectionner une valeur. Exemple n°1 une liste simple ou la valeur est égale au texte affiché 

Ma valeur 1
Ma valeur 2
ma valeur 3

Exemple n°2 une liste simple ou la valeur est différente au texte affiché 

Ma valeur 1&Ceci est ma valeur 1 affichée
Ma valeur 2&Ceci est ma valeur 2 affichée
ma valeur 3&Ceci est ma valeur 3 affichée

Exemple n°3 une liste simple ou la valeur est égale au texte affiché et la valeur 1, pré sélectionnée 

Ma valeur 1&Ma valeur 1&
Ma valeur 2&Ma valeur 2
ma valeur 3&ma valeur 3

Exemple n°4 une liste simple ou la valeur est différente au texte affiché avec 1 et 2 pré sélectionnés 

Ma valeur 1&Ceci est ma valeur 1 affichée&
Ma valeur 2&Ceci est ma valeur 2 affichée
ma valeur 3&Ceci est ma valeur 3 affichée&

Avec du code PHP

Méthode simple pour qui connait le PHP, il vous est ainsi possible de réaliser n'importe quel code PHP¨, de plus vous avez accès au paramètres de QuickForm en récupérant les valeurs suivantes :

$this->globals[‘nomdutag’]ArrayDéfinition des variables globales
$this->infosArrayParamétrages du formulaires
$this->aclArrayTableau des groupes auxquels appartient l’utilisateur
$this->loadvaluesArrayTableau des valeurs à éditer
$this->postArrayTableau des valeurs postées
$this->replace[‘nomdutag’]ArrayTableau des variables standard
Exemple 1 : Retourner la date de dernière visite de l'utilisateur connecté 
$this->_db->setQuery('SELECT * FROM #__users WHERE id = {$my->id}');
$lastvisite = $this->_db->loadObject();
if(empty($lastvisite)) {
$lastvisite->lastvisitDate = 'Pas de date';
}
return $lastvisite->lastvisitDate;

Exemple 2 : Retourner la variable $data 

$data = 'Ceci est le préremplissage de mon champ';
return $data;

Avec une table, sans code

Vous pouvez aussi sélectionner n'importe quelle table de la liste, définir une clé primaire, définir un champ a afficher, filtrer la table à la recherche d'une ou plusieurs valeurs. pour se faire, il vous suffit, dans la liste de choisir une table est compléter les caractéristiques de la table.

Exemple : Retourner la date de dernière visite de l'utilisateur connecté 
Choisir une table à lier : #__users
Clé primaire : id
Valeur à afficher : lastvisitDate
Ajouter une requête : WHERE id = {$my->id}
Valeur de votre choix (ou code si expert) :

En utilisant cette méthode, vous créez automatiquement un lien, avec la table sélectionnée, ce qui vous permet d'étendre votre table et vous permet, en plus des informations de la table du formulaire sélectionné, d'afficher des informations de la table liée lors du Traitement des résultats.

Avec une table et du code

Pour aller encore plus loin dans la démarche, vous pouvez, si vous le souhaité, lier une table, comme démontré précédemment, mais en ajoutant du code PHP de votre choix. Pourquoi faire cela ? Chose très simple, pour pouvoir modifier un item, pré-sélectionner des items si c'est une liste, ou tout simplement, bénéficiez de la liaison, sous réserve que le résultat du champ soit une valeur de la clé primaire, et afficher un résultat de champ obtenu totalement différemment.

Pour un champ qui n'est pas de type liste, case à cocher, bouton radio

L'objectif dans ce cas précis est de retourner une ou plusieurs valeurs, mais pas sous forme de tableau. 

Choisir une table à lier : #__users
Clé primaire : lastvisitDate
Valeur à afficher : lastvisitDate
Ajouter une requête :
Valeur de votre choix (ou code si expert) : voir code ci-après :

$this->_db->setQuery('SELECT * FROM #__content WHERE id = 3');
$article= $this->_db->loadObject();
if(empty($article)) {
$article->created_by = 0;
}
$this->_db->setQuery('SELECT * FROM #__users WHERE id = '.$article->created_by );
$autor = $this->_db->loadObject();
if(empty($autor)) {
$autor->lastvisitDate = 'No data';
}
return $autor->lastvisitDate;
Cet exemple lie la table par le biai du champ lastvisitDate à votre formulaire, mais lastvisitDate est obtenu différemment qu'en utilisant l'utilisateur connecté. Dans ce cas de figure, on cherche un article de joomla dont l'id est 3, on récupère l'id de l'auteur et avec cet id on recherche sa dernière date de connexion.
Pour un champ qui est une liste, une case à cocher ou un bouton radio

L'objectif dans ce cas précis est de déterminer les valeurs de pré-sélection, ou de retourner un tableau d'une ou plusieurs valeurs et les valeurs pré-selectionnées.

Important : Concernant le codage PHP
La variable servant à stocker les valeurs value et text, est $this->items
Tandis que la variable servant à stocker la liste des valeurs pré-sélectionnées est $this->select
Exemple n°1 utiliser une table pour générer la liste, et définir la pré-sélection 
Choisir une table à lier : #__users
Clé primaire : id
Valeur à afficher : name
Ajouter une requête :
Valeur de votre choix (ou code si expert) : voir code ci-après :

array_push($this->select,$this->items[0]->value);
array_push($this->select,$this->items[5]->value);
array_push($this->select,$this->items[25]->value);
return $this->items;

Cet exemple sélectionne la ligne 0, la ligne 5 et la ligne 25 du tableau généré automatiquement. Et le formulaire est toujours lié à la table users.

Exemple n°2 utiliser une table à lier, et définir la liste et la pré-sélection manuellement 

Choisir une table à lier : #__users
Clé primaire : id
Valeur à afficher : name
Ajouter une requête :
Valeur de votre choix (ou code si expert) : voir code ci-après :

$this->items = array(); // On vide les items existants
$this->_db->setQuery( ' SELECT id, name FROM #__users ' );
$values = $this->_db->loadAssocList();

if(!empty($values)) {
foreach($values as $value) {
$this->items[$i]->value 	= $value['id'];
$this->items[$i]->text 		= $value['name'];
$i++;
}// Foreach	
}//If

<pre>array_push($this->select,$this->items[0]->value);
array_push($this->select,$this->items[5]->value);
array_push($this->select,$this->items[25]->value);
return $this->items;

Cet exemple crée une liste des utilisateurs et sélectionne la ligne 0, la ligne 5 et la ligne 25 du tableau généré automatiquement. Et le formulaire est toujours lié à la table users.

Mise en page d'une ligne de champ

La mise en page d'une ligne est relativement aisée, car elle utilise le paramètre par défaut que vous avez sauvegardé à l'installation du composant ou modifié ultérieurement. Me rappeler les explications

Exemple : Vous aurez très certainement envie de mettre deux champs l'un à côté de l'autre, comme par exemple pour la saisie d'un code_postal et de la ville. En partant du code par défaut, il vous est possible de combiner les deux champs en faisant ceci :

Dans les paramètres du champ code_postal 
<div>
<div style="width:10%; float:left;">
<span class="editlinktip hasTip" title="{caption}::{desc}" />
{caption} {req}</div>
<div style="width:20%; position:relative; float:left;">{body}</div>

Dans les paramètres du champ ville 

<div style="width:20%; float:left;">
<span class="editlinktip hasTip" title="{caption}::{desc}" />
{caption} {req}</div>
<div style="width:49%; position:relative; float:left;">{body}</div>

<div class="clr">{code_postal:error}</div>
<div class="clr">{ville:error}</div>
</div>

Détails pour chaque champ

Important : Avant de commencer
Si vous n'avez pas encore consulté la rubrique Généralités sur les champs, vous êtes priés de vous y référer impérativement. En effet, ceci est indispensable, car ne seront traités ici, que les paramètres particuliers des différents champs. Pour consulter la rubrique,cliquez ici.

Texte (Input) / Mot de passe (Password)

Les champs Texte et Mot de passe, sont des champs de saisie de type input. La différence entre ces deux types est le masquage des lettres par un point gras lors de la saisie pour le champ Mot de passe, ce qui vous confère une relative confidentialité. Ces deux champs vous offrent donc une zone de saisie sur une seule ligne, mais dont vous pouvez paramétrer un certain nombre de choses :
  • La longueur
    Ainsi il vous est possible de rentrer une valeur numérique pour définir une longueur de la zone, en nombre de caractères.
    Important : Longueur et remplissage de Personnalisation du champ
    L'insertion d'HTML pour définir une longueur dans la case Personnalisation du champ prend le dessus sur cette valeur.

  • Minimum de caractères
    Vous pouvez si vous le souhaité fixer un nombre minimal de caractères à saisir. Lors de la soumission des données, si le nombre de caractères est inférieur à votre valeur, un message d'erreur apparaitra. Pour ne pas fixer de limite, laissez à 0.

  • Maximum de caractères
    Vous pouvez si vous le souhaité fixer un nombre maximal de caractères à saisir. Lors de la soumission des données, si le nombre de caractères est supérieur à votre valeur, un message d'erreur apparaitra. Pour ne pas fixer de limite maximale, laissez à 0. Lors de la saisie, si une valeur a été fixé, dans le cadre d'une utilisation normale, le champ n'acceptera pas plus de caractères que sa limite.

Zone de texte (Textarea)

La zone de texte, ou Textarea en HTML, est une zone de saisie pouvant accueillir plusieurs lignes. Il vous est donc possible, si vous n'utilisez pas la Personnalisation du champ pour déterminer la taille de la zone, de remplir ces paramètres :
  • Colonnes
    Vous pouvez définir la largeur de la zone, en nombre de colonnes

  • Nombre de lignes
    Vous pouvez définir la hauteur de la zone, en nombre de colonnes

Liste déroulante (Droplist)

Le pré-remplissage d'une liste déroulante a été abordé précédemment, merci de vous référer à la section appropriée avant de poursuivre, et si vous ne vous souvenez plus comment faire. Les paramètres particuliers d'une liste dans QuickForm, sont :
  • Nb de lignes visibles
    Doit comporter une valeur numérique qui vous permet ainsi d'afficher, 1 seule ligne de la liste utilisant la flèche sur le côté pour découvrir la liste, ou bien plusieurs lignes, définissant ainsi la hauteur de la liste, en ligne, et utilisant un ascenseur pour découvrir les valeurs masquées. Si vous laissez vide, la liste s'affiche en liste 1 ligne, par défaut.
    Important : Nombre de ligne et Personnalisation du champ
    L'insertion d'HTML pour définir une hauteur de la liste dans la case Personnalisation du champ prend le dessus sur cette valeur.

  • Sélection multiple
    Par le biai d'un oui ou non, vous permet d'autoriser, ou non, la sélection de valeurs multiples en maintenant la toucche ctrl appuyée

Case à cocher multiples (Checkbox)

Les cases à cocher sont prévues généralement pour des sélections multiples. Afin de faciliter la mise en page, ils vous est proposé de définir :
  • L'alignement des valeurs
    Vous permet de définir si les valeurs sont listées horizontalement, ou bien, les unes en dessous des autres, verticalement.

Important : Sélection multiple
Sélection multiple n'influe aucunement sur le champ. Il influe en réalité sur le Traitement des résultats. En effet, lié à une table, la sélection multiple vous permet de récupérer un tableau de la table liée, pour les valeurs sélectionnées. En dehors de ce cadre, la sélection multiple ne peut s'appliquer.


Boutons radio (Radiogroup)

Les boutons radio ou cases à cocher rondes sont prévues pour des sélections unique. Afin de faciliter la mise en page, ils vous est proposé de définir :
  • L'alignement des valeurs
    Vous permet de définir si les valeurs sont listées horizontalement, ou bien, les unes en dessous des autres, verticalement.

Calendrier

Le calendrier employé est le calendrier AJAX de Joomla!. Sa mise en page est donc relative à Joomla!, toutefois il vous est possible de définir les éléments suivants :
  • Format de la date
    Vous permet de définir le format de sortie de la date. Pour définir un format de sortie, il vous faut utiliser les constantes PHP (vous renseigner) 
%d/%m/%Y
Vous renvoi la date au format 23/12/2009 par exemple.

Texte libre sans saisie

Le texte libre vous permet d'ajouter une zone de texte ou d'HTML permettant d'ajouter par exemple des longs textes, pour une licence, par exemple, ou des explications sur le formulaire, ou tout autre utilité. Cette zone de texte accepte les variabbles QuickForm.

Champ caché (Hidden)

Le champ caché est identique au champ Texte ou Password, au détail prêt qu'il est non visible pour l'utilisateur. Ce champ peut donc accueillir, des informations, dont l'utilisateur n'a pas besoin d'avoir connaissance. Attention, pour des raisons de sécurité, ne laissé pas d'informations vitales dans un champ de ce type. Récupérer une valeur d'un champ hidden est très aisé.

Zone de saisie interative (WYSIWYG)

Vous permet d'insérer une zone de saisie interactive. Nous vous conseillons JCE pour meilleurs rendu avec les PDF et concernant les mises en pages.

Chargement de fichier (Upload)

Le champ caché est identique au champ Tete ou Password, au détail prêt qu'il est non visible pour l'utilisateur. Ce champ peut donc accueillir, des informations, dont l'utilisateur n'a pas besoin d'avoir connaissance. Attention, pour des raisons de sécurité, ne laissé pas d'informations vitales dans un champ de ce type. Récupérer une valeur d'un champ hidden est très aisé.
  • Type de fichiers autorisés
    Vous permet de faire une liste des extensions de fichiers autorisées. Chaque élément de la liste est séparé par une barre verticale

  • Poids maxi du fichier
    Il vous est possible également de définir le poids maxi du fichier à charger sur le serveur. poids à définir en Octets.

Boutons

Il vous est possible de créer différents types de boutons. Avec différentes fonctions. Vous trouverez ci-dessous leurs liste, ainsi que la façon de les paramétrer :
  • Bouton soumettre
    C'est le bouton par défaut de soumission des données. Vous pouvez lui donner un libellé et le personnaliser, si nécessaire.

  • Bouton effacer
    C'est le bouton par défaut de remise a zéro des données. Vous pouvez lui donner un libellé et le personnaliser, si nécessaire.

  • Bouton normal
    Est le couteau suisse des boutons. vous pouvez lui affecter, mais également des actions sur clic, survol, etc dans Personnalisation du champ

  • Bouton image
    C'est le bouton qui vous permet de mettre une image cliquable et comme le bouton normal de définir des actions sur le clic, survol,... Pour rendre actif un bouton image, il vous suffit de définir le chemin complet d'une image dans le champ chemin 
http://qf.darkoline.com/images/banners/shop-ad.jpg

Zone d'onglets/accordéon

Lorsque vous avez beaucoup de champ, vous avez la possibilité avec QuickForm, de créer des zones d'onglets ou d'accordéon. Vous permettant de regrouper des champs ensemble et d'éviter les scrollbar interminable pour l'utilisateur. Pour créer ces onglets et/ou accordéon, vous devez définir une ouverture de zone et une fermeture de zone. C'est la fonction Zone d'onglets/accordéon.
  • Je veux
    Vous permet d'ouvrir ou fermer une zone. Ce qui sous entends, que vous allez devoir créer un champ d'ouverture. Et un créer un second champ pour la fermeture, à placer à la fin de votre zone.

  • et créer une
    Vous permet de définir si le regroupement des données se fait en onglets ou en accordéon.

Important : Droits d'accès
Ils vous est possible de définir des droits comme pour tous les autres champs.

Onglets/accordéons

Un onglets/accordéon doit toujours être intégré dans une Zone d'onglets/accordéon Une fois votre zone ouverte, vous pouvez enfin insérer vos onglets en répondants à :
  • Je veux
    qui vous donne alors le choix de créer le premier onglet de la zone, un onglets intermédiaire, ou un onglet de fin. pour donner un nom à cet onglets, il vous suffit de remplir le libellé.

Important : Onglets intermédiaires
Ils vous est possible de créer une multitude d'onglets intermédiaires.
Gestion des formulaires >>
Récupérée de « http://quickform.darkoline.com/index.php/Gestion_des_champs »
Navigation
Boîte à outils
Outils personnels