Benutzerdefinierte Liste

Die Benutzerdefinierte Liste ist ein dynamisches, vorlagenbasiertes Steuerelement, das verschiedene Steuerelemente mit ungewöhnlicher Flexibilität enthält. Die benutzerdefinierte Liste ist kein Standard-Listensteuerelement, sondern ermöglicht noch mehr Steuerelemente innerhalb des Layouts, was sie ideal für Aufgaben wie das Erstellen eines effektiven E-Mail-Auflistungsrasters macht.

Eigenschaften

Die benutzerdefinierte Liste verfügt über zwei Sätze von Eigenschaften: eine für das Hauptsteuerelement und eine für die enthaltene Vorlage.

Um zwischen den Eigenschaften einer benutzerdefinierten Liste und ihrer Vorlage umzuschalten, klicken Sie einfach auf das Steuerelement auf der Arbeitsfläche oder wählen Sie es in der Strukturansicht auf der linken Seite aus.

DieseZeile

Das Schlüsselwort ThisRow , das die einzelnen Zeilen der benutzerdefinierten Listendaten darstellen soll

Um Werte aus der Datenquelle an einzelne Steuerelemente in der Benutzerdefinierten Liste zu binden, verwenden Sie das Schlüsselwort ThisRow . Weitere Informationen finden Sie unter Beispiele.

Einschränkungen

• Aus Leistungsgründen können mehrere Steuerelemente nicht in eine benutzerdefinierte Liste aufgenommen werden:

  • Bearbeitungsraster

  • Tabelle

  • Benutzerdefinierte Liste

  • Benutzerdefinierter HTML-Code

  • Registerkarten

  Hinweis:

  Für listbasierte Steuerelemente, die vier Elemente überschreiten, empfehlen wir die Verwendung von Dropdown-Steuerelementen.

• Das direkte Verweisen auf Steuerelemente der benutzerdefinierten Liste , z. B. MainPage.Header, ist nicht zulässig, obwohl der Steuerelementname von IntelliSense gefunden wurde.
• Das Ziehen von Steuerelementen zwischen dem Kontext einer benutzerdefinierten Liste und anderen Containersteuerelementen kann zu ungültigen Ausdrücken führen, von denen einige nur sichtbar sind, wenn Sie eine Vorschau der App anzeigen. Dies liegt daran, dass die Bindungen im Kontext der benutzerdefinierten Liste (mit dem Schlüsselwort ThisRow ) außerhalb der benutzerdefinierten Liste ungültig werden.

Optimale Erstellung benutzerdefinierter Listen

Die optimale Methode für die Arbeit mit einer benutzerdefinierten Liste ist wie folgt:

1. Entwerfen Sie Ihre benutzerdefinierte Liste mit einem Designtool wie Digitma.

2. Erstellen Sie im App Studio nach dem Hinzufügen des Steuerelements „Benutzerdefinierte Liste“ ein Layout mit Containern und Steuerelementen für jedes Listenelement.

3. Erstellen Sie eine Beispielzeile, die eine Textbeschreibung enthält.

4. Ersetzen Sie die Textbeschreibung durch Ausdrücke.

5. Fügen Sie Regeln zu Ereignissen hinzu.

6. Passen Sie den Stil des Steuerelements entsprechend der Designdatei an.

7. Zeigen Sie eine Vorschau der App an.

Allgemein

Benutzerdefinierte Liste

• Datenquelle – Die Datenquelle für die Listenanzeige. Die gültigen Datentypen sind Datentabelle und Objekt-Array.
• Ausgeblendet – Wenn true festgelegt ist, wird das Steuerelement während der Laufzeit ausgeblendet.
• Deaktiviert – Wenn false festgelegt ist, können App-Benutzer mit der Liste interagieren. Wenn „true“ festgelegt ist, befindet sich die Liste in einem schreibgeschützten Zustand.

Vorlage

• Tooltip – Kurzinfo, die bei der Vorlage angezeigt wird. Verwenden Sie diese Option, um zusätzliche Informationen zur Vorlage bereitzustellen.

• Ausgeblendet– Wenn true festgelegt ist, wird das Steuerelement während der Laufzeit ausgeblendet.

• Deaktiviert – Wenn false festgelegt ist, können App-Benutzer mit der Vorlage interagieren. Wenn „true“ festgelegt ist, befindet sich die Vorlage in einem schreibgeschützten Zustand.

Events

Benutzerdefinierte Liste

