Anpassen der Spaltenbreite in „Bearbeitungsraster“

Dieses Tutorial zeigt, wie Sie die Breite der letzten Spalte in einem Bearbeitungsraster ändern.

Voraussetzungen: Um die Schritte in diesem Tutorial auszuführen, müssen Sie eine Datentabelle erstellen. Stellen Sie sicher, dass der Inhalt der letzten Spalte der Tabelle länger als ungefähr fünf bis sechs Wörter ist.

1. Fügen Sie eine Build Data Table- Aktivität in Ihrem Workflow hinzu.
2. Öffnen Sie den Assistenten Datentabelle erstellen 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 werden, um die Spalten im Formular über Eigenschaftsnamenzu verknüpfen.
3. Speichern Sie die Datentabelle in einer Variablen. In diesem Beispiel können Sie sie dataTablenennen.
   
   

   

   
   

1. Fügen Sie ein Bearbeitungsraster in Ihr Formular ein und verwenden Sie den Namen der Datentabellenvariablen (dataTable) als Eigenschaftsnamen der Komponente.
2. Fügen Sie Komponenten in das Bearbeitungsrasterein, entsprechend den Spalten und deren Werten in der Datentabelle. Die Eigenschaftsnamen dieser Komponenten sind die genauen Namen der Spalten in der Datentabelle.
   Fügen Sie in diesem Beispiel drei Textfeldkomponenten hinzu. Verwenden Sie die folgenden Eigenschaftsnamen für die Komponenten: column1, column2und column3.
3. Wechseln Sie auf der Registerkarte Vorlagen zu den Einstellungen der Rasterkomponente . Sie können die Spaltenbreite mit Bootstrap 3 oder der CSS-Eigenschaft style bearbeiten.
   • Verwenden von Bootstrap 3
     1. Ändern Sie im Abschnitt Headervorlage 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 component.key -Wert mit dem genauen Namen der Spalte vergleichen, der mit dem Eigenschaftsnamen jeder Textkomponente identisch ist.
     • 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.
   • Mit der Eigenschaft style :
     1. Identifizieren Sie im Skript Header-Vorlage 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 ausgedrückt werden.
        
        

        

        
        
     2. Identifizieren Sie im Skript Zeilenvorlage 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 ausgedrückt werden.
        
        

        

        
        
     Das Element "col-sm-2" stellt die Standardspaltenbreite dar. Sie können die Standardspaltenbreite ändern, indem Sie ein benutzerdefiniertes Style-Tag hinzufügen. Beispielsweise wendet style="width:70px !important" eine Breite von 70 Pixel auf alle Edit Grid- Spalten an.
4. Speichern Sie die Komponente und das Formular.