L’utilisation des tableaux est un moyen efficace, simplifié et organisé de présenter des données complexes. Cela permet aux utilisateurs d’identifier facilement les informations et leur fournit des données organisées sous forme de lignes et de colonnes. La plupart des formulaires des services financiers et des agences gouvernementales requièrent des tableaux de données volumineux pour saisir des données numériques et effectuer des calculs.

AEM forms fournit un composant de tableau dans le panneau latéral AEM qui vous permet de créer des tableaux dans les formulaires adaptatifs. Voici quelques-unes des capacités clés fournies :

  • Disposition réactive sur périphériques mobiles
  • Lignes et colonnes configurables
  • Ajout et suppression dynamiques de lignes à l’exécution
  • Combinaison ou fusion et fractionnement de cellules
  • Accessibilité par les lecteurs d’écran
  • Disposition personnalisée à l’aide de CSS
  • Compatibilité et mappage avec un composant de tableau XDP
  • Prise en charge de l’ajout de lignes ou de cellules à l’aide d’éléments complexes de type XSD
  • Fusion des données à partir d’un fichier XML

Création d’un tableau

Pour créer un tableau, faites glisser un composant de tableau à partir du panneau latéral AEM dans un formulaire adaptatif. Par défaut, le tableau contient deux colonnes et trois lignes, dont la ligne d’en-tête.

Composant du tableau dans le panneau latéral AEM

A propos de l’en-tête et des cellules du corps

Les cellules d’en-tête sont des zones de texte statiques. Pour modifier le libellé d’un en-tête, cliquez avec le bouton droit de la souris sur la cellule d’en-tête puis surModifier. Dans la boîte de dialogue Modifier un texte statique, mettez à jour le libellé dans le champ Valeur et cliquez sur OK.

Les cellules du corps sont par défaut des zones de texte. Vous pouvez remplacer une cellule de corps par un autre composant de formulaire adaptatif disponible dans le panneau latéral, tel qu’une zone numérique, un sélecteur de date, ou une liste déroulante.

Par exemple, la première rangée du corps du tableau ci-dessous inclut les composants zone de texte, sélecteur de dates, et liste déroulante comme cellules.

Vous pouvez fusionner deux cellules du corps ou plus en sélectionnant les cellules que vous souhaitez fusionner, puis en cliquez avec le bouton droit et en choisissant la commande Fusionner. Vous pouvez aussi diviser une cellule fusionnée en cliquant sur celle-ci et en sélectionnant Fractionner les cellules.

Ajout, suppression, déplacement de lignes et de colonnes

Vous pouvez ajouter et supprimer une ligne ou une colonne, et déplacer une ligne vers le haut et vers le bas dans un tableau.

Pour ajouter ou supprimer une ligne ou une colonne ou déplacer une ligne, cliquez sur une cellule dans une ligne ou une colonne. Un menu contextuel s’affiche en haut de la colonne et à gauche de la ligne. Le menu de la partie supérieure fournit des options permettant d’ajouter ou de supprimer la colonne, alors que le menu de gauche permet d’ajouter, de supprimer ou de déplacer la ligne.

  • L’opération Ajouter ajoute une ligne au-dessous ou une colonne à droite de la ligne ou de la colonne sélectionnée.
  • L’opération Supprimer permet de supprimer la ligne ou la colonne sélectionnée.
  • L’opération Déplacer permet de déplacer la ligne sélectionnée vers le haut et vers le bas.

Le menu déroulant pour la ligne propose également l’opération Modifier pour modifier les propriétés, les paramètres et les options de style de la ligne.

Remarque :

Alors qu’il est possible d’ajouter un nombre quelconque de lignes à un tableau, le nombre maximal de colonnes que vous pouvez ajouter est de six. En outre, vous ne pouvez pas supprimer la ligne d’en-tête du tableau.

Ajout d’un résumé du tableau pour l’accessibilité

Vous pouvez ajouter une description du tableau pour expliquer comment il organise les informations que les lecteurs d’écran peuvent interpréter et lire. Pour ajouter la description :

  1. Cliquez sur Modifier pour ouvrir la boîte de dialogue Modifier le composant, correspondant au tableau.
  2. Dans l’onglet Accessibilité, entrez une description du résumé dans le champ Résumé.
  3. Cliquez sur OK.

