Mit 4D 20 R6 hat Qodly Studio for 4D eine spannende neue Funktion eingeführt: Page States. Vielleicht sind Sie schon auf unseren vorherigen Beitrag gestoßen, aber lassen Sie uns erkunden, was dieses Feature so wertvoll für dynamische UIs macht.
Stellen Sie sich UIs vor, die sich sofort an verschiedene Benutzerschritte oder Kontexte anpassen.
Hier sind einige häufige Anwendungsfälle, in denen Page States glänzen:
- Aktivieren oder Deaktivieren von Komponenten auf der Grundlage von Benutzeraktionen (z. B. die Schaltfläche „Speichern“ nur aktivieren, wenn alle Pflichtfelder ausgefüllt sind).
- Umschalten zwischen hellen und dunklen Modi mit einem einfachen Toggle.
- Beschränken Sie den Zugriff auf Aktionen (Lesen, Aktualisieren usw.) auf der Grundlage von Benutzerrechten.
Seitenzustände: Eine dynamische Lösung für interaktive Benutzeroberflächen
Aber was genau ist ein Seitenstatus? Ein Zustand wird dadurch definiert, wie er sich von der ursprünglichen Qodly-Seite, der so genannten Basisseite, unterscheidet. Er ermöglicht es Ihnen, UI-Elemente bedingt sichtbar zu machen oder verschiedene Stile auf der Grundlage von Benutzerinteraktionen anzuwenden. Und das alles beginnt mit der Basisseite, dem ursprünglichen Layout Ihrer Benutzeroberfläche.
Für die Verwaltung der Zustände gibt es einen neuen Abschnitt Zustände.
Lassen Sie uns mit einem einfachen Beispiel beginnen.
Diese Qodly-Seite hat eine Style-Box mit einem transparenten Hintergrund. Es ist die Basisseite.
Wenn Sie dem Benutzer eine Variation der Basisseite präsentieren möchten, erstellen Sie einen neuen Status, wählen ihn in der Statusliste aus und gestalten ihn.
Hier wurde ein grüner Status erstellt, der einen grünen Hintergrund anstelle des transparenten Hintergrunds der Basisseite hat.
Außerdemwurde ein violetter Status mit einem violetten Hintergrund anstelle des transparenten Hintergrunds der Basisseite erstellt.
Der Zweck besteht darin, einen Status je nach Situation, die der Benutzer erlebt, zu aktivieren oder zu deaktivieren.
Auf einer Qodly-Seite können Sie so viele Zustände erstellen, wie Sie benötigen, je nach den Anwendungsfällen, die der Endbenutzer vorfindet.
Es können mehrere Zustände gleichzeitig aktiviert werden.
Wie können Sie Zustände aktivieren oder deaktivieren?
Das Aktivieren oder Deaktivieren eines Status kann auf drei Arten erfolgen:
- Über Standardaktionen
- Über die Bedingungsbindung
- Über Backend-Code auf dem Server
die Standardaktionen für den Zustand
Dank der Standardaktionen können Sie Zustände aktivieren/deaktivieren, wenn der Benutzer mit der Seite interagiert.
In dem folgenden Beispiel schlägt die Benutzeroberfläche einen hellen und einen dunklen Modus vor. Der Zustand Light behandelt den hellen Modus mit einem lightMode CSS
und der Zustand Dunkel behandelt den dunklen Modus mit einem darkMode-CSS
Unten sehen Sie die Basisseite. Wenn der Benutzer auf das Lichtsymbol klickt, wird der helle Zustand aktiviert und der dunkle Zustand deaktiviert.
(Und umgekehrt, wenn der Benutzer auf das dunkle Symbol klickt: der dunkle Zustand wird aktiviert und der helle Zustand deaktiviert)
Hier ist das Endergebnis.
Bedingte Zustände
Hier passiert die eigentliche Magie. Zustände können an Bedingungen gebunden werden, so dass Ihre Benutzeroberfläche auf bestimmte Kriterien wie Benutzerrechte oder Datenwerte reagieren kann. Der Zustand wird dynamisch aktiviert oder deaktiviert, je nachdem, ob die Bedingung als TRUE oder FALSE bewertet wird.
In diesem Beispiel zeigt die Benutzeroberfläche eine Liste von Produkten und einen Abschnitt mit Produktdetails an, der den ausgewählten Produktnamen aktualisiert.
Es wurden zwei Zustände erstellt:
- der Zustand ReadOnly
- der Aktualisierungsstatus
Es ist leicht zu erraten: Der Update-Status wird benötigt, wenn der Benutzer das ausgewählte Produkt aktualisieren kann, während der ReadOnly-Status benötigt wird, wenn der Benutzer die Produktdaten nur anzeigen kann.
Unten sehen Sie den Update-Status. Im Abschnitt Produktdetails ist das Feld Name aktiviert, und es gibt eine Schaltfläche Speichern.
Und hier ist der Status ReadOnly. Im Abschnitt „Produktdetails“ ist nur das Feld „Name“ deaktiviert.
Die Status „ReadOnly“ und „Update“ sind jeweils an eine Bedingung gebunden. Die Möglichkeit, ein Produkt zu aktualisieren, hängt von dem ausgewählten aktualisierbaren Produktattribut ab.
Der Status „Nur Lesen“ ist aktiviert, wenn die Bedingung theProduct.updatable = false ist. Der Aktualisierungsstatus ist aktiviert, wenn die Bedingung theProduct.updatable = true ist.
Hier ist das Endergebnis.
Dank des leistungsstarken und benutzerfreundlichen Bedingungseditors können Sie verschachtelte Bedingungen erstellen, um die komplexeste Geschäftslogik zu verarbeiten!
Diese Bedingungen können auf Kriterien wie Qodly-Quellwertenbasieren , darauf, ob die Sitzung bestimmte Rechte hat oder nicht, und vieles mehr. Lesen Sie die Dokumentation, um mehr zu erfahren.
Behandlung von Zuständen vom Server
Der letzte Punkt, den Sie beachten sollten, ist, dass das Aktivieren/Deaktivieren von Zuständen im Backend-Code hilfreich sein kann, wenn einige Geschäftsregeln nur im Backend ausgewertet werden können.
In der beigefügten Demo sehen Sie ein Beispiel dafür. Der Benutzer wählt Produkte aus. Sobald der Gesamtbetrag der ausgewählten Produkte größer oder gleich $300 ist, wird ein Status aktiviert, der die Auswahl von Produkten verhindert.
Dank der FunktionenWeb Form.enableState() und Web Form.disableState() ist dies möglich.
Hier ist der folgende Code. Der Status LimitReached verhindert jede Auswahl durch den Benutzer.
If ($tempSelection.sum("price")>=300)
Web Form.enableState("LimitReached")
Web Form.disableState("Initial")
End if Hier ist das Endergebnis.
Möchten Sie es in Aktion sehen?
Laden Sie die beigefügte Play In Qodly Studio-Demo herunter, um zu erfahren, wie Sie die Seitenzustände verwenden und wie Sie Ihren Endbenutzern eine dynamische Schnittstelle anbieten können.