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. Inside your workflow, add the Build Data Table activity.

2. Click DataTable... . The Build Data Table wizard opens.

3. Ajoutez les colonnes souhaitées pour votre table et modifiez leurs propriétés. Assurez-vous que le nom des colonnes ne comporte pas d’espaces ni de caractères spéciaux, car vous utilisez ces noms pour lier les colonnes du formulaire via l’onglet Composant Clé de champ .

   

4. Click OK to save the table.

5. In the Properties panel > Output field of the Build Data Table activity, set a variable name for your table (for example, myTable ).

   Vous utilisez cette variable pour lier la table au formulaire via la propriété CollecteChampsFormulaire 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. Add the Create Form activity in your workflow.

2. In the Properties panel > FormFieldsCollection field, click on the three dots menu (fa-ellipsis-v:) . The FormFieldsCollection wizard opens.

3. Create an argument and link it to the previously created table using the variable (i.e., myTable). Set the argument Direction to In/Out and the Type to DataTable. Give a Name to your argument, for example 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. Open the Form Designer from the Create Form activity.

2. From the Data category, drag and drop a grid component (i.e., Edit Grid and/or Data Grid).

3. Dans l'onglet Clé de champ de votre grille, référencez l' argument de la 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 tableau comporte trois colonnes appelées Column1, Column2 et Column3, faites glisser et déposez trois composants de texte dans votre grille et assurez-vous d'utiliser les noms de colonne du tableau 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 Grille .
2. In the Templates tab > Header Template section, change the default generated code with the following template:

   <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. In the Templates tab > Row Template section, change the default generated code with the following template:

   <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 component.key valeur au nom exact de la colonne, qui est la même que celle utilisée dans l'onglet Clé de champ de chaque composant de texte.
   • 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. Hover over the Edit Grid component and click Edit. The configuration page opens.
2. Navigate to the Templates tab.

   1. Dans le script du 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. Dans le script du modèle de ligne , 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 la 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. Save your component and the form.

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. In the Properties panel > LocalCSSFilePath field of the Create Form activity, reference the previously created CSS file. For example,"/file://C:\User\Desktop\EditColumnWidth.css".
3. In the Data Grid component > Display tab > Custom CSS Class field, enter the name of the CSS class (for example, mygrid).

Exemple de workflow

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