Maîtriser les processus UX avec Blazor Wizard 2 : contrôler la progression

Au fur et à mesure que vos utilisateurs parcourent votre assistant Blazor, vous devrez détecter les erreurs et empêcher les utilisateurs d’avancer jusqu’à ce qu’ils les corrigent.

Dans un post précédentj’ai montré à quel point il est facile d’ajouter un assistant à votre application Blazor pour guider votre utilisateur à travers un tâche difficile en utilisant le Interface utilisateur Telerik pour Blazor Composant Assistant. Dans ce post, je me suis concentré sur l’habillage de l’interface utilisateur de l’assistant. Dans cet article, je vais me concentrer sur la mise en œuvre de la logique métier liée à l’assistant.

Quelle que soit l’interface utilisateur que vous créez pour chaque étape, vous devrez faire deux choses :

• Empêchez l’utilisateur de passer à une autre étape si vous trouvez des erreurs dans les entrées de l’utilisateur
• Effectuez les mises à jour de l’assistant lorsque l’utilisateur accède au bouton Terminé à l’étape finale

Gestion des erreurs

La clé pour contrôler la progression de l’utilisateur à travers les étapes est le OnChange événement, qui est déclenché lorsque l’utilisateur clique sur un bouton Suivant ou Précédent. Pour contrôler la progression de l’utilisateur dans le OnChange événement, il vous suffit de vérifier les mauvaises données sur la page et, si vous trouvez des données problématiques, annulez l’événement OnChange événement (et, si vous voulez que l’utilisateur passe automatiquement à l’étape suivante ou précédente, ne faites rien).

Pour simplifier ce processus, vous pouvez utiliser le Formulaire Telerik pour les composants Blazor fonctionnalités pour valider vos données et afficher des messages d’erreur. Si vous utilisez TelerikForm, la « vérification des problèmes » consiste simplement à tester le composant TelerikForm IsValid propriété.

Pour implémenter cette conception, vous devez d’abord lier une méthode au WizardStep OnChange propriété. Puis, à l’intérieur de la marche Content élément, ajoutez votre TelerikForm et remplissez-le avec tout ce dont vous avez besoin pour l’interface utilisateur de l’étape. Vous devrez également définir le TelerikForm’s @ref attribut pour pointer vers un champ ou une propriété dans votre zone de code.

En mettant tout cela ensemble, le balisage Razor pour un typique WizardStep ressemblerait à ceci :

<WizardStep OnChange="@OverviewStep"  … >
   <Content>
      <TelerikForm @ref="OverviewForm" … >
	…form content…
     </TelerikForm>
   </Content>
</WizardStep>

Dans votre zone de code, vous devez déclarer un champ ou une propriété de type TelerikForm à lier à votre formulaire @ref attribut (dans le code suivant, j’ai utilisé un champ). Vous devrez également définir une méthode pour chaque étape OnChange un événement. Ces méthodes doivent accepter un paramètre de type WizardStepChangeEventArgs.

Le squelette typique d’un WizardStepc’est OnChange méthode ressemblera à ceci :

private TelerikForm OverviewForm;
private void OverviewStep(WizardStepChangeEventArgs wsc)
{
          
}

Dans la méthode, il vous suffit de vérifier les champs du formulaire IsValid propriété pour voir si le formulaire a trouvé des données incorrectes. Si IsValid est faux, vous pouvez empêcher l’utilisateur de quitter l’étape en définissant sur vrai IsCancelled propriété sur le paramètre passé à votre méthode. Après cela, vous devriez probablement quitter la méthode pour éviter de faire quoi que ce soit d’autre avec les mauvaises données de la page dans votre méthode (rappelez-vous : si vous ne faites rien, l’utilisateur passera automatiquement à l’étape suivante).

Par conséquent, une étape typique OnChange méthode ressemblera à ceci :

private void OverviewStep(WizardStepChangeEventArgs wsc)
{
   if (!OverviewForm.IsValid())
   {
      wsc.IsCancelled = true;
      return;
   }
   …any processing required before moving to the next step…
}

Remarque latérale : Pour en savoir plus sur le composant Telerik UI for Blazor Form, consultez le Documentation. Cependant, vous souhaiterez probablement supprimer le bouton Soumettre par défaut sur le formulaire afin que tout traitement lié à une étape se produise dans la fenêtre de votre assistant. OnChange un événement. Pour ce faire, ajoutez simplement un vide <FormButtons> élément à la fin du formulaire :

     <FormButtons></FormButtons>