• Zeile ausgewählt – Konfigurieren Sie, was passiert, wenn der App-Benutzer eine Zeile (d. h. ein Steuerelement innerhalb einer Vorlage) in der benutzerdefinierten Liste auswählt. Konfigurieren Sie, was passiert, wenn der Wert geändert wird.

Vorlage

• Angeklickt – Konfigurieren Sie, was passieren soll, wenn auf die Vorlage geklickt wird.

Stil

Benutzerdefinierte Liste

• Ausrichtung von Steuerelementen – Erbt standardmäßig die übergeordnete Ausrichtung. Eine andere Ausrichtung als die übergeordnete kann festgelegt werden. Um die Standardausrichtung wiederherzustellen, heben Sie die Markierung der überschriebenen Optionen auf.

  Hinweis: Die Ausrichtung hängt vom Layout ab, das für das übergeordnete Element ausgewählt wurde (vertikal vs. horizontal).
• Layout – Passen Sie die Position der Vorlage in der benutzerdefinierten Liste an:
  • Vertikal – Vorlagen sind vertikal angeordnet

  • Horizontal – Vorlagen werden horizontal angeordnet

  • Raster – Vorlagen sind in einem Rasterformat angeordnet

  • Zwischenraum (nur Pixel) – Der Abstand zwischen Vorlagen, wenn sie in einem vertikalen oder horizontalen Layout angeordnet sind.

  • Horizontaler / vertikaler Abstand – Der horizontale und vertikale Abstand zwischen Vorlagen, wenn sie in einem Rasterlayout angeordnet sind.

  • Vorlagenbreite – Die Breite der Vorlage.

  • Vorlagenhöhe – Die Höhe der Vorlage.

  Hinweis:

  • In einem horizontalen Layout wird die Breite in Pixeln und die Höhe in Pixeln festgelegt: %, em oder auto.
  • In einem vertikalen Layout kann die Höhe in Pixeln und die Breite in Pixeln angegeben werden, %, em oder auto.

  • In einem Rasterlayout sind sowohl Höhe als auch Breite in Pixeln angegeben.

• Seitenrand – Der Rand des Layouts. Standardmäßig ist ein Seitenrand von 4px festgelegt. Die Randeigenschaften Oben/Unten und Links/Rechts werden kombiniert. Diese Eigenschaften können mit der Schaltfläche Link rechts neben dem Abschnitt Seitenrand getrennt werden.

• Größe – Die Breite und Höhe der benutzerdefinierten Liste in Pixeln. Standardwerte:
  • In einem horizontalen Layout: Breite 800 px, Höhe automatisch
  • In einem vertikalen Layout: Breite automatisch, Höhe 400 px
  • In einem Rasterlayout : Breite 800 px, Höhe 400 px
  Um Mindest- oder Höchstwerte festzulegen, klicken Sie auf das Drei-Punkte-Symbol (…).

Vorlage

• Ausrichtung von Steuerelementen – Erbt standardmäßig die übergeordnete Ausrichtung. Eine andere Ausrichtung als die übergeordnete kann festgelegt werden. Um die Standardausrichtung wiederherzustellen, heben Sie die Markierung der überschriebenen Optionen auf.

  Hinweis: Die Ausrichtung hängt vom Layout ab, das für das übergeordnete Element ausgewählt wurde (vertikal vs. horizontal).

• Layout – Legen Sie fest, wie die Steuerelemente innerhalb der Vorlage positioniert werden:

  • Horizontal/Vertikal – Die Ausrichtung der Steuerelemente.
  • Ausrichtung– Die Ausrichtung der Steuerelemente innerhalb der Vorlage.
  • Umbrechen zulassen – Wenn diese Option ausgewählt ist, werden die Steuerelemente in der Vorlage umgebrochen.

  • Bildlauf zulassen – Wenn diese Option ausgewählt ist, kann innerhalb der Vorlage gescrollt werden. Um Bildlauf zulassen aktivieren zu können, muss die Vorlage eine feste Höhe (vertikales Layout) oder eine feste Breite (horizontales Layout) haben.

• Hintergrundfarbe – Die Hintergrundfarbe der Vorlage.

• Rahmen – Der Rahmen für das Steuerelement. Rahmenstärke, Farbe und Radius können konfiguriert werden.

• Schriftart – Die Schriftfamilie für die Vorlage. Alle Steuerelemente innerhalb der Vorlage haben dieselbe Schriftfamilie. Standardmäßig erbt die Vorlage die Schriftfamilie der Benutzerdefinierten Liste.

