PowerApps-Suchfeld: So fügen Sie es hinzu und passen es an

In diesem Tutorial sprechen wir über das PowerApps- Suchfeld und wie Sie es von Grund auf hinzufügen und anpassen können.

PowerApps ist eine auf Komfort ausgelegte Plattform, auf der Benutzer ihre eigenen Apps erstellen können, auch wenn sie keine Erfahrung in der Programmierung oder App-Entwicklung haben. Wie bei jeder anderen Microsoft-Plattform liegt seine Stärke im Drag-and-Drop-System und im intuitiven Design.

Das bedeutet, dass jeder, der Apps erstellen möchte, sei es zur einfachen Anzeige seiner Daten oder zur Steigerung der Produktivität im Team, dies problemlos tun kann.

In früheren Tutorials haben wir die Grundlagen zum Erstellen einer App von Grund auf besprochen . Dieses Mal konzentrieren wir uns auf das PowerApps-Suchfeld.

Inhaltsverzeichnis

• So funktioniert das PowerApps-Suchfeld
• Verwenden der Suchfunktion
• Erstellen eines PowerApps-Suchfelds von Grund auf
• Hinzufügen von Spalten zu einem PowerApps-Suchfeld
• Hinzufügen eines funktionierenden Suchsymbols und Ausblenden der Suchleiste
• Hinzufügen eines Hinweises zur Suchleiste
• Abschluss

So funktioniert das PowerApps-Suchfeld

Mit der Suchfunktion können Benutzer nach Elementen in einer Galerie suchen und diese filtern. Da Power Apps mit App-Vorlagen geliefert wird, in denen das Suchfeld bereits vorhanden ist, müssen Sie lediglich eine Datenquelle verbinden, um Elemente abzurufen, die in die Galerie aufgenommen werden.

Bei Verwendung des Suchfelds ist es nicht erforderlich, ganze Namen oder Wörter einzugeben. Wenn Sie die ersten paar Buchstaben eingeben, werden die Elemente automatisch gefiltert und Ihnen werden passende Einträge angezeigt.

Obwohl die integrierten Vorlagen bequem zu verwenden sind, können wir uns nicht immer darauf verlassen. Das Erstellen einer eigenen Canvas-App ist erforderlich, wenn Sie die App vollständig an Ihre spezifischen Anforderungen anpassen möchten. Das bedeutet, dass Sie Ihr eigenes Suchfeld von Grund auf erstellen müssen.

Verwenden der Suchfunktion

Verwenden wir diesen Bildschirm, den wir in einem früheren Tutorial von Grund auf erstellt haben. Im Moment befinden wir uns im Bildschirm „Kunden anzeigen“.

Da es sich hier um eine Galerie mit Elementen handelt, wäre es sinnvoll, hier ein Suchfeld einzurichten.

Die auf dieser Seite angezeigte Galerie ist Galerie 2. Wenn wir uns die Items-Eigenschaft ansehen, zeigt sie, dass wir Daten aus Tabelle1 abrufen.

Das heißt, wenn wir die Suchfunktion hinzufügen, durchsucht sie die Elemente in Tabelle 1 und filtert die Ergebnisse basierend auf unserer Eingabe.

Lassen Sie uns also herausfinden, wie die Suchfunktion funktioniert. Wenn man sich das Microsoft-Dokument anschaut, in dem diese Funktion beschrieben wird, sieht man, dass eine Suchfunktion eine Tabelle, eine Suchzeichenfolge und die Spalten benötigt, in denen gesucht werden soll.

Lassen Sie uns anhand dieser Formel sehen, wie die Suchfunktion in unserer eigenen App funktioniert.

Mithilfe der Items-Eigenschaft in Gallery2 verwenden wir die Suchfunktion in der Bearbeitungsleiste und verweisen auf Tabelle1, da dies unsere Hauptdatenquelle ist.

Für die eigentliche Suchzeichenfolge suchen wir nach dem Namen Elton.

Dann führen wir die Suche in der Spalte „Vorname“ durch.

Sobald wir die Eingabetaste drücken, erhalten wir eine Übereinstimmung, die den von uns verwendeten Suchparametern entspricht.

