Dans cet article, je mettrai en évidence l’un des widgets de barre de progression disponibles, qui est un excellent outil pour afficher la progression d’un flux de travail à l’utilisateur.
Pourquoi utiliser un widget de barre de progression ?
Lorsque vous effectuez un processus en plusieurs étapes dans votre application (comme remplir un formulaire de commande ou répondre à une enquête), avoir une indication visuelle de l'état d'avancement de votre travail contribue à une expérience utilisateur optimale. C'est là qu'intervient le widget de barre de progression. Ce widget donne aux développeurs la possibilité d'afficher visuellement la progression d'un utilisateur final en utilisant plusieurs styles différents pour garantir que le message de progression est transmis avec succès à l'utilisateur final.
Trouver le widget de barre de progression
Vous pouvez trouver les widgets de la barre de progression dans le Mendix App Store. Plusieurs widgets de barre de progression sont répertoriés lorsque vous recherchez « barre de progression », mais l'objectif principal de ce blog sera le Barre de progression de Bootstrap widget créé par Flock of Birds :
Fonctionnalité du widget
Le widget Bootstrap Progress Bar affiche simplement la barre de progression appropriée avec un nombre compris entre 0 et 100 pour indiquer le pourcentage d'achèvement. Il est également possible d'afficher du texte après le nombre dans la barre de progression (par exemple, vous pouvez afficher « 75 » ou « 75 % terminé »).
Configuration du widget
La première chose que vous devrez faire est de lier le widget au bon Attribut de progression et Style Bootstrap:
L'attribut progress est l'entier qui affiche la progression terminée et doit être défini sur un nombre compris entre 0 et 100. Le style Bootstrap peut être utilisé pour modifier l'apparence de la barre de progression si elle correspond à l'une des valeurs suivantes : info, danger ou réussite. Le style Bootstrap peut être lié à l'attribut progress via des microflux afin que, par exemple, une progression de 0 % puisse être affichée dans la barre de progression dans le « style Bootstrap danger » tandis qu'une progression de 100 % puisse être affichée dans la barre de progression dans le « style Bootstrap réussite ».
Vous pouvez également ajuster plusieurs paramètres d'affichage, tels que ce que la barre de progression affiche après la valeur de pourcentage, la largeur du widget dans l'application, la valeur de changement de couleur et l'apparence de la barre elle-même.
Il est également possible d'attribuer à la barre de progression une action au clic via un microflux comme indiqué ci-dessous. Un cas d'utilisation d'une action de microflux est lorsque l'utilisateur souhaite mettre à jour le pourcentage d'achèvement de la barre de progression en fonction des nouvelles informations renseignées sur la page actuelle de l'utilisateur.
En plus de l'exemple mentionné ci-dessus, vous pouvez également appliquer un style CSS à votre barre de progression et au texte contenu dans la barre.
Ce widget simple mais efficace est un excellent moyen d'illustrer visuellement la progression d'un flux de travail et il donne Mendix les développeurs ont l'avantage d'ajouter une barre de progression facile à utiliser à leurs pages !