Ein Listenfeld, eine Dropdownliste, ein Kombinationsfeld oder Optionsfeldern zu einer Canvas-App hinzufügen

Artikel
09/29/2023

Zeigen Sie eine einzelne Spalte mit Daten (z.B. aus einer Tabelle mit mehreren Spalten) in einer Canvas-App an, damit Benutzer ein oder mehrere Elemente in einer Liste auswählen können.

Fügen Sie ein Listenfeld hinzu, um Benutzern die Auswahl von mehreren Optionen zu ermöglichen.
Fügen Sie eine Dropdownliste oder ein Kombinationsfeld hinzu, um den beanspruchten Platz auf einem Bildschirm zu reduzieren.
Fügen Sie eine Gruppe von Optionsfeldern für einen bestimmten Designeffekt hinzu.

Dieses Thema bezieht sich zwar auf Listenfelder und Optionsfelder, die Prinzipien gelten jedoch auch für Dropdownlisten.

Voraussetzungen

Erstellen Sie eine leere Canvas-App.
Erfahren Sie, wie Sie Steuerelemente hinzufügen und konfigurieren.

Erstellen einer einfachen Liste

Fügen Sie ein Steuerelement vom Typ Listenfeld mit der Bezeichnung MyListBox hinzu, und legen Sie seine Element-Eigenschaft auf folgenden Ausdruck fest:

["circle","triangle","rectangle"]

Der Designer sieht nun etwa wie folgt aus:
Wählen Sie auf der Registerkarte Einfügen die Option Symbole aus, wählen Sie den Kreis aus, und verschieben Sie ihn unter MyListBox:
Fügen Sie ein Dreieck und ein Rechteck hinzu, und ordnen Sie die Formen unter MyListBox in einer Reihe an:

Legen Sie die Visible-Eigenschaft der folgenden Formen auf die genannten Funktionen fest:

Form	Wert für Visible-Funktion
Kreis	`If("circle" in MyListBox.SelectedItems.Value, true)`
Dreieck	`If("triangle" in MyListBox.SelectedItems.Value, true)`
Rechteck	`If("rectangle" in MyListBox.SelectedItems.Value, true)`

Wählen Sie bei gedrückter ALT-Taste eine oder mehrere Formen unter MyListBox aus.

Nur die ausgewählte Form bzw. die ausgewählten Formen werden angezeigt.

In diesen Schritten haben Sie mithilfe eines Ausdrucks eine Liste von Elementen erstellt. Sie können diese Vorgehensweise auf andere Elemente im Unternehmen anwenden. Sie können mit einem Steuerelement vom Typ Dropdown beispielsweise Produktabbildungen, Produktbeschreibungen usw. anzeigen.

Hinzufügen von Optionsfeldern

Klicken Sie auf der Registerkarte Home auf Neuer Bildschirm und anschließend auf Leer.
Wählen Sie auf der Registerkarte Einfügen die Option Steuerelemente und anschließend Optionsfeld aus.
Benennen Sie das Optionsfeld-Steuerelement in Auswahl um, und legen Sie seine Element-Eigenschaft auf die folgende Formel fest:
["red","green","blue"]

Ändern Sie ggf. die Größe des Steuerelements, um alle Optionen anzuzeigen.
Wählen Sie auf der Registerkarte Einfügen die Option Symbole aus, und wählen Sie anschließend den Kreis aus.
Legen Sie die Füllung-Eigenschaft des Kreises auf die folgende Funktion fest:
If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

In dieser Formel ändert der Kreis je nach ausgewähltem Optionsfeld seine Farbe.
Verschieben Sie den Kreis wie im folgenden Beispiel veranschaulicht unter das Optionsfeld-Steuerelement:
Wählen Sie bei gedrückter ALT-Taste ein anderes Optionsfeld aus, um die Farbe des Kreises zu ändern.

Einen Artikel zu einer bestehenden Liste hinzufügen

Fügen Sie ein Schaltfläche-Steuerelement hinzu, und nennen Sie es „btnReset“.

Möchten Sie wissen, wie Sie ein Steuerelement hinzufügen, benennen und konfigurieren?

Richten Sie die OnSelect Eigenschaft auf btnReset für diese Formel ein:

ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})

Legen Sie die Text-Eigenschaft in btnReset auf "Reset" fest.
Fügen Sie ein Listenfeld-Steuerelement mit dem Namen lbItems hinzu, und legen Sie seine Items-Eigenschaft auf MyItems fest.
Halten Sie die ALT-TASTE gedrückt, und klicken Sie auf die Schaltfläche Zurücksetzen.

Hinweis

Das Listenfeld sollte sich mit den Artikeln aus der Sammlung „MyItems“ auffüllen.
Ordnen Sie das Listenfeld und die Schaltfläche so an, dass sie vertikal ausgerichtet sind.
Fügen Sie ein Texteingabe-Steuerelement hinzu, und nennen Sie es „txtAd“.
Legen Sie die Text-Eigenschaft von txtAdd auf "" fest.
Fügen Sie ein Schaltfläche-Steuerelement hinzu, und nennen Sie es „btnAdd“.
Legen Sie die Text-Eigenschaft von btnAdd auf "Add" fest.
Richten Sie die Eigenschaft OnSelect auf btnAdd für folgende Formel ein:
```
Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
```
Hinweis
- Die Collect-Funktion fügt den Text aus der Texteingabe als Element in die Sammlung ein.
- Die Funktion „Zurücksetzen“ setzt die Texteingabe auf den Standardzustand zurück.
Ordnen Sie txtAdd und btnAdd so an, dass sie vertikal unterhalb von lbItems und btnReset ausgerichtet sind.
Zeigen Sie eine Vorschau der App an, indem Sie auf F5 drücken.
Fügen Sie einen Textwert zum txtAdd-Texteingabesteuerelement hinzu.

Klicken Sie auf die Schaltfläche „Hinzufügen“.

Hinweis

Das Listenfeld sollte sich mit den Artikeln aus der Sammlung „MyItems“ auffüllen.

(Optional) Ein Element aus einer vorhandenen Liste entfernen

Fügen Sie ein Schaltfläche-Steuerelement hinzu, und nennen Sie es „btnDelete“.
Legen Sie die Text-Eigenschaft von btnDelete auf "Delete" fest.
Richten Sie die Eigenschaft OnSelect auf btnDelete für folgende Formel ein:
```
Remove(MyItems, lbItems.Selected)
```
Ordnen Sie btnDelete so an, dass es unterhalb von btnReset vertikal ausgerichtet ist
Zeigen Sie eine Vorschau der App an, indem Sie auf F5 drücken.
Klicken Sie auf die Schaltfläche „Zurücksetzen“, um das Listenfeld zurückzusetzen.
Klicken Sie zur Auswahl auf ein Element im Listenfeld.

Klicken Sie auf die Sie die Schaltfläche „Löschen“, um das Element zu löschen.

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).

Teilen über