Personnalisation des modèles de grille

Ce tutoriel vous aide à personnaliser les modèles d'en-tête et de ligne d'une grille d'édition pour améliorer son apparence visuelle. Vous apprendrez à étendre la largeur d'une colonne spécifique et à y appliquer une classe CSS bg-success .

Prerequisites:

• Installez Persistence.Activities version 1.4.8 ou supérieure.
• Sélectionnez Formulaires avancés pour l’activité Créer une tâche de formulaire .

Tutoriel

1. Accédez à l'onglet Modèles de l' activité Modifier la Grille.

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. 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 dans l’ activité Modifier la grille. 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 il a été remplacé component par components[0], afin que nous puissions identifier les colonnes par leur numéro d’index. Nous avons dupliqué cette ligne pour chaque colonne dans l’ activité Modifier la grille. 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 développent la largeur de la colonne désignée et appliquent la classe bg-success , en faisant que la colonne occupent 60 % de l’espace de l’ activité Modifier la grille et lui donne un fond vert.

Exemple de workflow

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