Anpassen der Spaltenbreite in „Bearbeitungsraster“

Dieses Tutorial zeigt, wie die Breite der letzten Spalte in einem Bearbeitungsraster geändert wird.

Voraussetzungen: Um die Schritte in diesem Tutorial auszuführen, erstellen Sie eine Datentabelle. Stellen Sie sicher, dass die letzte Spalte der Tabelle einen Inhalt enthält, der länger als etwa fünf bis sechs Wörter ist.

1. Fügen Sie eine Build Data Table -Aktivität in Ihren Workflow ein.

2. Öffnen Sie den Assistenten zum Erstellen von Datentabellen und fügen Sie die gewünschten Spalten für Ihre Tabelle hinzu.

   Hinweis:

   Stellen Sie sicher, dass die Spalten keine Leerzeichen oder Sonderzeichen enthalten, da Sie diese Namen später verwenden, um die Spalten im Formular über Eigenschaftsnamen zu verknüpfen.

3. Speichern Sie die Datentabelle in einer Variablen. In diesem Beispiel können Sie sie dataTablenennen.

   

4. Fügen Sie ein Bearbeitungsraster in Ihr Formular ein und verwenden Sie den Namen der Datentabellenvariablen (dataTable) als Eigenschaftsnamen der Komponente.

5. Fügen Sie Komponenten entsprechend den Spalten und ihren Werten in der Datentabelle in das Bearbeitungsraster ein. Die Eigenschaftsnamen dieser Komponenten sind die genauen Namen der Spalten in der Datentabelle.

   Fügen Sie in diesem Beispiel drei Textfeld- Komponenten hinzu. Verwenden Sie die folgenden Eigenschaftsnamen für die Komponenten: column1, column2 und column3.

6. Wechseln Sie auf der Registerkarte Vorlagen zu den Komponenteneinstellungen für das Bearbeitungsraster . Sie können die Spaltenbreite mit Bootstrap 3 oder mit der CSS-Eigenschaft style bearbeiten.

   • Verwenden von Bootstrap 3
     1. Ändern Sie im Abschnitt Header-Vorlage den standardmäßig generierten Code mit der folgenden Vorlage:

        <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. Ändern Sie im Abschnitt Zeilenvorlage den standardmäßig generierten Code mit der folgenden Vorlage:

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

     Tipp:

     • Beachten Sie, dass Sie den Wert component.key mit dem genauen Namen der Spalte vergleichen, der derselbe ist wie der Eigenschaftsname jeder Textkomponente.
     • UiPath Forms verwenden das Bootstrap 3-Framework. Die Gesamtbreite der Tabelle ist in 12 Abschnitte unterteilt. Stellen Sie daher sicher, dass jede Division, die Sie vornehmen, 12 ergibt. In diesem Beispiel nehmen zwei Spalten mit der Klasse col-sm-2 4 Abschnitte ein, die restlichen 8 bleiben für die dritte Spalte (col-sm-8) übrig.
   • Verwenden der Eigenschaft style :

     1. Identifizieren Sie im Header- Vorlagenskript alle <div class="col-sm-2"> -Tags und fügen Sie Ihre benutzerdefinierte Breite wie folgt hinzu: style="width:{your_custom_width}px !important". Die Breite muss in Pixeln angegeben werden.

        

     2. Identifizieren Sie im Zeilenvorlagenskript alle <div class="col-sm-2"> -Tags und fügen Sie Ihre benutzerdefinierte Breite wie folgt hinzu: style="width:{your_custom_width}px !important". Die Breite muss in Pixeln angegeben werden.

        

        Das Element "col-sm-2" stellt die Standardspaltenbreite dar. Sie können die Standardspaltenbreite ändern, indem Sie ein benutzerdefiniertes Stil-Tag hinzufügen. Beispiel: style="width:70px !important" wendet eine Breite von 70 Pixeln auf alle Bearbeitungsrasterspalten an.

7. Speichern Sie die Komponente und das Formular.