Personnaliser la largeur des colonnes dans les grilles de données

Ce tutoriel montre comment modifier la largeur de la dernière colonne d'une grille de données.

Prérequis: pour suivre les étapes de ce tutoriel, créez une table de données. Assurez-vous que le contenu de la dernière colonne du tableau est compris entre cinq et six mots.

1. Ajoutez une activité Créer une table de données dans votre workflow.

2. Ouvrez l'assistant Créer une table de données et ajoutez les colonnes souhaitées à votre table.

   Remarque :

   Assurez-vous que les colonnes ne comportent pas d'espaces ni de caractères spéciaux, car vous utiliserez plus tard ces noms pour lier les colonnes du formulaire via Noms de propriété.

3. Enregistrez la table de données dans une variable. Pour cet exemple, vous pouvez le nommer dataTable.

   

4. Ajoutez une Grille de données à votre formulaire et utilisez le nom de la variable de table de données (dataTable) comme Nom de propriété du composant.

5. Ajoutez des composants à la grille de données en fonction des colonnes et de leurs valeurs dans la table de données. Les noms de propriété de ces composants sont les noms exacts des colonnes de la table de données.

   Pour cet exemple, ajoutez trois composants Champ de texte . Utilisez les noms de propriété suivants pour les composants : column1, column2 et column3.

6. Dans le panneau Propriétés du formulaire, saisissez le code suivant dans le champ CSS personnalisé :

   .mygrid tbody>tr>:nth-child(1){ 
   width: 25%;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   

   Remarque :

   L'élément nth-child représente une colonne dans le composant grille.

7. Modifiez le composant Grille de données . Dans l'onglet Affichage , sous CSS personnalisé,saisissez la classe CSS mygrid . Enregistrez le composant et le formulaire. Il en résulte une troisième colonne plus large, dont le contenu dépasse environ cinq à six mots.