Wenn wir den Namen Elton aus der Suchleiste entfernen, wird automatisch wieder die gesamte Galerie angezeigt.

Versuchen wir es noch einmal mit der Suche nach dem Namen Coralie.

Sobald wir die Eingabetaste drücken, erhalten wir erneut eine Übereinstimmung.

Natürlich erwarten wir nicht, dass Benutzer die Galerie mit PowerApps öffnen. Das bedeutet, dass sie die Suche über ein Suchfeld und nicht über die Bearbeitungsleiste durchführen müssten. Hier kommt die Notwendigkeit ins Spiel, eine eigene Suchleiste zu erstellen.

Erstellen eines PowerApps-Suchfelds von Grund auf

Beginnen wir mit dem Hinzufügen einer Texteingabe über die Schaltfläche „Text“ unter dem Menüband „Einfügen“.

Wie jedes andere Element können wir dieses Textfeld an eine beliebige Stelle ziehen. Platzieren wir es zunächst auf der rechten Seite des Bildschirmtitels.

Da es sich im Moment nur um ein einfaches Textfeld handelt, kann es noch nichts filtern, selbst wenn wir einen Namen eingeben. Dazu müssen wir die Suchfunktion in unserer Bearbeitungsleiste mit dem eigentlichen Textfeld verknüpfen.

Das bedeutet, dass wir das Element TextInput1 zu dieser Formel hinzufügen müssen.

Dazu geben wir anstelle des Leerzeichens, in das wir den Suchbegriff eingeben, TextInput1.Text ein. TextInput1 bezieht sich auf das Textfeld, während Text auf alles verweist, was wir in das Textfeld eingeben.

Jetzt probieren wir es aus. Wenn wir hier einen Suchbegriff eingeben, sehen Sie, dass eine Übereinstimmung angezeigt wird, auch wenn wir nur die ersten paar Buchstaben eingegeben haben.

Versuchen wir es mit einem anderen Namen und suchen wir nach Bruna. Wieder zeigt es uns eine Übereinstimmung.

Versuchen wir dieses Mal herauszufinden, ob wir eine Suche anhand des Nachnamens durchführen können. Ich gebe Lyles ein, das ist Brunas Nachname.

Wie Sie sehen, wurde Bruna Lyles zwar angezeigt, als ich den Vornamen als Suchbegriff verwendete, aber als ich versuchte, den Nachnamen einzugeben, wurde keine Übereinstimmung angezeigt. Das liegt daran, dass wir in unserer Formel noch nicht auf andere Spalten verwiesen haben.

Hinzufügen von Spalten zu einem PowerApps-Suchfeld

Kehren wir zur Bearbeitungsleiste zurück und fügen wir Nachname hinzu. Dadurch können wir auch Suchen mit Daten in der Spalte „Nachname“ durchführen.

Fügen wir auch den AgentNamen hinzu. Drücken Sie dann die Eingabetaste, um die Formel fertigzustellen.

Jetzt bekommen wir endlich eine Übereinstimmung, wenn wir nach dem Nachnamen Lyles suchen.

Hinzufügen eines funktionierenden Suchsymbols und Ausblenden der Suchleiste

In den meisten Apps gibt es nicht nur eine Suchleiste. Sie sehen außerdem ein Suchsymbol. Fügen wir das also zu diesem Bildschirm hinzu.

Suchen Sie einfach im Dropdown-Menü „Symbole“ unter dem Menüband „Einfügen“ nach „Suchen“.

Verschieben wir es auf die rechte Seite der Suchleiste.

Dann ändern wir die Farbe in Weiß, damit sie mit den anderen Elementen übereinstimmt.

Da wir nun ein Suchsymbol haben, besteht das Ziel hier darin, die Suchleiste auszublenden und sie nur dann anzuzeigen, wenn wir auf das Suchsymbol klicken.

Wenn wir auf die Suchleiste klicken und den Eigenschaftenbereich rechts überprüfen, wird angezeigt, dass die Sichtbarkeit aktiviert ist.

