Anpassen der Spaltenbreite

Tabellen in Ihrem Formular benötigen manchmal breitere oder schmalere Spalten anstelle von Spalten mit der gleichen Breite. Sie können eine benutzerdefinierte Breite für Tabellen in den Komponenten „Edit Grid“ und „Data Grid“ festlegen.

Tutorial

Das nächste Tutorial enthält Schritte zum Ändern der Breite für Column3 in einer Tabelle, die als myTablegespeichert wird.

Erstellen der Datentabelle

So erstellen Sie eine Tabelle zur Verwendung in Ihrem Formular:

1. Fügen Sie in Ihrem Workflow die Aktivität Build Data Table hinzu.
2. Klicken Sie auf Datentabelle... . Der Assistent zum Erstellen von Datentabellen wird geöffnet.

3. Fügen Sie die gewünschten Spalten für Ihre Tabelle hinzu und bearbeiten Sie deren Eigenschaften.

   Stellen Sie sicher, dass der Spaltenname keine Leerzeichen oder Sonderzeichenenthält, da Sie diese Namen verwenden, um die Spalten im Formular über die Registerkarte Feldschlüssel- Komponente zu verknüpfen.

   
   

   

   
   
4. Klicken Sie auf OK , um die Tabelle zu speichern.
5. Legen Sie im Panel Eigenschaften > Feld Ausgabe der Aktivität Datentabelle erstellen ( Build Data Table ) einen Variablennamen für Ihre Tabelle fest (z. B. myTable ).

   Sie verwenden diese Variable, um die Tabelle über die FormFieldsCollection- Eigenschaft der Create Form -Aktivität an das Formular zu binden.

   
   

   

   
   

Binden der Datentabelle an Ihre Formular- und Rasterkomponenten

So binden Sie die Datentabelle an Ihr Formular:

1. Fügen Sie die Aktivität Create Form in Ihrem Workflow hinzu.
2. Klicken Sie im Panel Eigenschaften > Feld FormFieldsCollection auf das Drei-Punkte-Menü (fa-ellipsis-v:) . Der FormFieldsCollection- Assistent wird geöffnet.
3. Erstellen Sie ein Argument, und verknüpfen Sie es mithilfe der Variablen (z. B. myTable) mit der zuvor erstellten Tabelle. Legen Sie das Argument Direction auf In/Out und den Typ auf DataTable. Geben Sie Ihrem Argument einen Namen , z. B. table.
   
   

   

   
   

4. Klicken Sie auf OK.

   Stellen Sie sicher, dass das Kontrollkästchen GenerateInputFields deaktiviert ist.

So binden Sie die Datentabelle an die Edit Grid- oder Data Grid-Komponente:

1. Öffnen Sie den Formular-Designer über die Aktivität Formular erstellen .
2. Ziehen Sie aus der Kategorie Daten eine Rasterkomponente (z. B. Edit Grid und/oder Data Grid) und legen Sie sie dort ab.
3. Verweisen Sie auf der Registerkarte Feldtaste Ihres Rasters auf das Tabellenargument (d. h. table).

   Beim Wert des Feldschlüssels muss die Groß-/Kleinschreibung beachtet werden.

   
   

   

   
   

4. Fügen Sie Ihrem Raster Textkomponenten hinzu, um die Spalten in Ihrer Tabelle zu replizieren. Speichern Sie jede Textkomponente.

   Wenn Ihre Tabelle beispielsweise drei Spalten mit den Namen Column1, Column2und Column3hat, ziehen Sie drei Textkomponenten per Drag-and-drop in Ihr Raster und stellen Sie sicher, dass Sie die Spaltennamen aus der Tabelle auf der Registerkarte Feldschlüssel der Komponenten verwenden .

   Beim Wert des Feldschlüssels muss die Groß-/Kleinschreibung beachtet werden.

   
   

   

   
   
5. Speichern Sie das Formular.

Anpassen der Spaltenbreite in „Edit Grid Components“

Verwenden von Bootsrap 3

1. Wechseln Sie zu den Einstellungen der Rasterkomponente bearbeiten .

2. Ändern Sie auf der Registerkarte Vorlagen > Abschnitt Headervorlage den generierten Standardcode 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>

3. Ändern Sie auf der Registerkarte Vorlagen > Abschnitt Zeilenvorlage den generierten Standardcode 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>

   Hinweis:

   • Beachten Sie, dass Sie den component.key -Wert mit dem genauen Namen der Spalte vergleichen, der derselbe ist, der auf der Registerkarte Feldschlüssel jeder Textkomponente verwendet wird (Schritt 4 beim Binden der Datentabelle an Bearbeitungsraster- oder Datenrasterkomponenten) .
   • 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. Zeigen Sie mit der Maus auf die Komponente Raster bearbeiten und klicken Sie auf Bearbeiten. Die Konfigurationsseite wird geöffnet.

2. Navigieren Sie zur Registerkarte Vorlagen .

   2.1. Identifizieren Sie im Skript der 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 angegeben werden.
   2.2. Identifizieren Sie im Zeilenvorlagen- Skript 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 Style-Tag hinzufügen. Beispielsweise wendet style="width:70px !important" eine Breite von 70 Pixel auf alle Edit Grid- Spalten an.
   
   

   

   
   
   
   

   

   
   
3. Speichern Sie Ihre Komponente und das Formular.

Anpassen der Spaltenbreite in Data Grid-Komponenten

1. Erstellen Sie eine lokale CSS-Datei mit den gewünschten Spaltenbreiten. In unserem Beispiel erstellt die folgende Vorlage ein breiteres Column3 (d. h. nth-child(3)):

   .mygrid tbody>tr>:nth-child(1){ 
   width: 70px;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }

2. Verweisen Sie im Panel Eigenschaften > Feld LocalCSSFilePath der Aktivität Formular erstellen auf die zuvor erstellte CSS-Datei. Beispiel:"/file://C:\User\Desktop\EditColumnWidth.css".
3. Geben Sie im Feld Data Grid- Komponente > Registerkarte Anzeige > Benutzerdefinierte CSS-Klasse den Namen der CSS-Klasse ein (z. B. mygrid).

Beispielworkflow

Laden Sie die XAML-Beispieleherunter, um die vollständigen Workflows zu überprüfen oder um eine zukünftige Referenz zu haben