Maîtrisez les processus UX avec Blazor Wizard 3 : navigation personnalisée

Vous pouvez améliorer votre assistant simplement en remplaçant les boutons Suivant/Précédent par défaut par vos propres boutons et code.

Dans un message précédent J’ai souligné comment le Interface utilisateur Telerik pour le composant Blazor Wizard rend extrêmement facile l’ajout d’un assistant à votre application Blazor (un excellent outil pour aider les utilisateurs à travers un tâche difficile). Si tout ce dont vous avez besoin est de guider l’utilisateur de la première à la dernière étape, vraiment, le composant Wizard ne nécessite aucune personnalisation (surtout si vous utilisez l’interface utilisateur Telerik pour Blazor Composant de formulaire pour créer l’interface utilisateur de chaque étape).

Si vous souhaitez personnaliser votre assistant, vous allez probablement chercher d’abord à donner à l’utilisateur plus de contrôle sur le processus de navigation—plutôt que de forcer l’utilisateur à continuer à cliquer sur son chemin à travers toutes les étapes, vous voudrez peut-être donner à l’utilisateur l’utilisateur la possibilité de passer à une étape spécifique ou de revenir rapidement à une étape précédente. Cela peut inclure le retour aux étapes de début ou de fin, par exemple.

Renoncer au contrôle

Le moyen le plus simple de laisser l’utilisateur choisir «l’étape suivante» consiste à laisser l’utilisateur choisir l’étape qu’il souhaite dans la liste des étapes en haut de l’assistant. Par défaut, les utilisateurs ont déjà la possibilité de sélectionner « l’étape suivante » dans la liste des étapes, mais uniquement s’ils choisissent l’étape avant et l’étape après l’étape en cours (c’est-à-dire les étapes que les boutons Suivant et Précédent amèneraient l’utilisateur à , De toute façon).

Vous pouvez laisser l’utilisateur sélectionner n’importe quelle étape de la liste en ajoutant un WizardSettings élément à l’intérieur de votre TelerikWizard élément et, à l’intérieur de cet élément, en ajoutant un WizardStepperSettings étiquette. Sur cette balise, vous pouvez permettre à l’utilisateur de sélectionner l’étape qu’il souhaite en définissant le WizardStepperSettingsc’est Linear attribut à faux :

<WizardSettings>
        <WizardStepperSettings Linear="false"/>        
</WizardSettings>

Lorsque l’utilisateur sélectionne une étape dans la liste du haut, la OnChange L’événement pour l’étape que l’utilisateur quitte se déclenche toujours, comme si l’utilisateur avait cliqué sur le bouton Suivant ou Précédent de l’étape.

Le problème avec l’activation de cette fonctionnalité est que vous devez vous assurer qu’avant que l’utilisateur ne clique sur le bouton Terminé à la dernière étape, toutes les entrées sont complètes, correctes et compatibles. Il y a un danger à permettre à l’utilisateur de sauter des étapes parce que votre utilisateur peut arriver à la dernière étape sans avoir saisi les valeurs attendues à une étape précédente.

La solution la plus simple à ce problème consiste, avant que l’utilisateur ne démarre l’assistant, à définir des valeurs par défaut pour chaque valeur que l’utilisateur est censé entrer à chaque étape. Si les étapes précédentes affectent les entrées des étapes ultérieures, vous pouvez trouver nécessaire dans le code de n’importe quelle étape de remplacer les valeurs par défaut pour une étape ultérieure lorsque les utilisateurs effectuent des entrées dans ces étapes précédentes.

Même dans ce cas, à moins que toutes vos étapes ne soient indépendantes de chacune ou (à défaut) qu’aucune étape ultérieure ne soit affectée par les entrées d’une étape précédente, vous devez valider toutes les entrées de l’utilisateur lorsque celui-ci clique sur le bouton Terminé.

Reprendre le contrôle

Une autre option consiste à fournir vos propres boutons de navigation personnalisés pour conserver un certain contrôle sur la navigation de l’utilisateur tout en offrant à l’utilisateur une flexibilité supplémentaire. Si vous souhaitez prendre entièrement en charge vos utilisateurs, par exemple, vous devez fournir une prise en charge différente pour le bouton Suivant que pour le bouton Précédent.

