Personnaliser la largeur des colonnes

Les tableaux de votre formulaire ont parfois besoin de colonnes plus larges ou plus étroites, plutôt que de colonnes de même largeur. Vous pouvez définir une largeur personnalisée pour les tables dans les composants Modifier la grille (Edit Grid) et Grille de données (Data Grid).

Tutoriel

Le tutoriel suivant explique comment modifier la largeur de Column3 dans un tableau enregistré sous le nom de myTable.

Création de la table de données

Pour créer une table à utiliser dans votre formulaire :

1. Dans votre workflow, ajoutez l’activité Build Data Table .
2. Cliquez sur TableDonnées... . L'assistant Créer une table de données ( Build Data Table) s'ouvre.

3. Ajoutez les colonnes souhaitées pour votre table et modifiez leurs propriétés.

   Assurez-vous que le nom des colonnes ne contient pas d'espaces ou de caractères spéciaux, car vous utilisez ces noms pour lier les colonnes du formulaire via l'onglet du composant Clé de champ (Field Key ).

   
   

   

   
   
4. Cliquez sur OK pour enregistrer la table.
5. Dans le panneau Propriétés (Properties) > champ Sortie (Output) de l'activité Créer une table de données (Build Data Table ), définissez un nom de variable pour votre table (par exemple, myTable ).

   Vous utilisez cette variable pour lier la table au formulaire via la propriété FormFieldsCollection de l'activité Créer un formulaire .

   
   

   

   
   

Liaison de la table de données à vos composants Form et Grid

Pour lier la table de données à votre formulaire :

1. Ajoutez l'activité Créer un formulaire ( Create Form) dans votre workflow.
2. Dans le panneau Propriétés (Properties) > champ CollecteChampsFormulaires ( FormFieldsCollection ), cliquez sur le menu à trois points (fa-ellipsis-v:) . L'assistant CollectionChampsFormulaires s'ouvre.
3. Créez un argument et liez-le à la table créée précédemment à l'aide de la variable (c'est-à-dire myTable). Définissez l'argument Direction sur In/Out et le Type sur DataTable. Donnez un Nom à votre argument, par exemple table.
   
   

   

   
   

4. Cliquez sur OK.

   Assurez-vous que la case GenerateInputFields est décochée.

Pour lier la table de données au composant Modifier la grille ou Grille de données :

1. Ouvrez le Concepteur de formulaires à partir de l'activité Créer un formulaire (Create Form) .
2. Dans la catégorie Données (Data), glissez-déposez un composant de grille (c'est-à-dire Edit Grid et/ou Data Grid).
3. Dans l'onglet Clé de champ (Field Key) de votre grille, référencez l' argument de table (c'est-à-dire table).

   La valeur Clé de champ est sensible à la casse.

   
   

   

   
   

4. Ajoutez des composants de texte à votre grille pour répliquer les colonnes de votre table. Enregistrez chaque composant de texte.

   Par exemple, si votre table comporte trois colonnes appelées Column1, Column2et Column3, faites glisser et déposez trois composants de texte dans votre grille et assurez-vous d'utiliser les noms de colonnes de la table dans l'onglet Clé de champ des composants .

   La valeur Clé de champ est sensible à la casse.

   
   

   

   
   
5. Enregistrez le formulaire.

Personnalisation de la largeur des colonnes dans Modifier les composants de la grille

Utiliser Bootsrap 3

1. Accédez aux paramètres Modifier le composant de grille ( Edit Grid Component ) .

2. Dans l'onglet Modèles (Templates) > section Modèle d'en- tête , modifiez le code généré par défaut avec le modèle suivant :

   <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
           {% if (component.key=== 'Column3') { %}
                 <div class="col-sm-8">
               {% } %}
               {% if (component.key !== 'Column3') { %}
                 <div class="col-sm-2">
               {% } %}
             {{ component.label }}</div>
           {% } %}
         {% }) %}
       </div>

3. Dans l'onglet Modèles (Templates) > section Modèle de ligne ( Row Template) , modifiez le code généré par défaut avec le modèle suivant :

   <div class="row">
         {% util.eachComponent(components, function(component) { %}
          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
               {% if (component.key=== 'Column3') { %}
                 <div class="col-sm-8">
               {% } %}
               {% if (component.key !== 'Column3') { %}
                 <div class="col-sm-2">
               {% } %}
               {{ getView(component, row[component.key]) }}
             </div>
           {% } %}
         {% }) %}
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <div class="col-sm-2">
             <div class="btn-group pull-right">
               <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
                 <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}
             </div>
           </div>
         {% } %}
       </div>

   Remarque :

   • Notez que vous comparez la valeur component.key au nom exact de la colonne, qui est le même que celui utilisé dans l'onglet Clé de champ ( Field Key) de chaque composant de texte (étape 4 de la liaison de la table de données aux composants Edit Grid ou Data Grid).
   • UiPath Forms utilise le framework Bootstrap 3. La largeur totale du tableau est divisée en 12 sections. Par conséquent, assurez-vous que toute division que vous effectuez donne bien 12. Dans cet exemple, deux colonnes avec la classe col-sm-2 occupent 4 sections, laissant les 8 autres pour la troisième colonne (col-sm-8).

Utilisation de la propriété Style

1. Survolez le composant Modifier la grille (Edit Grid ) et cliquez sur Modifier ( Edit). La page de configuration s'ouvre.

2. Accédez à l'onglet Modèles (Templates).

   2.1. Dans le script Modèle d'en-tête , identifiez toutes les balises <div class="col-sm-2"> et ajoutez votre largeur personnalisée comme suit : style="width:{your_custom_width}px !important". La largeur doit être exprimée en pixels.
   2.2. Dans le script du modèle de ligne ( Row Template) , identifiez toutes les balises <div class="col-sm-2"> et ajoutez votre largeur personnalisée comme suit : style="width:{your_custom_width}px !important". La largeur doit être exprimée en pixels.
   L'élément "col-sm-2" représente la largeur de colonne par défaut. Vous pouvez modifier la largeur de colonne par défaut en ajoutant une balise de style personnalisée. Par exemple, style="width:70px !important" applique une largeur de 70 pixels à toutes les colonnes Modifier la grille .
   
   

   

   
   
   
   

   

   
   
3. Enregistrez votre composant et le formulaire.

Personnalisation de la largeur des colonnes dans les composants de grille de données

1. Créez un fichier CSS local avec les largeurs de colonnes souhaitées. Dans notre exemple, le modèle suivant crée un Column3 plus large (c'est-à-dire nth-child(3)) :

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

2. Dans le panneau Propriétés (Properties) > champ LocalCSSFilePath de l'activité Créer un formulaire ( Create Form) , référencez le fichier CSS précédemment créé. Par exemple,"/file://C:\User\Desktop\EditColumnWidth.css".
3. Dans le composant Grille de données (Data Grid ) > onglet Affichage (Display) > champ Classe CSS personnalisée ( Custom CSS Class ), entrez le nom de la classe CSS (par exemple, mygrid).

Exemple de workflow

Pour vérifier les workflows complets ou pour avoir une future référence, téléchargez les exemples XAML