Anpassen von Bearbeitungsrastervorlagen

Dieses Tutorial hilft Ihnen, die Header- und Zeilenvorlagen eines Bearbeitungsrasters anzupassen, um es optisch ansprechenden zu verbessern. Sie erfahren, wie Sie die Breite einer bestimmten Spalte erweitern und eine bg-success -CSS-Klasse darauf anwenden.

Prerequisites:

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

Tutorial

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, um Spalten anhand ihrer Indexnummern identifizieren zu können. Wir haben diese Zeile für jede Spalte im Bearbeitungsraster dupliziert. Anschließend haben wir die Klasse bg-success der gewünschten Komponente hinzugefügt und die Klasse col-sm-2 für ein umfassenderes Erscheinungsbild in col-sm-6 geändert.

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. Und dann wurde component durch components[0] ersetzt, um Spalten anhand ihrer Indexnummer identifizieren zu 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 Header-Vorlage geändert haben, die Klasse col-sm-2 in col-sm-6 geändert und die Klasse bg-success in der Zeilenvorlage hinzugefügt.

   

   Diese Schritte erweitern die Breite der angegebenen Spalte und wenden die Klasse bg-success an, sodass die Spalte 60 % des Platzes des Bearbeitungsrasters einnimmt und ihr einen grünen Hintergrund gibt.

Workflow-Beispiel

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