• Seitenrand – Der Rand des Layouts. Standardmäßig ist ein Seitenrand von 0px festgelegt. Die Randeigenschaften Oben/Unten und Links/Rechts werden kombiniert. Diese Eigenschaften können mit der Schaltfläche Link rechts neben dem Abschnitt Seitenrand getrennt werden.

• Abstand – Der Abstand der Vorlage. Standardmäßig ist ein Abstand von 16 px festgelegt. Die auf den Seitenrand bezogenen Eigenschaften „Oben/Unten“ und „ Links/Rechts “ werden kombiniert. Diese Eigenschaften können mit der Schaltfläche Link rechts neben dem Abschnitt Abstand getrennt werden.

• Erweitert – Zeigt die Flex-Eigenschaften des Steuerelements an.

  • Flex-Basis – Legt die ursprüngliche Größe eines flexiblen Elements fest, bevor der zusätzliche Platz verteilt oder entfernt wird (px, %, em, auto).

  • Flexzunahme – Wenn zusätzlicher Platz verfügbar ist, bestimmt dieser Wert, wie stark ein Flex-Element im Verhältnis zu den restlichen Elementen wachsen soll.

  • Flexzunahme – Wenn der Platz nicht ausreicht, gibt dieser Wert an, wie stark ein Flex-Element im Vergleich zu den anderen Elementen verkleinert werden soll.

    Weitere Informationen finden Sie in der Dokumentation zum Mozilla Developer Network.

VB-Eigenschaften

Name der Eigenschaft	Datentyp	Zugriffsberechtigungen	Beispiel
Deaktiviert	Boolescher	Lesen/Schreiben	-
Ausgeblendet	Boolescher	Lesen/Schreiben	-
SelectedItem	Vereinigung des Datenquellentyps und der Liste der Steuerelemente in der benutzerdefinierten Liste	Lesen/Schreiben	Angenommen, Ihre Datenquelle ist eine Entität. So greifen Sie auf die Entitätszeile zu: MainPage.CustomList.SelectedItem.data Angenommen, Sie haben eine Datumsauswahl in Ihrer benutzerdefinierten Liste. So greifen Sie auf den Wert des Datumsauswahlsteuerelements zu: MainPage.CustomList.SelectedItem.Datepicker.value
Index des ausgewählten Elements	Integer	Schreibgeschützt	Gibt den Index der aktuell ausgewählten Zeile zurück: MainPage.CustomList.SelectedItemIndex
DieseZeile	Mit dem Feld Datenquelle identisch	Schreibgeschützt	Bezieht sich auf den aktuellen Datensatz der Datenquelle. Verwenden Sie sie, um Felder in der benutzerdefinierten Liste zu konfigurieren.

Datenbindungsbeispiele für benutzerdefinierte Listenelemente

Datenquelle ist eine Entität

Angenommen, Sie verweisen auf eine Entität im Feld Datenquelle. Diese Entität hat eine Spalte mit dem Namen cvxz"Vorname".vcc

Um diese Spalte an ein Textfeldsteuerelement in der Benutzerdefinierten Liste zu binden, können Sie den folgenden Ausdruck verwenden:

ThisRow.Firstname

Datenquelle ist eine Datentabelle

Angenommen, Sie verweisen auf ein Datentabellenargument eines Prozesses im Feld Datenquelle .

Der Typ von DieseZeile ist Datenzeile, und ihr Wert kann wie folgt extrahiert werden:

ThisRow("FieldName")

Stellen Sie sicher, dass Sie sie in den entsprechenden Typ umwandeln.

Demo

Verwenden der benutzerdefinierten Liste

Einleitung

Diese App demonstriert die Funktion der benutzerdefinierten Liste .

Demo-App – selbst ausprobieren

Um die benutzerdefinierte Liste selbst auszuprobieren, verwenden Sie die Demo-App.

Laden Sie die Demo-App von GitHub herunter

Vorschau der Demo-App in der Cloud

Demo-App – Verwendungsanweisungen

1. Erstellen Sie in UiPath^® Apps eine neue App und importieren Sie die heruntergeladene Demo-App.

2. Möglicherweise stellen Sie einige Fehler fest. Um sie zu beheben, ersetzen Sie die referenzierten Entitäten „Country“, „EmailInbox“, „Mitarbeiter“, „Mitarbeiter2“ und „Systembenutzer“ durch Entitäten in Ihrem Mandanten.

3. Um mit den Feldern der benutzerdefinierten Liste zu interagieren, zeigen Sie eine Vorschau Ihrer App an.