Wenn wir die Sichtbarkeitseigenschaft im Eigenschaften-Dropdown überprüfen, wird angezeigt, dass die Sichtbarkeit auf „true“ gesetzt ist.

Wenn wir das auf „false“ setzen, verschwindet das Textfeld. Das ist es, was wir wollen.

Machen Sie sich keine Gedanken darüber, auf das Textfeld zu verweisen, wenn es nicht mehr sichtbar ist. Wir können darauf immer noch verweisen, indem wir auf den Namen des Elements in der Liste im linken Bereich klicken.

Hier kommen nun Variablen ins Spiel. Die Verwendung von Variablen in PowerApps haben wir in einem anderen Tutorial besprochen.

Da wir möchten, dass jedes Mal etwas passiert, wenn wir auf das Suchsymbol klicken; Wir werden OnSelect verwenden.

Wir werden eine Variable namens UpdateContext verwenden.

Um UpdateContext verwenden zu können, benötigen wir ein Variablenwörterbuch in geschweiften Klammern. Lassen Sie uns SearchVisible verwenden und das auf true setzen.

Nachdem wir nun die Variable eingerichtet haben, verknüpfen wir die Sichtbarkeitseigenschaft unseres Textfelds mit der tatsächlichen Variablen. Klicken Sie einfach auf TextInput1 und stellen Sie dann die Sichtbarkeit auf SearchVisible ein.

Sobald wir die Variable mit dem Textfeldelement verknüpft haben, wird das Suchfeld nur angezeigt, wenn wir auf das Symbol klicken.

Bei unserem aktuellen Setup bleibt das Textfeld auch dann auf dem Bildschirm, wenn Sie Ihre Suche abgeschlossen haben. Im Idealfall möchten wir, dass das verschwindet, sobald wir es nicht mehr brauchen.

Also kehren wir zum Symbol zurück und ändern die Formel für OnSelect. Dieses Mal möchten wir, dass die entgegengesetzte Aktion ausgeführt wird, wenn wir ein zweites Mal auf das Symbol klicken.

Um eine gegenteilige Aktion festzulegen, müssen wir lediglich ein Ausrufezeichen hinzufügen. Da SearchVisible derzeit das Textfeld anzeigt, lässt SearchVisible das Textfeld verschwinden.

Wenn wir nun zum ersten Mal auf das Symbol klicken, wird das Suchfeld angezeigt. Dies bedeutet, dass die Sichtbarkeitseigenschaft wahr wird.

Wenn wir erneut auf das Symbol klicken, wird die Sichtbarkeit auf „falsch“ gesetzt und das Textfeld verschwindet.

Hinzufügen eines Hinweises zur Suchleiste

Da wir die Suchleiste so eingestellt haben, dass Elemente nach Vorname, Nachname oder Agentenname gefiltert werden, wäre es sinnvoll, einen Hinweis hinzuzufügen, damit Benutzer wissen, welche Suchbegriffe sie verwenden müssen.

Markieren Sie dazu einfach die Suchleiste und gehen Sie dann zum rechten Bereich. Geben Sie unter „Eigenschaften“ „Suchvorname, Nachname oder Agentenname“ ein.

Jetzt sehen wir diesen Hinweis in der Suchleiste, was den Benutzern die Suche erleichtert.

Dieser Hinweis verschwindet auch, sobald der Benutzer auf die Suchleiste klickt und mit der Eingabe beginnt.

Power Apps-Einführung: Definition, Features, Funktionen und Bedeutung
Power Apps-Umgebungen: Die App-Elemente richtig einrichten
Power Apps Canvas: So erstellen Sie eine App von Grund auf

Abschluss

Das PowerApps-Suchfeld ist definitiv eines der Dinge, die Sie Ihrer App hinzufügen müssen, insbesondere wenn Sie mit einer großen Datenmenge in Ihrer Galerie arbeiten.

Denken Sie daran, dass die erfolgreichsten Apps auf Benutzerfreundlichkeit und intuitive Steuerung Wert legen. Das Hinzufügen einer Suchfunktion deckt diese Anforderungen definitiv ab.

Alles Gute,

Henry