Configuration du style de tableau

Vous pouvez définir le style d’un tableau à l’aide de l’onglet Style de la boîte de dialogue Modifier le composant du composant Tableau.

Dans l’onglet Style, vous pouvez spécifier les propriétés suivantes pour un tableau :

Largeur : indique la largeur du tableau, en pourcentage, par rapport à la largeur totale disponible pour le tableau dans le conteneur parent.

Hauteur : spécifie la hauteur maximale, en pixels, pour le tableau.

Classe CSS : spécifie une classe CSS pour appliquer un style personnalisé à un tableau.

Disposition pour appareil mobile : spécifie comment un tableau doit apparaître sur un périphérique mobile. Les options disponibles sont En-têtes à gauche et Colonnes réductibles. Pour plus d’informations, voir Dispositions d’un tableau pour appareil mobile.

Largeur de colonne : spécifie la largeur proportionnelle de chaque colonne dans un tableau sous forme de liste séparée par des virgules. Par exemple, si vous définissez 1,2,3,4 comme largeur de colonne d’un tableau de quatre colonnes, la largeur totale du tableau est distribuée comme ainsi : 1/10, 2/10, 3/10, et 4/10 entre les première, deuxième, troisième et quatrième colonnes, respectivement.

Remarque :

Vous pouvez modifier le thème de couleur de l’en-tête et des lignes de corps en modifiant les valeurs des variables LESS. Pour plus d’informations, voir Mise en forme des éléments pour les formulaires adaptatifs et Création de thèmes de formulaire adaptatif personnalisés.

Ajout ou suppression dynamique d’une ligne

Les tableaux fournissent une assistance prête à l’emploi pour l’ajout ou la suppression dynamique de lignes au moment de l’exécution.

  1. Cliquez sur n’importe quelle cellule de corps dans une ligne de tableau et cliquez surModifier dans le menu déroulant.

  2. Dans l’onglet Paramètres de répétition, spécifiez les valeurs minimale et maximale pour limiter le nombre de lignes du tableau.

  3. Cliquez sur OK.

Lors de l’exécution, vous verrez les boutons + et - pour ajouter ou supprimer une ligne.

Remarque :

L’ajout ou la suppression dynamique d’une ligne n’est pas prise en charge dans les en-têtes à gauche disposition mobile de tableaux.

Expressions dans un tableau

Les tableaux des formulaires adaptatifs permettent d’écrire des expressions en JavaScript pour induire des comportements, tels qu’afficher ou masquer un tableau ou une ligne, ajouter tous les nombres et afficher le total dans une cellule, activer ou désactiver une cellule, valider une entrée utilisateur, etc. Ces expressions utilisent le modèle de script API des formulaires adaptatifs.              

Alors que les tableaux et les lignes ne prennent en charge que les expressions de visibilité pour contrôler leur visibilité en fonction de la valeur renvoyée par une expression, les cellules prennent en charge les expressions suivantes :

  • Script d’initialisation : pour effectuer une action à l’initialisation d’un champ.
  • Script de validation de valeur : pour modifier les composants d’un formulaire après modification de la valeur d’un champ.
  • Expressions de calcul : pour calculer automatiquement la valeur d’un champ.
  • Expressions de validation : pour valider un champ.
  • Expressions d’accès : pour activer/désactiver un champ.
  • Expression de visibilité : pour contrôler la visibilité d’un champ et d’un panneau.

L’expression de visibilité d’un tableau ou d’une ligne peut être définie dans l’onglet Propriétés du panneau de la boîte de dialogue Modifier le composant correspondant. Les expressions pour une cellule peuvent être définies dans l’onglet Script de la boîte de dialogue Modifier le composant correspondant.

Pour obtenir la liste complète des classes de formulaires adaptatifs, des événements, des objets et des API publiques, consultez Référence à l’API de la bibliothèque JavaScript pour les formulaires adaptatifs.

Dispositions pour appareils mobiles

