Personnaliser la largeur des colonnes dans Modifier les grilles

Ce tutoriel montre comment modifier la largeur de la dernière colonne dans une activité Modifier la Grille.

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 dépasse, environ, cinq à 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 activité Modifier la grille à 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 d'édition, 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. Accédez aux paramètres du composant Modifier la grille dans l'onglet Modèles . Vous pouvez choisir de modifier la largeur de la colonne à l'aide de utilisateur de généré ou de la propriété CSS style .

   • Utilisation de l'amorçage 3
     1. Dans la section Modèle d'en-tête , modifiez le code généré par défaut à l'aide du 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>
        

     2. Dans la section Modèle de ligne , modifiez le code généré par défaut à l'aide du 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>
        

     Astuce :

     • Notez que vous comparez la valeur component.key au nom exact de la colonne, qui est la même que celle utilisée comme nom de propriété 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. 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 .

7. Enregistrez le composant et la fiche.