Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

UX Design mit Axure 8 Grundkurs

Komplexere Filter erstellen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Am Beispiel einer "Search as you type"-Suche lernen Sie hier, wie man komplexe Filter erstellt.
05:58

Transkript

In diesem Video werde ich Ihnen zeigen, wie Sie ein komplexen Filter, nämlich ein "Search as you type" Filter auf Ihre Repeater-Inhalte anwenden können. Dazu nutzen wir den OnTextChange-Event des Eingabefeldes und erzeugen einen neuen Filter für unseren Repeater. Wir geben unserem Filter einen eindeutigen Namen und je nachdem wir das Verhalten meines Filters sein soll, kann ich hier festlegen, dass dieser Filter alle anderen Filter ersetzt. In unserem Fall sage ich "Nein", da ich will, dass falls eine Kategorie ausgewählt ist, die Elemente nur danach gesucht werden. Diesmal möchte ich mir den Titel des Elementes anschauen. Jedoch kann ich nicht, wie eben schauen, ob der Name gleich dem Suchergebnis ist, da der Nutzer ja, auch ein Teil des Titels eingeben kann und trotzdem das Ergebnis gefunden werden soll. Wenn ich die Dropdown-Liste mit den verschieden Variablen und Funktionen öffne, werden Sie sehen, dass es eine ganze Reihe von Funktionen und Aktionen gibt, mit denen wir Texte manipulieren und bearbeiten können. Diese Funktionen sind eigentlich Javascript-Funktionen. Leider werden sie nicht in der Axure-Dokumentation oder im User-Interface erläutert. Die Funktion, die ich aber benötige, ist "IndexOf". "IndexOf" ist eine Javascript-Funktion, die das erste Vorkommen eines Zeichens oder einer Zeichenkette ermittelt. Der erste Treffer kann bei Null beginnen, falls die Suche erfolglos ist, gibt die Funktion "-1" zurück. Das bedeutet, dass ich den "IndexOf" verwende, um den ersten Treffer meines Elementes zu finden. Dazu füge ich eine lokale Variable hinzu, die den Text des Eingabefeldes beinhaltet. Da ich überprüfen will, ob der Text des Eingabefeldes in dem Titel enthalten ist, muss ich schauen, ob der Wert größer ist als "-1", da "-1" bedeutet "kein Treffer innerhalb dieses Textes". Lassen nämlich noch einmal die Abfrage erläutern. Von unserem aktuellen Eintrag schauen wir uns den Titel an. Innerhalb dieses Titels suchen wir nach dem Inhalt unseres Textfeldes. Wird er gefunden, ist der Wert größer als "-1". Lassen uns den Filter im Preview Mode überprüfen. Wie Sie sehen, funktioniert der Filter recht gut. Jedoch gibt es noch Verbesserungspotential, da unsere Suchergebnisse noch nicht kontextsensitiv sind. Ich finde Axure, aber "axure" klein geschrieben, liefert keine Ergebnisse. Daher müssen wir unsere Abfrage noch ein wenig ergänzen. Ich öffne die Filterregel erneut und verwende die Funktion "toLowerCase". Ich möchte überprüfen, ob der klein geschriebene Inhalt des Textfeldes in dem klein geschriebenen Titel zu finden ist. Dadurch, dass wir beide Texte in Kleinbuchstaben umwandeln, ist unsere Abfrage jetzt kontextsensitiv. Ich bestätige meine Änderungen und überprüfe die Bedingungen erneut im Preview Mode. Wir sehen, dass Axure nun in Groß- oder Kleinschreibung gefunden wird. Wenn Sie, wie in diesem Beispiel, mehrere Filter auf ihren Repeater anwenden, überprüfen Sie, ob Sie die Filterkriterien richtig anwenden und, ob die Filter sich nicht aus Versehen gegenseitig deaktivieren. Denn hier haben wir bei "Add Filter" "Remove other filter" deaktiviert, jedoch haben wir es bei diesem Filter nicht gemacht, denn andernfalls kann der folgende Effekte entstehen. Ich suche nach "my" und finde Einträge in zwei Kategorien. Dieser Filter lässt den anderen Filter aktiv bleiben. Wähle ich hier aber "new" aus, möchte ich ja nur diesen Eintrag finden, da er "my" enthält und zu der Kategorie "new"gehört. Jedoch löscht dieser Filter die Einträge dieses Elementes und ich finde jetzt alle Elemente einer Kategorie. Daher muss ich beim Anwenden dieses Filters diese Checkbox entfernen. Nun werden sich die Filter gegenseitig nicht überschreiben. Ich suche nach "my", finde zwei unterschiedliche Einträge aus unterschiedlichen Kategorien, und grenze so, der Inhalte nur weiter ein. Sie haben in diesem Video gesehen, wie Sie komplexere Filterregeln definieren können, und wie Sie auf Funktion von Javascript zugreifen können, um Texte und Inhalte von Axure in Funktionen zu überprüfen.

UX Design mit Axure 8 Grundkurs

Lernen Sie mit Axure 8 Apps und Webseiten zu konzipieren und prototypisch umzusetzen, ganz ohne Programmiervorkenntnisse.

3 Std. 32 min (53 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Axure RP Pro Axure RP Pro 8
Exklusiv für Abo-Kunden
Erscheinungsdatum:04.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!