Personnalisation des modèles de grille

Ce tutoriel vous aide à personnaliser les modèles En-tête et Ligne d'une activité Modifier la grille ( Edit Grid ) pour améliorer son affichage visuel. Vous apprendrez à étendre la largeur d'une colonne spécifique et à lui appliquer une classe CSS bg-success .

Prérequis :

1. Installez Persistence.Activities version 1.4.8 ou supérieure.
2. Sélectionnez Formulaires avancés ( Advanced Forms ) pour l'activité Créer une tâche de formulaire (Create Form Task) .

1. Accédez à l'onglet Modèles de l'activité Modifier la grille ( Edit Grid).
2. Dans le modèle d'en-tête , remplacez le contenu par l'extrait de code ci-dessous :

   <div class="row">
         <div class="col-sm-2">{{ components[0].label }}</div>
         <div class="col-sm-6 bg-success">{{ components[1].label }}</div>
         <div class="col-sm-2">{{ components[2].label }}</div>
   </div>

   Dans l'extrait de code, nous avons modifié la ligne <div class="col-sm-2">{{ component.label }}</div> pour représenter la première colonne de l'activité Modifier la grille ( Edit Grid). Nous avons remplacé component par components[0], afin de pouvoir identifier les colonnes par leurs numéros d'index. Nous avons dupliqué cette ligne pour chaque colonne de l' activité Edit Grid. Nous avons ensuite ajouté la classe bg-success au composant souhaité et changé la classe col-sm-2 en col-sm-6 pour une apparence plus large.
3. Dans le modèle de ligne , remplacez le contenu par l'extrait de code ci-dessous :

   <div class="row">
             <div class="col-sm-2">
               {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}}
             </div>
           <div class="col-sm-6 bg-success">
             {{ isVisibleInRow(components[1]) ? getView(components[1], row[components[1].key]) : ''}}
             <div class="col-sm-2">
             {{ isVisibleInRow(components[2]) ? getView(components[2], row[components[2].key]) : ''}}
            
           <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
             <div class="col-sm-2">
               {{ isVisibleInRow(component) ? 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>

   Dans l'extrait de code, nous avons mis à jour la ligne <div class="col-sm-2" {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}} </div> pour représenter la première colonne. Puis, component a été remplacé par components[0], afin que nous puissions identifier les colonnes par leur numéro d'index. Nous avons dupliqué cette ligne pour chaque colonne de l' activité Edit Grid. Ensuite, pour la même colonne que nous avons modifiée dans le modèle d'en-tête , nous avons changé la classe col-sm-2 en col-sm-6 et ajouté la classe bg-success dans le modèle de ligne.
   
   

   

   
   

Ces étapes permettent d'augmenter la largeur de la colonne désignée et d'appliquer la classe bg-success , en faisant occuper par la colonne 60 % de l'espace de l'activité Modifier la grille ( Edit Grid) et en lui attribuant un fond vert.

Exemple de workflow

Pour suivre les étapes et essayer ce tutoriel vous-même, téléchargez l'exemple de workflow ici.