</TelerikForm>

Marquer les étapes du problème

Dans le cadre de la gestion des erreurs de la dernière étape, vous pouvez marquer n’importe quelle étape avec des erreurs comme non valide dans la liste des étapes en haut de votre assistant. Cette fonctionnalité peut être particulièrement utile lors de la validation des données à la dernière étape de l’assistant. Si vous trouvez un problème, vous pouvez marquer l’étape où le problème peut être résolu afin que l’utilisateur sache où aller pour résoudre le problème.

La première étape pour signaler une étape avec un problème est, dans votre fichier Razor, de lier l’étape Valid attribut à un champ ou à une propriété. Cet exemple lie l’attribut à un champ appelé SelectOccurrencesValid:

<WizardStep Valid="@SelectOccurrencesValid"
                        OnChange="@OverviewStep" …>        

Ensuite, dans votre fichier de code, vous devez déclarer ce champ ou cette propriété et l’initialiser à true (tout aussi bien supposer que l’étape est valide, après tout). Enfin, lorsque vous constatez qu’une étape a un problème, vous devez définir le champ sur faux (et le définir sur vrai lorsque le champ est valide). C’est ce que fait ce code :

private bool SelectOccurrencesValid = true;
private void SelectOccurrencesStep(WizardStepChangeEventArgs wsc)
{
   if (!SelectOccurrences.IsValid())
   {
      wsc.IsCancelled = true;
      SelectOccurrencesValid = false;
      return;
   }
   OverviewValid = true;
}

L’affichage des étapes en haut de l’assistant Telerik pour Blazor est automatiquement mis à jour pour afficher les étapes non valides en plaçant une icône « x » dans toutes les étapes non valides et en surlignant leurs étiquettes en rouge (ce graphique montre deux étapes non valides : l’étape actuelle a une icône « x » bleue et son étiquette est dans la police standard ; l’autre étape, invalide, a une icône « x » blanche et son étiquette est en gras) :

En cliquant sur le bouton Terminé

Pour implémenter la logique métier de l’assistant, il suffit de lier un événement à la OnFinished événement qui est exécuté lorsque l’utilisateur clique sur le bouton Terminé. Cet exemple lie l’assistant OnFinished événement à une méthode appelée DoneButton :

<TelerikWizard OnFinish="@DoneButton"…

La méthode correspondante n’accepte aucun paramètre et ressemblerait à ceci :

private void DoneButton()
{
    …take action….
}

Si vous validez des données dans la dernière étape, lorsque vous trouvez des erreurs, en plus de signaler l’étape problématique comme non valide, vous pouvez déplacer l’utilisateur vers l’étape incriminée. La première étape de ce processus consiste à utiliser le TelerikWizard @bind-value attribut avec un champ ou une propriété d’entier—ce champ ou cette propriété peut être utilisé(e) pour faire de n’importe quelle étape l’« étape actuelle ». Cet exemple utilise un champ appelé currentStep:

<TelerikWizard @bind-value="currentStep">

Dans votre code, vous devez (bien sûr) déclarer ce champ :

int currentStep = 0;

Après cela, il suffit de définir le champ ou la propriété à l’étape vers laquelle vous souhaitez déplacer l’utilisateur lorsqu’un problème est détecté. Ce code déplacerait l’utilisateur vers la troisième étape de l’assistant (alors que nous comptons les étapes de l’assistant à partir de « l’étape 1 », le TelerikWizard compte à partir de « l’étape 0 ») :

if (DateList.Count() == 0)
{
    DateStepValid = false;
    currentStep = 2;
   return;
}

Et, avec ces changements, vous êtes passé de l’assistant de base de votre application Blazor à une implémentation plus sophistiquée qui vous permettra de gérer la progression de votre utilisateur, de signaler les erreurs (particulièrement simple si vous utilisez le composant TelerikForm) et de renvoyer l’utilisateur au problème. marcher.

Le composant d’interface utilisateur Telerik Wizard pour Blazor se chargera toujours du processus de navigation à travers vos étapes. Vous pouvez également prendre plus de contrôle sur ce processus de navigation, si vous en avez besoin, comme je l’expliquerai dans mon prochain article.