Composants de données

Données

Masqué

You can use the Hidden component to create a resource property that can be custom set inside a form. It doesn't display in rendered forms.

Conteneur

You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance submits as:

{
                    data: {
                    financialPerformance {
                    grossProfitMargin: "0.83",
                    [tab]netProfitMargin: "0.43"
                    }
                    }
                    }

Carte de données

Type de données : System.Collections.Generic.Dictionary<System.String,System.String>

Utilisez le composant Carte de données pour créer des paires clé-valeur. Le composant est modifiable lors du runtime : les utilisateurs peuvent ainsi créer de nouvelles partitions clé-valeur en cliquant sur Ajouter une autre.

Remarque :

Le champ Clé est par défaut un champ de texte et ne peut pas être modifié. Le champ Valeur peut être modifié avec d'autres composants.

• Libellé de la colonne Clé : définissez un libellé à afficher pour la colonne Clé . S'il est laissé vide, le nom de la colonne restera sous la forme Clé.
• Désactiver l'ajout/la suppression de lignes : masque les boutons qui permettent d'ajouter ou de supprimer des lignes lorsque le formulaire s'affiche.
• Afficher la colonne Clé avant la valeur : indiquez si vous souhaitez que la colonne Clé s'affiche avant la colonne Valeur .
• Ajouter un autre texte : définissez le texte à afficher pour le bouton Ajouter un autre .

L'onglet Mise en page est spécifique uniquement au composant Carte de données :

• Attributs HTML - ajoutez des attributs HTML personnalisés au composant.
  Remarque :

  Les attributs des autres composants contrôlent les attributs que vous configurez.

• Superposition de PDF : appliquez les paramètres de style aux formulaires PDF.

Pour apprendre à utiliser le composant Carte de données , consultez le Tutoriel Utiliser le composant Carte de données.

Grille de données

You can use the Data Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple components in the Data Grid to match your use case.

In the Form Renderer window, the rows inside the Data Grid component can be added or removed.

• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Allow Reorder - reorder rows by dragging and dropping them.
• Equal Column Width - makes the widths of columns equal.
• Enable Row Groups - allows separating rows into groups. Add groups, label them, and select the rows for each group.
• Initialize Empty - the Data Grid will have no visible rows when initialized.

Modifier la grille

You can use the Edit Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple form components into the Edit Grid, to capture loads of data.

When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.

• Open First Row when Empty - opens the first row when the Edit Grid is empty.
• Désactiver l'ajout/la suppression de lignes : masque les boutons qui permettent d'ajouter ou de supprimer des lignes lorsque le formulaire s'affiche.
• Add Another Text - changes the name of the Add Another button.
• Save Row Text - changes the text of the Save Row button.
• Remove Row Text - changes the text of the Remove Row button.

L'onglet Modèles est uniquement spécifique au composant Modifier la grille . Les modèles d'en-tête,de ligne et de pied de page vous permettent de personnaliser la grille à l'aide de JavaScript. Vous pouvez modifier le type de composants qui s'affichent dans les lignes d'une grille ou l'apparence de l'en-tête/ pieds de page.

Modèle d'en-tête

This is the Lodash Template used to render the header of the Edit Grid component.

Important :

Le modèle d'en-tête ne fonctionne pas avec les actions de formulaire.

Deux variables sont disponibles :

• value - the array of row data.
• components - the array of components in the grid.

Modèle de ligne

This is the Lodash Template used to render each row of the Edit Grid component.

Important :

Le modèle de ligne ne fonctionne pas avec les actions de formulaire.

Trois variables sont disponibles :

• row - object of one row's data.
• components - the array of components in the grid.
• state - current row's state (draft/saved).

To add Click type events, add the following classes to elements: editRow and removeRow.

Modèle de pied de page

This is the Lodash Template used to render the footer of the Edit Grid component.

Deux variables sont disponibles :

• value - the array of row data.
• components - the array of components in the grid.

Table de données

Vous pouvez utiliser le composant Table de données pour restituer plusieurs lignes de données, comme dans le cas d'une table de données. TableDonnées est un composant en lecture seule que vous pouvez utiliser pour afficher de grandes quantités de données. Vous pouvez faire glisser et déposer plusieurs composants de formulaire dans le composant Table de données .

• Triable : trie les données à l'intérieur des colonnes par ordre croissant ou décroissant. Vous triez les données au moment du runtime.
• Filtrable : filtrez les données à l'intérieur de chaque colonne. Filtrez les données au moment du runtime.
• Colonne(s) redimensionnable(s) : modifiez la largeur des colonnes lors du runtime. La fonctionnalité Colonne(s) redimensionnable vous permet de mieux voir les données à l'intérieur des colonnes.
• Pagination : affiche les données du composant Table de données sur des pages numérotées. La capacité de pagination comprend également la définition du nombre d'éléments par page.
• Modification en ligne : autorise la modification au moment de l'exécution, de la même manière que vous le feriez dans Excel.

Triable

Vous pouvez trier les données à l'intérieur des colonnes par ordre croissant ou décroissant. Vous triez les données au moment du Runtime, dans le formulaire.

Les données de la table de données s'affichent dans le même ordre que dans la table de données d'entrée. Pour trier toutes les données de la table de données, cliquez sur n'importe quel en-tête de colonne du formulaire.

• First click sorts the data in ascending order.

• Second click sorts the data in descending order.

• Third click restores the original order.

  

Filtrable

Vous pouvez filtrer les données à l'intérieur de chaque colonne. Vous pouvez filtrer les données pendant l'affichage du formulaire.

Pour filtrer les données d'une colonne :

1. Survolez l'en-tête de la colonne et cliquez sur la barre de triple. menu.
2. Choisissez une opération de filtrage.
3. Input a value in the Filter field of the triple bar menu. The input value in the Filter field is a condition for the filtering operation.

En fonction du type de données, les opérations de filtrage suivantes sont disponibles :

Opération de filtrage	Texte	Numérique	Date/Heure
Contient	✅	❌	❌
Ne contient pas	✅	❌	❌
Est égal à	✅	✅	✅
Est différent de	✅	✅	✅
Commence par	✅	❌	❌
Se termine par	✅	❌	❌
inférieure à	❌	✅	✅
Inférieur ou égal à	❌	✅	❌
supérieure à	❌	✅	✅
Supérieur ou égal à	❌	✅	❌
Dans la plage	❌	✅	✅
Blanc	✅	✅	✅
Non vide	✅	✅	✅