Pour commencer à ajouter vos propres boutons, ajoutez d’abord un WizardButtons élément, imbriqué dans votre TelerikWizard élément. Vous n’avez même pas besoin de mettre quoi que ce soit à l’intérieur du WizardButtons Si vous ne le souhaitez pas, cela éliminera les boutons Suivant/Précédent/Terminé par défaut en bas de l’assistant. Cela peut avoir du sens si vous souhaitez contrôler le passage à «l’étape suivante» à partir de composants à l’intérieur de chaque étape Content élément.

Quelle que soit la façon dont vous avez l’intention de prendre en charge la navigation de votre utilisateur dans votre assistant, vous devrez utiliser le TelerikWizard @bind-value attribut pour lier une variable entière que vous utiliserez pour contrôler « l’étape actuelle » de l’assistant. Cet exemple lie un champ astucieusement appelé currentStep:

<TelerikWizard @bind-Value="currentStep">

Cela nécessite de déclarer un champ correspondant dans votre code (currentStep aurait également pu être déclarée comme propriété) :

private int currentStep = 0;

C’est toute l’infrastructure dont vous avez besoin pour gérer la navigation de l’utilisateur dans l’assistant avec vos propres boutons. Après cela, il ne vous reste plus qu’à incrémenter et décrémenter currentStep pour déplacer l’utilisateur vers n’importe quelle étape.

Reprendre le contrôle : ajouter les boutons

Comme exemple de la façon dont vous pouvez personnaliser les boutons de l’assistant, vous pouvez donner à l’utilisateur non seulement les boutons Suivant, Précédent et Terminé, mais également les boutons « Retour au début » et « Passer à la fin ». Cette conception donnerait à l’utilisateur une première étape qui ressemble à ceci :

La deuxième étape et les étapes suivantes comme celle-ci incluraient un bouton Retour :

Et à la dernière étape, le bouton Suivant se transformerait comme par magie en un bouton Terminé :

Pour mettre en œuvre cette conception, commencez par décider, à l’intérieur du WizardSteps élément, quels composants vous souhaitez afficher à chaque étape. Vous pouvez contrôler les boutons qui s’affichent en enveloppant les composants dans if des instructions qui vérifient quelle étape est « l’étape en cours ». Vous pouvez utiliser la pseudo-variable nommée context que TelerikWizard fournit pour déterminer quelle est l’étape actuelle. Vous devrez également lier chaque bouton à une méthode qui déplacera l’utilisateur vers l’étape appropriée de l’assistant.

En mettant tout cela ensemble, un WizardButtons section qui définissait les boutons Redémarrer, Précédent, Suivant, Terminé et Passer à la fin ressemblerait à ceci :

<WizardButtons>
       @{
            <TelerikButton Icon="caret-alt-to-left" ThemeColor="secondary"
                                        OnClick="Restart"></TelerikButton>
        }
        &nbsp;&nbsp;
        @{
            if (context > 0)
            {
                <TelerikButton ThemeColor="secondary"
                                            OnClick="PreviousButton">Back</TelerikButton>
            }
            if (context < 4)
            {
                <TelerikButton ThemeColor="primary"
                                            OnClick="NextButton">Next</TelerikButton>
            }
            if (context == 4)
            {
                <TelerikButton ThemeColor="primary" 
                                            OnClick="@DoneButton">Done</TelerikButton>
            }
        }
        &nbsp;&nbsp;
        @{
            <TelerikButton Icon="caret-alt-to-right" ThemeColor="secondary"
                       OnClick="SkipToEnd"></TelerikButton>
        }       
    </WizardButtons>

Reprendre le contrôle : faire le bon pas

Les méthodes appelées à partir de ces boutons n’ont pas besoin d’être compliquées : les boutons Suivant et Précédent n’ont qu’à incrémenter ou décrémenter la position actuelle du pas ; le bouton Redémarrer définit simplement le currentStep à 0 (pour passer à la première étape) ; et le bouton Skip-to-End définit le currentStep au numéro de la dernière étape de l’assistant.

