Die Erstellung einer Website oder Webanwendung ist ohne Navigation fast undenkbar. Die Benutzer müssen zwischen den Seiten navigieren, verschiedene Bereiche der Website öffnen und verschiedene Informationen erhalten.
Seitendaten
Bevor Sie sich jedoch mit der Navigation selbst befassen, sollten Sie verstehen, welche Informationen Sie über eine Seite im Allgemeinen erhalten können und woraus eine URL bestehen kann. Zu diesem Zweck können Sie den Get Current Page Block verwenden und sehen, welche Daten er liefert.
- URL - die Adresse der Seite in ihrer üblichen Form. Zum Beispiel - https://vdjyien-app.apms.io/admin/someurl/
- Page - der interne Bezeichner der Seite, der in AppMaster Geschäftsprozessen verwendet wird. Er besteht aus 22 Zeichen, einer zufälligen Kombination aus Buchstaben und Zahlen.
- Title - Seitentitel. Der Name der Seite in der für Menschen lesbaren Form.
- URL Params. Eine Seite kann so erstellt werden, dass ihre Adresse nicht streng festgelegt ist, sondern auch variable Werte enthält. Eine Seite kann zum Beispiel eine Liste von Artikeln in einem bestimmten Bereich anzeigen, und der Bezeichner dieses Bereichs wird einfach als Parameter in der URL angegeben.
- Query Params. Zusätzliche Abfrageparameter werden am Ende der URL nach dem "?"-Zeichen geschrieben. Bei einer Seite mit einer Liste von Artikeln könnten beispielsweise die Parameter "?_limit=12&lang=en" angeben, dass nur 12 Artikel in englischer Sprache erforderlich sind.
Stellen Sie sich zum Beispiel eine Seite vor, die eine Liste von Blog-Artikeln enthält. Ihre URL lautet "/blog/:theme/:author". Das Symbol ":" zeigt an, dass der danach angegebene Wert ein Parameter ist. Als Parameter werden die Bezeichner des Themas (theme) und des Autors (author) des Artikels verwendet.
Um zu dieser Seite zu navigieren, müssen Sie den Navigate Block im Geschäftsprozess verwenden.
Die Parameter entsprechen denen, die zuvor im Get Current Page Block analysiert wurden. In diesem Fall spielt der eigentliche Titel der Seite für die Navigation keine Rolle, da die Seite selbst als interner Bezeichner angegeben ist (Sie können sie aus der Liste der Seiten auswählen).
Wenn die Seite keine Parameter hat, kann die Navigation sehr einfach sein; wählen Sie einfach die gewünschte Seite aus der Liste aus. In diesem Beispiel gibt es jedoch Parameter, die an den Navigate Block übergeben werden müssen.
Erstellen einer Quellseite für die Navigation
Betrachten wir die Verwendung von Parametern an einem konkreten Beispiel. Zu diesem Zweck erstellen wir eine separate Seite, von der aus wir in Zukunft zur Zielseite gehen müssen. Fügen wir zwei Select Elemente (eines für die Auswahl aus der Liste der Themen, das zweite für die Liste der Autoren) und füllen sie mit Testwerten.
Danach müssen Sie einen Workflow für die Navigate Schaltfläche einen Workflow einrichten, über den die Navigation zur Landing Page funktionieren soll. Dieser Prozess beginnt damit, dass Sie die ausgewählten Werte aus den Select Blöcken.
Der nächste Schritt ist die Befüllung der Key-Value virtuellen Modelle. Ihr Array wird verwendet, um die notwendigen Parameter an den Navigate Block zu übergeben. Das Modell selbst besteht aus einem Schlüssel (Key), der der Name des Parameters ist (in diesem Beispiel Thema und Autor), sowie seinem Wert (Value, dem direkten Namen des ausgewählten Themas oder dem Namen des Autors).
Bitte beachten Sie, dass viele Zeichen in der URL nicht verwendet werden können, einschließlich des Leerzeichens. Daher wird ein Name, der in der URL als "Frank Paulsen" geschrieben wird, automatisch in "Frank%20Paulsen" umgewandelt. URL Encode und URL Decode Blöcke können zum Kodieren und Dekodieren nach URL-Standards verwendet werden. In diesem Beispiel verwenden wir für eine bessere Übersichtlichkeit und Schönheit der URL den Replace string Block und ersetzen unabhängig davon das Leerzeichen durch das "-"-Zeichen, wodurch der Name als "Frank-Paulsen" dargestellt wird.
Der letzte Schritt besteht darin, die generierten Schlüssel-Wert-Paare in einem einzigen Array zusammenzufassen, das als Parameter an den Navigate Block zu übergeben.
Wenn Sie nun auf die Schaltfläche klicken, werden Sie auf die Seite https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/ weitergeleitet.
Sie können feststellen, dass die URL aus einem konstanten Teil (https://vdjyien-app.apms.io/admin/blog/) und einer Variablen (No-code/Frank-Paulsen/) besteht, die aus den auf der vorherigen Seite ausgewählten Werten gebildet wurde.
Verwendung von URL-Parametern zur Verwaltung von Inhalten
Die nächste Aufgabe besteht darin, die empfangenen URL-Parameter zu verwenden, um den Inhalt der Seite zu ändern. Diese Parameter können z. B. verwendet werden, um eine GET Anfrage an die Datenbank zu stellen, aber in unserem Beispiel werden wir einfach ihren Wert auf der Seite anzeigen. Zu diesem Zweck fügen wir der Seite zwei Container mit den entsprechenden Label hinzu.
Richten wir einen Geschäftsprozess ein, der auf dem onShow Auslöser in einem der Container Label. Seine Aufgabe wird es sein, die URL zu analysieren, ihre Parameter abzurufen und sie auf der Seite anzuzeigen. Um dies zu tun, verwenden wir den Get Current Page Block und ermitteln den Wert jedes Parameters in einer Schleife.
Als nächstes erhalten wir durch den Switch Block den Wert des Parameters ab und zeigt ihn in der entsprechenden Label. Gleichzeitig wird für den Parameter Author das "-" durch ein Leerzeichen ersetzt.
Wenn Sie nun zu einer bestimmten Seite navigieren, wird nicht nur deren statische Adresse verwendet, sondern auch URL-Parameter, die sich auf die tatsächliche Anzeige des Inhalts der Seite auswirken.
Verwendung von Abfrageparametern
Auf fast dieselbe Weise können Sie Abfrageparameter hinzufügen (Query Params). Der Hauptunterschied zu URL-Parametern besteht darin, dass sie optional sind. In diesem Beispiel enthält die URL notwendigerweise eine Angabe darüber, welche Informationen auf der Seite angezeigt werden sollen (welcher thematische Abschnitt und welcher Autor), und zusätzliche Parameter sorgen für die notwendigen Klarstellungen. Mit den Parametern limit und offset können Sie zum Beispiel die Paginierung organisieren und genau festlegen, wie viele Datensätze aus der Datenbank abgefragt werden sollen und ab welchem Datensatz die Ausgabe beginnen soll.
Fügen wir zwei neue Felder auf der Startseite hinzu - Input (Integer). Wir werden die Parameter limit und offset in diese Felder schreiben.
Fügen wir die notwendigen Ergänzungen zum Geschäftsprozess der Navigationsschaltfläche hinzu. Bilden wir ein Array von Query Params mit den Werten limit und offset.
Der letzte Schritt besteht darin, Elemente mit Informationen aus den Abfrageparametern hinzuzufügen und den Geschäftsprozess für die Zielseite zu vervollständigen.
Das Ergebnis sollte eine URL wie diese sein:
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
Die Anwendung implementiert die Navigation mit URL-Parametern und Abfrageparametern und bestimmt den Inhalt der Zielseite dynamisch in Abhängigkeit von diesen Parametern.
