Maîtriser les processus UX avec Blazor Wizard 1 : composant personnalisé

Avec le composant UI for Blazor’s Wizard, vous pouvez ajouter un assistant à votre application en quelques minutes, ce qui vous laisse beaucoup de temps pour personnaliser l’interface utilisateur de l’assistant.

Si vous avez besoin de guider votre utilisateur à travers un tâche difficile, un assistant est souvent votre meilleur choix. La pointe du Interface utilisateur Telerik pour Blazor Composant Assistant est de rendre ridiculement facile l’ajout et la personnalisation d’un assistant à votre application afin que vous puissiez aider vos utilisateurs.

Par exemple, pour créer cet assistant :

tout ce dont vous avez besoin est ce balisage Razor :

<TelerikWizard>
    <WizardSteps>
        <WizardStep Label="Overview">
            <Content>
                <h2>Overview</h2>
            </Content>
        </WizardStep>
       …repeat WizardStep for each step in your wizard…
    </WizardSteps>
</TelerikWizard>

Non seulement vous obtiendrez le bouton Suivant intégré affiché dans la capture d’écran, mais, au fur et à mesure que l’utilisateur parcourt l’assistant, un bouton Précédent apparaîtra comme par magie à côté de lui dans chacune des étapes suivantes. Et, à la dernière étape de l’assistant, le bouton Suivant se transformera en un bouton Terminé. La progression dans l’assistant Blazor sera automatiquement renvoyée à l’utilisateur dans la liste des étapes en haut de l’assistant.

Après avoir conçu l’interface utilisateur pour chacune de vos étapes en utilisant une combinaison de HTML et de composants, tout ce que vous avez à faire est d’écrire une méthode qui implémente la logique métier de l’assistant, en utilisant les entrées de l’interface utilisateur de chaque étape. Enfin, vous devez lier cette méthode à TelerikWizard OnFinish un événement:

<TelerikWizard OnFinish="@DoTheWizardStuff" …

Mais vous souhaiterez peut-être améliorer cette interface utilisateur par défaut.

Habiller l’écran

Le TelerikWizard pour Blazor vous donne beaucoup de contrôle sur cet affichage par défaut, si vous voulez en profiter. Si, par exemple, vous souhaitez enrichir cette liste d’étapes en haut de l’assistant avec des icônes, vous pouvez attribuer des icônes à chaque étape en utilisant le Icon attribut sur un WizardStep:

<WizardStep Label="Overview" Icon="info-circle" >        

Cela peut vous donner un affichage comme celui-ci:

Vous pouvez trouver une liste complète des icônes disponibles sur le Site Telerik. Si vous ne trouvez pas d’icône appropriée parmi celles qui y sont répertoriées, vous pouvez remplacer le Icon avec l’image de votre choix en utilisant les WizardStep’s ImageUrl attribuer ou améliorer la mise en forme de l’icône avec le IconClass attribut.

Un conseil : si vous devez élargir la signification d’une icône pour l’adapter à une étape de votre assistant, rappelez-vous que vous ne ont pour inclure une icône. Le but de l’icône est d’aider votre utilisateur à comprendre la tâche difficile que votre assistant les guide à travers – une icône obscure ne va pas aider avec cela.

En fait, vous pouvez abandonner complètement les icônes et simplement utiliser du texte à chaque étape en définissant les paramètres de WizardStep. Text propriété. Vous pouvez définir Text propriété aux icônes, chiffres ou texte (bien que vous deviez garder le texte court afin qu’il tienne dans les cercles qui composent l’interface de la barre de progression). La définition de texte sur toutes les WizardSteps donne un balisage comme celui-ci avec, peut-être, « trop » de contenu dans la propriété Text :

<WizardStep Text="Pick Date Range" >

Et vous donnerait un affichage comme celui-ci, avec du texte sortant des cercles :

Gestion dynamique des étiquettes et des icônes

Si vous voulez beaucoup de texte dans votre interface utilisateur, vous feriez mieux d’utiliser la propriété Label des étapes, qui affiche votre texte sous les cercles et réserve les cercles pour vos icônes. Ce balisage utilise les propriétés Label et Icon (et c’est ce que vous avez vu dans le premier graphique de ce post):

WizardStep Label="Case Defined" 
                    Icon="unlock">

Si vous utilisez à la fois vos libellés et vos icônes, mais que vous disposez d’un environnement dans lequel vous ne souhaitez utiliser que les libellés (sur des écrans plus petits, par exemple), vous pouvez utiliser le WizardStepperSettings pour supprimer dynamiquement vos icônes. Tout d’abord, ajoutez un WizardSettings élément à votre TelerikWizard et imbriquer un WizardStepperSettings élément à l’intérieur de celui-ci. Après cela, réglez le StepType à un champ (ou propriété dans votre code) :

<WizardSettings>
        <WizardStepperSettings StepType="@suppressIcons"/>        
</WizardSettings>

Dans votre code, vous devez déclarer ce champ ou cette propriété en tant que StepperStypeType et l’initialiser. Ce code déclare un champ et l’initialise pour afficher à la fois les étiquettes et les icônes :

private StepperStepType suppressIcons = StepperStepType.Steps;

Maintenant, ailleurs dans votre code, vous pouvez supprimer vos icônes en définissant le champ sur StepperStype.Labels:

suppressIcons = StepperStepType.Labels

Votre affichage passera de ceci :

Pour ça:

Vous pouvez également contrôler l’endroit où la liste des étapes s’affichera en définissant les paramètres de l’assistant. StepperPosition attribut à une valeur de la WizardStepperPosition enum. La valeur par défaut est top mais, si vous préférez, vous pouvez faire en sorte que la liste s’affiche sur le côté gauche avec ce balisage :

<TelerikWizard StepperPosition="WizardStepperPosition.Left" …

Cela vous donnera un affichage quelque chose comme ceci:

Vous ne pouvez pas faire disparaître la liste des étapes à l’aide de code ou de balisage Razor mais, par défaut, le code HTML de l’étape se voit attribuer une règle CSS appelée k-stepper. Vous pouvez définir la propriété d’affichage CSS pour cette règle afin que l’affichage de la liste des étapes soit supprimé. Une règle CSS comme celle-ci ferait l’affaire :

.k-stepper {display: none !important;}

Et, bien sûr, rien ne vous empêche de lier les WizardSteps Icon, Label, Text ou d’autres attributs aux champs ou aux propriétés et en les définissant dynamiquement à partir du code.

Vos responsabilités

Mais vous n’avez vraiment rien à faire dans votre application Blazor. En réalité, tout ce que vous avez à faire est de créer une interface utilisateur à chaque étape, de vérifier que l’utilisateur saisit de bonnes données et de câbler tout code à exécuter lorsque l’utilisateur clique sur le bouton Terminé.

En ce qui concerne la création de l’interface utilisateur pour chaque étape, toute combinaison de code HTML et de composants que vous souhaitez mettre à l’intérieur du Content élément imbriqué à l’intérieur de chaque WizardStep marchera. Toutefois, si vous profitez de l’intégration avec le Composant d’interface utilisateur Telerik Form pour Blazorvous pouvez utiliser le système de validation du formulaire pour simplifier la validation des entrées de l’utilisateur.

Vous pouvez faire plus, bien sûr, vous ne devriez probablement pas laisser l’utilisateur passer à l’étape suivante de votre assistant si votre validation trouve des problèmes, par exemple. Je vais discuter de la façon de gérer cela dans mon prochain post.