Personnaliser la largeur des colonnes dans Modifier les grilles

Ce tutoriel montre comment modifier la largeur de la dernière colonne dans une Grille de modification ( Edit Grid).

Prérequis: pour suivre les étapes de ce tutoriel, créez une table de données. Assurez-vous que la dernière colonne du tableau comporte un contenu dépassant cinq à six mots environ.

1. Ajoutez une activité Créer une table de données (Build Data Table) dans votre workflow.
2. Ouvrez l'assistant Créer une table de données (Build Data Table) et ajoutez les colonnes souhaitées à votre table.
   Remarque : assurez-vous que les colonnes ne comportent pas d'espaces ou de caractères spéciaux, car vous utiliserez ultérieurement ces noms pour lier les colonnes du formulaire via les noms de propriété.
3. Enregistrez la table de données dans une variable. Pour cet exemple, vous pouvez le nommer dataTable.
   
   

   

   
   

1. Ajoutez une grille de modification dans votre formulaire et utilisez le nom de la variable de table de données (dataTable) comme nom de propriété du composant.
2. Ajoutez des composants dans Modifier la grille ( Edit Grid), 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 (Text Field ). Utilisez les noms de propriété suivants pour les composants : column1, column2et column3.
3. Accédez aux paramètres du composant Modifier la grille ( Edit Grid ), dans l'onglet Modèles (Templates). Vous pouvez choisir de modifier la largeur de la colonne à l'aide de l'amorçage 3 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 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>

     2. Dans la 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>

     Astuce :

     • Notez que vous comparez la valeur component.key au nom exact de la colonne, qui est le même que celui utilisé 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).
   • En utilisant 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 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 .
4. Enregistrez le composant et la fiche.