In diesem Beitrag werde ich eines der verfügbaren Fortschrittsbalken-Widgets hervorheben, das ein großartiges Tool ist, um dem Benutzer den Fortschritt eines Workflows anzuzeigen.
Warum ein Fortschrittsbalken-Widget verwenden?
Wenn Sie in Ihrer App einen mehrstufigen Prozess durchlaufen (z. B. ein Bestellformular ausfüllen oder an einer Umfrage teilnehmen), ist eine visuelle Anzeige, wie weit Sie vom Abschluss entfernt sind, ein großartiges Benutzererlebnis. Hier kommt das Fortschrittsbalken-Widget ins Spiel. Dieses Widget gibt Entwicklern die Möglichkeit, den Fortschritt eines Endbenutzers visuell anzuzeigen und dabei mehrere verschiedene Stile zu verwenden, um sicherzustellen, dass die Fortschrittsmeldung erfolgreich an den Endbenutzer übermittelt wird.
Suchen des Fortschrittsbalken-Widgets
Sie finden die Fortschrittsbalken-Widgets im Mendix App Store. Es gibt mehrere Fortschrittsbalken-Widgets, wenn Sie nach „Fortschrittsbalken“ suchen, aber der Schwerpunkt dieses Blogs liegt auf dem Bootstrap-Fortschrittsbalken Widget erstellt von Flock of Birds:
Widget-Funktionalität
Im Wesentlichen zeigt das Bootstrap Progress Bar-Widget einfach den entsprechenden Fortschrittsbalken mit einer Zahl zwischen 0 und 100 an, um den Prozentsatz der Fertigstellung anzugeben. Es ist auch möglich, Text nach der Zahl im Fortschrittsbalken anzuzeigen (Sie können beispielsweise „75“ oder „75 % abgeschlossen“ anzeigen).
Konfigurieren des Widgets
Als erstes müssen Sie das Widget mit dem richtigen Fortschrittsattribut und Bootstrap-Stil:
Das Fortschrittsattribut ist die Ganzzahl, die den abgeschlossenen Fortschritt anzeigt, und sollte auf eine Zahl im Bereich von 0 bis 100 eingestellt werden. Der Bootstrap-Stil kann verwendet werden, um das Erscheinungsbild des Fortschrittsbalkens zu ändern, wenn er einen der folgenden Werte hat: Info, Gefahr oder Erfolg. Der Bootstrap-Stil kann über Mikroflüsse mit dem Fortschrittsattribut verknüpft werden, sodass beispielsweise im Fortschrittsbalken im „Bootstrap-Stil Gefahr“ ein Fortschritt von 0 % angezeigt werden könnte, während im „Bootstrap-Stil Erfolg“ ein Fortschritt von 100 % angezeigt werden könnte.
Darüber hinaus können Sie verschiedene Anzeigeeinstellungen anpassen, etwa was der Fortschrittsbalken nach dem Prozentwert anzeigt, die Breite des Widgets in der App, den Farbwechselwert und das Erscheinungsbild des Balkens selbst.
Es ist auch möglich, dem Fortschrittsbalken eine On-Click-Aktion durch einen Mikrofluss zuzuweisen, wie unten gezeigt. Ein Anwendungsfall für die Verwendung einer Mikroflussaktion ist, wenn der Benutzer den Prozentsatz der Fertigstellung des Fortschrittsbalkens basierend auf neuen Informationen aktualisieren möchte, die auf der aktuellen Seite des Benutzers eingegeben wurden.
Zusätzlich zu dem oben genannten Beispiel können Sie auch CSS-Stile auf Ihren Fortschrittsbalken und den darin enthaltenen Text anwenden.
Dieses einfache, aber effektive Widget ist eine großartige Möglichkeit, den Fortschritt eines Workflows visuell darzustellen, und es gibt Mendix Entwickler haben den Vorteil, ihren Seiten einen benutzerfreundlichen Fortschrittsbalken hinzufügen zu können!