Show Menu
SUJETS×

Tableaux dans les formulaires adaptatifs

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 Tableau dans l’explorateur de composants de la barre latérale permettant 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 Tableau à partir de l’explorateur de composants du panneau latéral d’un formulaire adaptatif. Par défaut, le tableau contient deux colonnes et trois lignes, dont la ligne d’en-tête.

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

Les cellules d’en-tête sont des zones de texte. 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 sur Modifier . Dans la boîte de dialogue Modifier, 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 cliquant 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 et déplacement de lignes et de colonnes

Vous pouvez ajouter et supprimer une ligne ou une colonne, ou encore 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.
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.

Ajouter une description de tableau

Vous pouvez ajouter une description au tableau pour expliquer comment il organise les informations que les lecteurs peuvent interpréter et lire. Pour ajouter la description :
  1. Select the table and tap to see its properties in the sidebar.
  2. Spécifiez le résumé dans l’onglet Accessibilité.
  3. Cliquez sur Terminé .

Tri des colonnes d’un tableau

Vous pouvez trier les données en fonction de n’importe quelle colonne d’un tableau dans le formulaire adaptatif. Les valeurs de la colonne peuvent être triées par ordre croissant ou décroissant.
Le tri peut être appliqué aux colonnes du tableau contenant :
  • Texte statique
  • Propriétés de l’objet de modèle de données
  • Combinaison de texte statique et de propriétés d’objet de modèle de données
Pour appliquer le tri sur les colonnes du tableau, les cellules des colonnes du tableau doivent contenir l’un des composants suivants : Zone numérique, Procédure pas à pas numérique, champ de saisie de date, sélecteur de date, texte ou zone de texte.
Pour activer le tri :
  1. Sélectionnez le tableau et appuyez sur (Configurer). Vous pouvez également sélectionner le tableau à l’aide de l’explorateur de contenu dans le panneau latéral de la communication interactive.
  2. Sélectionnez Activer le tri .
  3. Tap to save the table properties. Les icônes de tri, les flèches vers le haut et vers le bas, dans les en-têtes de colonnes, indiquent que le tri a été activé.
  4. Passez en mode Prévisualisation à la vue de la sortie. Le tableau est automatiquement trié en fonction de la première colonne du tableau.
  5. Cliquez sur l’en-tête de colonne pour trier les valeurs en fonction de la colonne.
    Un en-tête de colonne avec une flèche vers le haut indique que le tableau est trié en fonction de cette colonne. En outre, les valeurs de la colonne s’affichent dans l’ordre croissant.
    De même, un en-tête de colonne avec une flèche vers le bas représente que les valeurs de la colonne sont affichées dans l’ordre décroissant.
    Vous pouvez également apporter des modifications au tableau en mode Prévisualisation et cliquer de nouveau sur l’en-tête de colonne pour trier les valeurs de colonne.

Configuration du style de tableau

Vous pouvez définir le style d’un tableau à l’aide du mode Style dans la barre d’outils de la page. Exécutez les étapes suivantes pour passer en mode Style et modifier le style du tableau.
  1. In the page toolbar, before Preview, tap > Style .
  2. In the sidebar select table and tap the edit button . Vous pouvez afficher les propriétés de style dans la barre latérale.
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 Thèmes dans AEM Forms Création de thèmes de formulaires adaptatifs 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. Select a table row and tap .
  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 Terminé .
Lors de l’exécution, vous verrez les boutons + et - pour ajouter ou supprimer une ligne.
L’ajout ou la suppression dynamique d’une ligne n’est pas prise en charge dans les en-têtes à gauche de la disposition des tableaux mobiles.

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 la modification de la valeur d’un champ.
Si le script de modification/édition XFA est également appliqué au même champ, il s’exécute avant le script de validation de valeur.
  • 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 la référence d’API de bibliothèque JavaScript pour les formulaires adaptatifs.

Dispositions pour appareils mobiles

Les tableaux des formulaires adaptatifs fournissent une expérience sans précédent pour les périphériques mobiles en raison de leurs dispositions fluides et réactives. aem forms offre deux types de dispositions mobiles pour les tableaux : 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 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.
Bien que la disposition Colonnes réductibles soit optimisée pour les périphériques mobiles, elle fonctionne également sur le bureau, si la largeur disponible ne suffit pas à 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>

In the sample XML, the data for a row is defined by the <Row1> tags, which is the element name for the row in the table. Within the <Row1> tag, the data for each cell is defined within the tag for its element name, such as <tableItem1> , <tableItem2> , <tableItem3> , and <type> .
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é. For example, if the adaptive form is at https://localhost:4502/myForms/bankTransaction.html and the data XML file is saved at C:/myTransactions/bankSummary.xml , you can view the table with data at the following URL:
https://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.
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.
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.