Les tableaux des formulaires adaptatifs fournissent une expérience sans précédent des périphériques mobiles en raison de leurs dispositions fluides et réactives. AEM forms offre deux types de dispositions des tableaux pour les périphériques mobiles - En-têtes à gauche et Colonnes réductibles.

Vous pouvez configurer une disposition de tableau pour périphériques mobiles depuis l’onglet Style de la boîte de dialogue Modifier le composant.

Disposition En-têtes à gauche

Dans la disposition En-têtes à gauche, les en-têtes du tableau sont transposés à gauche. Une seule cellule apparaît pour un en-tête. Chaque ligne dans cette disposition s’affiche en tant que partie distincte. Les images suivantes comparent un tableau sur un bureau et le même tableau sur un périphérique mobile.

Vue Bureau d’un tableau avec disposition En-têtes à gauche
Vue Bureau d’un tableau avec disposition En-têtes à gauche

Vue Mobile d’un tableau avec disposition En-têtes à gauche
Vue Mobile d’un tableau avec disposition En-têtes à gauche

Disposition Colonnes réductibles

Dans la disposition Colonnes réductibles, les colonnes du tableau sont réduites pour afficher une ou deux colonnes, selon la taille du périphérique. Les autres colonnes sont réduites. Vous pouvez cliquer sur l’icône Réduire/Développer pour afficher les autres colonnes de la table.

Remarque : alors que la disposition Colonne réductible est optimisée pour les périphériques mobiles, elle fonctionne également sur le bureau, si la largeur disponible est insuffisante pour afficher toutes les colonnes d’un tableau.  

Les images suivantes comparent l’aspect d’un tableau affiché sur un périphérique, l’un comportant des colonnes réduites, l’autre les affichant développées.

Colonnes réduites d’un tableau comportant uniquement deux colonnes, apparaissant sur un périphérique mobile

Colonne développée d’un tableau sur un périphérique mobile

Fusion de données dans un tableau

Les tableaux des formulaires adaptatifs permettent de renseigner le tableau lors de l’exécution avec des données provenant d’un fichier XML. Le fichier XML de données peut résider dans le système de fichiers local de l’ordinateur sur lequel le serveur AEM forms est exécuté ou dans le référentiel CRX.

Prenons l’exemple du tableau récapitulatif de transaction bancaire suivant, que nous voulons renseigner avec des données provenant d’un fichier XML.

Dans cet exemple, la propriété Nom d’élément pour :

  • la ligne est Row1
  • la cellule de corps sous Date de transaction est tableItem1
  • la cellule de corps sous Description est tableItem2
  • la cellule de corps sous Type de transaction est type
  • la cellule de corps sous Montant en euros est tableItem3

Le fichier XML contenant les données au format suivant :

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
	<typeSelect>0</typeSelect>
	<Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Purchase laptop</tableItem2>
      <type>0</type>
      <tableItem3>12000</tableItem3>
	</Row1>
	<Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Transport expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
	</Row1>
	<Row1>
      <tableItem1>2014-01-08</tableItem1>
      <tableItem2>Laser printer</tableItem2>
      <type>0</type>
      <tableItem3>500</tableItem3>
	</Row1>
	<Row1>
      <tableItem1>2014-12-08</tableItem1>
      <tableItem2>Credit card payment</tableItem2>
      <type>0</type>
      <tableItem3>300</tableItem3>
	</Row1>
	<Row1>
      <tableItem1>2015-01-06</tableItem1>
      <tableItem2>Interest earnings</tableItem2>
      <type>1</type>
      <tableItem3>12000</tableItem3>
	</Row1>
	<Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Payment from a client</tableItem2>
      <type>1</type>
      <tableItem3>500</tableItem3>
	</Row1>
	<Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Food expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
	</Row1>
	</data>
  </afUnboundData>
  <afBoundData>
    <data/>
  </afBoundData>
  <afBoundData/>
</afData>

Dans l’exemple XML, les données d’une ligne sont définies par les balises , qui est le nom d’élément de la ligne du tableau. Dans la balise , les données de chaque cellule sont définies dans la balise pour son nom d’élément, tel que , , et .

