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. Inside your workflow, add the Build Data Table activity.

2. Click DataTable... . The Build Data Table wizard opens.

3. Fügen Sie die gewünschten Spalten für Ihre Tabelle hinzu und bearbeiten Sie ihre Eigenschaften. Stellen Sie sicher, dass der Spaltenname keine Leerzeichen oder Sonderzeichen enthält, da Sie diese Namen verwenden, um die Spalten im Formular über die Registerkarte für die Komponente Feldtaste zu verknüpfen.

   

4. Click OK to save the table.

5. In the Properties panel > Output field of the Build Data Table activity, set a variable name for your table (for example, myTable ).

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

   

Binden der Datentabelle an Ihre Formular- und Rasterkomponenten

So binden Sie die Datentabelle an Ihr Formular:

1. Add the Create Form activity in your workflow.

2. In the Properties panel > FormFieldsCollection field, click on the three dots menu (fa-ellipsis-v:) . The FormFieldsCollection wizard opens.

3. Create an argument and link it to the previously created table using the variable (i.e., myTable). Set the argument Direction to In/Out and the Type to DataTable. Give a Name to your argument, for example table.

   

4. Klicken Sie auf OK. Stellen Sie sicher, dass das Feld EingabefelderGenerieren deaktiviert ist.

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

1. Open the Form Designer from the Create Form activity.

2. From the Data category, drag and drop a grid component (i.e., Edit Grid and/or Data Grid).

3. Verweisen Sie auf der Registerkarte Feldschlüssel Ihres Rasters auf das Tabellenargument (d. h. table).

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

   

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, Column2 und Column3 enthält, ziehen Sie drei Textkomponenten in Ihr Raster und stellen Sie sicher, dass Sie die Spaltennamen aus der Tabelle in der Registerkarte Feldtaste der Komponente verwenden .

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

   

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. In the Templates tab > Header Template section, change the default generated code with the following template:

   <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. In the Templates tab > Row Template section, change the default generated code with the following template:

   <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 Wert component.key mit dem genauen Namen der Spalte vergleichen, der derselbe ist wie der, der auf der Registerkarte Feldtaste 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. Hover over the Edit Grid component and click Edit. The configuration page opens.
2. Navigate to the Templates tab.

   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.

      

      

3. Save your component and the form.

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. In the Properties panel > LocalCSSFilePath field of the Create Form activity, reference the previously created CSS file. For example,"/file://C:\User\Desktop\EditColumnWidth.css".
3. In the Data Grid component > Display tab > Custom CSS Class field, enter the name of the CSS class (for example, mygrid).

Beispielworkflow

Laden Sie die XAML-Beispieleherunter, um die vollständigen Workflows zu überprüfen oder später darauf zurückgreifen zu können