Cela signifie que, dans les méthodes des boutons Suivant et Précédent, vous devez déterminer quelle est « l’étape actuelle ». Il y a deux façons de le faire.

Vous pouvez passer la variable de contexte disponible dans votre code Razor à vos méthodes. Dans ce cas, vous devrez réécrire votre OnClick attributs pour passer le context pseudo-variable, comme ceci :

<TelerikButton OnClick="@( () => NextButton(context) )" …

Vos NextButton et PreviousButtons devront accepter le numéro d’étape de contexte comme paramètre et faire ce qu’il faut avec :

private void NextButton(int onStep)
{
    currentStep = ++onStep;
}

Alternativement, vous pouvez utiliser le TelerikWizard @ref attribut pour lier le composant à un champ ou à une propriété de votre code. Ce code lie l’assistant à un champ astucieusement appelé wizard:

<TelerikWizard @ref="wizard" …

Le champ correspondant doit être déclaré en tant que TelerikWizard:

private TelerikWizard wizard;

Dans vos méthodes de bouton Suivant et Précédent, vous pouvez maintenant récupérer la position de l’étape actuelle à partir du wizard des champs Value propriété:

private void PreviousButton()
{
   currentStep = --wizard.Value;
}

Lorsque les utilisateurs changent d’avis

Cependant, si vous considérez comment les utilisateurs utilisent réellement le bouton Précédent, il y a une amélioration que vous voudrez peut-être ajouter à votre code « bouton suivant ».

Le bouton Précédent est là parce que les utilisateurs deviennent plus intelligents sur le processus au fur et à mesure qu’ils le parcourent. Par conséquent, les utilisateurs peuvent accéder à l’étape 5 de votre assistant et, maintenant qu’ils sont plus avancés dans le processus et donc plus intelligents, se rendent compte qu’ils ont fait un choix malheureux à l’étape 2. Lorsque cela se produit, l’utilisateur voudra revenir en arrière. et modifier leurs entrées à l’étape précédente plutôt que de terminer l’étape en cours ou de passer à la suivante.

Mais c’est là que vous voudrez peut-être améliorer le code derrière votre bouton Suivant : L’utilisateur est peut-être devenu plus intelligent à cause d’un message d’erreur sur l’étape en cours. Lorsqu’il y a un problème sur la page, vous ne le faites pas souhaitez que l’utilisateur passe à l’étape suivante. Cependant, votre utilisateur peut se rendre compte que la meilleure façon de résoudre le problème est de revenir à une étape précédente et d’y apporter une modification. Bien que vous ne laissiez pas l’utilisateur passer à l’étape suivante en cas d’erreur, vous devriez être prêt à laisser l’utilisateur revenir à une étape précédente.

Pour cela, vous devez améliorer le code de votre bouton Suivant pour vérifier les erreurs sur la page avant de laisser l’utilisateur avancer (idem pour le bouton Passer à la fin). En supposant que vous utilisez un formulaire pour créer votre l’interface utilisateur de l’étapeton NextButton le code n’a qu’à vérifier à quelle étape se trouve l’utilisateur, vérifiez le IsValid propriété du formulaire pour cette étape et, s’il y a un problème, revient sans avancer l’étape en cours.

En conséquence, typique NextButton le code pourrait ressembler à ceci lorsque vous vérifiez les combinaisons de l’étape actuelle et IsValid propriétés sur les formulaires des étapes :

private void NextButton(int onStep)
{
  if (onStep == 0 && !OverviewForm.IsValid() ||
       onStep == 1 && !PickDatesForm.IsValid() || 
      …more steps… )
  {
      return;
  }  
   currentStep = ++onStep;
}

Vous n’avez rien à faire de tout cela, bien sûr. Mais si vous voulez donner à l’utilisateur plus d’options de navigation (ou faire tout ce que vous voulez au bas de l’assistant – fournir un bouton Annuler, par exemple), vous pouvez le faire. De plus, comme j’en parlerai dans mon prochain article, vous pouvez également ajouter ou supprimer dynamiquement des étapes du composant de l’assistant Blazor (et il y a au moins un endroit où vous voudrez le faire).