Anpassen von Bearbeitungsrastervorlagen

Mit diesem Tutorial können Sie die Header- und Zeilenvorlagen eines Bearbeitungsrasters anpassen, um ihn visuell ansprechend zu gestalten. Sie erfahren, wie Sie die Breite einer bestimmten Spalte erweitern und eine bg-success -CSS-Klasse darauf anwenden.

Voraussetzungen:

1. Installieren Sie Persistence.Activities Version 1.4.8 oder höher.
2. Wählen Sie Erweiterte Formulare für die Aktivität Create Form Task aus.

1. Wechseln Sie zur Registerkarte Vorlagen des Bearbeitungsrasters.
2. Ersetzen Sie in der Header-Vorlage den Inhalt durch das Code-Snippet unten:

   <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>

   Im Code-Snippet haben wir die Zeile <div class="col-sm-2">{{ component.label }}</div> so geändert, dass sie die erste Spalte im Bearbeitungsraster darstellt. Wir haben component durch components[0] ersetzt, sodass wir Spalten anhand ihrer Indexnummern identifizieren können. Wir haben diese Zeile für jede Spalte im Bearbeitungsraster dupliziert. Dann haben wir der gewünschten Komponente die Klasse bg-success hinzugefügt und die Klasse col-sm-2 in col-sm-6 geändert, um eine breitere Darstellung zu erhalten.
3. Ersetzen Sie in der Zeilenvorlage den Inhalt durch das Code-Snippet unten:

   <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>

   Im Code-Snippet haben wir die Zeile <div class="col-sm-2" {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}} </div> aktualisiert, um die erste Spalte darzustellen. Dann haben wir component durch components[0] ersetzt, damit wir Spalten anhand ihrer Indexnummer identifizieren können. Wir haben diese Zeile für jede Spalte im Bearbeitungsraster dupliziert. Und dann haben wir für dieselbe Spalte, die wir in der Headervorlage geändert haben, die Klasse col-sm-2 in col-sm-6 geändert und die Klasse bg-success in der Zeilenvorlage hinzugefügt.
   
   

   

   
   

Mit diesen Schritten wird die Breite der angegebenen Spalte erweitert und die Klasse bg-success angewendet, sodass die Spalte 60 % des Platzes im Bearbeitungsraster einnimmt und einen grünen Hintergrund erhält.

Workflow-Beispiel

Laden Sie den Beispielworkflow hier herunter, um die Schritte auszuführen und dieses Tutorial selbst auszuprobieren.