Pour les fusionner dans le tableau au moment de l’exécution, vous devez indiquer le formulaire adaptatif contenant le tableau à l’emplacement XML absolu avec le mode WCM désactivé. Par exemple, si le formulaire adaptatif se trouve sous http://localhost:4502/myForms/bankTransaction.html et que le fichier de données XML est enregistré sousC:/myTransactions/bankSummary.xml, vous pouvez afficher le tableau avec des données à l’adresse URL suivante :

http://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled 

Utilisation des composants XDP et des types complexes de schéma XSD

Si vous avez créé un formulaire adaptatif en fonction d’un modèle de formulaire XFA, les éléments XFA sont disponibles dans l’onglet Modèle de données de l’outil de recherche de contenu AEM. Vous pouvez faire glisser ces éléments XFA, notamment des tableaux, dans le formulaire adaptatif.

L’élément de tableau XFA est mappé sur le composant Tableau et fonctionne dans les formulaires adaptatifs prêts à l’emploi. Toutes les propriétés et fonctionnalités de tableau XDP sont conservées lors du déplacement dans le formulaire adaptatif, et vous pouvez effectuer n’importe quelle opération sur celui-ci comme vous le feriez avec le tableau natif du formulaire adaptatif. Par exemple, si une ligne dans un tableau XDP est marquée comme pouvant être répétée, elle sera répétée dans les formulaires adaptatifs également.

En outre, vous pouvez faire glisser et déposer le sous-formulaire XDP pour ajouter une nouvelle ligne au tableau. Toutefois, notez que déposer un sous-formulaire imbriqué ne fonctionne pas.

Remarque :

Un tableau XDP sans ligne d’en-tête ne sera pas mappé au composant Tableau de formulaire adaptatif. Au lieu de cela, il sera mappé sur le composant Panneau de formulaire adaptatif ayant une disposition fluide. En outre, lorsque vous ajoutez un tableau imbriqué XDP à un formulaire adaptatif, le tableau externe est converti en panneau tout en conservant le tableau interne.

Vous pouvez aussi faire glisser et déposer un groupe d’éléments de type complexe XSD pour créer une ligne de tableau. Une nouvelle ligne est créée sous la ligne sur laquelle vous avez déposé les éléments. Les cellules créées avec des éléments de type complexe XSD conservent une référence de liaison au schéma XSD. Vous pouvez également remplacer une cellule de corps par un élément de type complexe XSD en déposant l’élément sur la cellule.

Remarque :

Le nombre d’éléments dans un composant de tableau XDP, un sous-formulaire, ou un type complexe XSD ne peut pas dépasser le nombre de cellules dans une ligne. Par exemple, vous ne pouvez pas faire glisser quatre éléments sur une ligne qui n’a que trois cellules. Cela provoquera une erreur.

Si le nombre d’éléments est inférieur au nombre de cellules dans une ligne, la nouvelle ligne ajoute d’abord les cellules en fonction des éléments, puis les cellules par défaut sont ajoutées pour remplir les autres cellules de la ligne. Par exemple, si vous déposez un groupe de trois éléments dans une ligne qui comporte quatre cellules, les trois premières cellules sont basées sur les éléments déposés et la cellule restante sera la cellule de tableau par défaut.

Considérations principales

  • Si vous déplacez des lignes vers le haut et vers le bas tout en créant un tableau à partir d’un schéma XSD, une perte de données des lignes du tableau est visible dans les données XML générées lors de l’envoi du formulaire.
  • Dans un tableau par défaut, chaque cellule de contenu est associée à un nom d’élément prédéfini. Si vous ajoutez un autre tableau dans le formulaire adaptatif, les cellules de contenu par défaut du nouveau tableau auront le même nom d’élément que dans le premier. Dans ce cas, les données générées lors de l’envoi du formulaire comprennent uniquement les données des cellules de contenu par défaut de l’un des tableaux. Par conséquent, assurez-vous que vous renommez les noms d’élément pour les cellules de contenu par défaut pour qu'elles restent uniques et éviter toute perte de données.

    Notez que cela s’applique uniquement aux cellules de contenu par défaut. Si vous ajoutez d'autres lignes ou colonnes à un tableau, des noms d'éléments uniques seront générés automatiquement pour les cellules de contenu non définies par défaut.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne