Galerie durchsuchen

Galerie mit Textbox / Suchbox durchsuchen

Heute zeige ich dir verschiedene Methoden, wie du deine Galerie mithilfe einer Textbox durchsuchen kannst. Die Suche kannst du aktivieren durch die Eingabe eines Textes, durch Aktivierung per Enter Taste oder über Icons.

Schritt 1: Galerie hinzufügen

Zuerst musst du in deine App eine Galerie einfügen, die du durchsuchen möchtest. In diesem Beispiel verwende ich die Galerie der Shopping App. Wenn du diese auch verwenden möchtest, lade dir gerne die kostenlose Vorlage der Shopping App herunter.

Schritt 2: Suchbox einfügen

Dann fügst du deiner App ein Textfeld hinzu, dass du als Suchbox verwendest. Entferne den Standardtext und füge einen Hinweistext ein. Dieser hat den Vorteil, dass BenutzerInnen sehen, wie die Suchbox zu verwenden ist. Sobald du jedoch auf die Suchbox klickst, verschwindet der Hinweistext.

Schritt 3: Galerie durchsuchen

• Suche bei Texteingabe in der Suchbox

Du kannst die Galerie sofort basierend auf der Eingabe in der Textbox durchsuchen. Dazu musst du die Filter Funktion in Kombination mit der StartsWith Funktion nutzen. Sobald du Text in der Suchbox eingibst, wird die Galerie gefiltert. Wenn du die Suchbox leerst, werden wieder alle Einträge der Galerie angezeigt.

Galerie Produkte
Items = Filter('Shopping Produkte';StartsWith(Title;txt_Suche.Text))

• Suche per Enter Taste aktivieren

Es kann sinnvoll sein, wenn du die Suche erst durch Klick der Enter Taste aktivierst. Dazu musst du die DelayOutput Eigenschaft auf true setzen sowie die OnChange Aktion anpassen.

Textbox txt_Suche
DelayOutput = true
OnChange = Set(varSuchtext;txt_Suche.Text)

Galerie Produkte
Items = Filter('Shopping Produkte';StartsWith(Title;varSuchtext))

• Suche per Icon steuern
  

Du kannst die Suche auch über Icons steuern, um die Benutzerfreundlichkeit deiner App zu erhöhen. Nutze dazu ein Such-Icon, dass immer dann angezeigt wird, wenn die Suche aktiviert werden kann. Zum Abbrechen der Suche kannst du ein X-Icon verwenden, mit dem die Suchbox geleert und die gesamte Galerie wieder angezeigt wird.

Such-Icon
OnSelect = Set(varSuchtext;txt_Suche.Text)
Visibility = !IsBlank(txt_Suche.Text) And varSuchtext<>txt_Suche.Text

X-Icon
OnSelect =Set(varSuchtext;"");; Reset(txt_Suche)
Visibility = !IsBlank(txt_Suche.Text) And varSuchtext=txt_Suche.Text

Galerie Produkte
Items = Filter('Shopping Produkte';StartsWith(Title;varSuchtext))

Ich hoffe diese Schritt für Schritt Anleitung hilft dir dabei, deine App benutzerfreundlicher zu gestalten.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

Hier gehts zum Detailvideo: