Maîtriser les processus UX avec Blazor Wizard 4 : Assistant dynamique

Votre assistant Blazor n’a pas besoin d’avoir un ensemble statique d’étapes : vous pouvez répondre aux besoins de l’utilisateur pour lui donner le processus dont il a besoin.

Alors que, hors de la boîte, Interface utilisateur Telerik pour le composant Blazor Wizard facilite grandement l’ajout d’un assistant à votre application afin d’aider vos utilisateurs à tâches difficilesl’assistant permet également de nombreuses personnalisations.

Dans les articles de blog précédents de la série, j’ai montré, par exemple, comment vous pouvez améliorer l’interface utilisateurcontrôler comment l’utilisateur se déplace dans l’assistantet remplacer le boutons Précédent/Suivant/Terminé par défaut avec votre propre ensemble de boutons. Dans cet article, je montrerai comment vous pouvez contrôler les étapes disponibles pour l’utilisateur lorsqu’il utilise votre assistant. En fait, comment vous pouvez créer un assistant dynamique qui s’adapte à la tâche à accomplir.

Désactivation des étapes

Par exemple, vous pouvez empêcher les utilisateurs de passer aux étapes ultérieures de l’assistant tant qu’ils n’ont pas terminé certaines étapes précédentes (ou, à défaut, empêcher l’utilisateur de revenir à une étape antérieure à partir d’une étape ultérieure). En fait, vous souhaitez diviser votre assistant en étapes et empêcher les utilisateurs de passer aux étapes ultérieures jusqu’à ce qu’ils aient terminé avec succès les étapes précédentes (ou les empêcher de modifier les étapes précédentes une fois que les utilisateurs ont atteint un « point de non-retour » dans l’assistant) .

L’assistant Telerik pour Blazor vous permet de désactiver n’importe quelle étape en définissant le Disabled attribut sur un WizardStep élément à vrai. Lorsqu’une étape est désactivée, les boutons Suivant/Précédent par défaut ne permettent pas à l’utilisateur de passer à une étape désactivée (les boutons eux-mêmes sont également désactivés) et les utilisateurs ne peuvent pas sélectionner une étape désactivée dans la liste des étapes en haut du sorcier. En effet, l’utilisateur ne peut pas dépasser l’étape de la passerelle désactivée dans les deux sens.

Remarque : Si vous avez modifié le Linear attribut dans le WizardSettings sur false, les utilisateurs pourront passer aux étapes avant et après l’étape désactivée. Dans ce scénario, vous souhaiterez peut-être désactiver toutes les étapes que l’utilisateur ne peut pas encore utiliser, plutôt qu’une simple étape de « passerelle ».

Pour activer ou désactiver dynamiquement les étapes en fonction des entrées d’un utilisateur, vous devez d’abord lier le Disabled attribut sur le WizardStep élément à un champ ou une propriété dans votre code Razor. Cet exemple lie une étape à un champ appelé
defineStageIncomplete (et lie également le champ de l’icône afin que l’icône puisse être modifiée lorsque la scène est « déverrouillée ») :

<WizardStep Label="Case Defined"
                    Icon="@caseDefineIcon"
                    Disabled="@defineStageIncomplete">        

Vous devrez déclarer ce champ ou cette propriété dans votre code en tant que valeur booléenne et définir le champ sur true. Cela désactivera l’étape et empêchera l’utilisateur de dépasser l’étape (le code suivant définit également l’icône par défaut de l’étape sur l’icône de verrouillage) :

private bool defineStageIncomplete = true;
private string caseDefineIcon = "lock";

L’affichage résultant ressemblerait à cet exemple, dans lequel l’étape Case Defined est désactivée :

Après cela, il suffit de définir le champ sur false quelque part dans votre code pour activer l’étape et permettre à l’utilisateur de la dépasser. Un code comme celui-ci ferait l’affaire (cet exemple modifie également l’icône pour indiquer que la scène est déverrouillée) :

if (dateList.Length.Count() > 0)
{
   defineStageIncomplete = false;
   caseDefineIcon = "unlock";
}

Autre remarque : si vous avez écrit le vôtre code de navigationvotre code boîte déplacer l’utilisateur vers une étape désactivée… ce qui en quelque sorte va à l’encontre de l’objectif de désactiver l’étape. Vous devrez conserver une liste des étapes que vous avez désactivées afin que votre code de navigation puisse faire ce qu’il faut lorsque l’utilisateur passe à une étape que vous avez désactivée.

Suppression d’étapes

Aussi utile que puisse être la désactivation/activation des étapes, il n’est pas difficile d’imaginer un assistant qui ajoute ou supprime réellement des étapes du processus, en fonction des choix effectués par l’utilisateur. En fait, il y a au moins une étape dans un assistant que vous souhaitez généralement pouvoir supprimer dynamiquement : la première.

L’une des choses qui rend une tâche « difficile » est que la tâche n’est pas familière à l’utilisateur. Pour résoudre ce problème, les assistants commencent souvent par une page de présentation qui explique à l’utilisateur ce que l’assistant va faire pour lui. Cependant, s’il s’agit d’un assistant avec lequel les utilisateurs interagissent plus d’une fois… eh bien, la tâche ne leur est plus familière et la page de présentation ne fait que gêner les utilisateurs dans leur travail.

Pour gérer cela, la plupart des pages de présentation ont une zone de texte « Ne plus afficher cela » qui supprime la page de présentation lors des utilisations ultérieures. Le moyen le plus simple de gérer cela avec le Blazor TelerikWizard est de joindre l’étape de présentation dans un if bloc qui vérifie une variable booléenne pour déterminer si l’étape doit être incluse.

Ce balisage Razor fait exactement cela :

@if (overviewDisplay)
{ 
   <WizardStep Label="OverView"
                           Icon="info-circle">
      <Content>
         …step UI…
      </Content>
   </WizardStep>
}

Vous aurez besoin d’un champ ou d’une propriété dans votre code pour prendre en charge cette instruction if et vous souhaiterez définir ce champ ou cette propriété à partir d’un magasin contenant les préférences de votre utilisateur. Le code typique ressemblera à ceci :

bool overviewDisplay = true;
protected override Task OnAfterRenderAsync(bool firstRender)
{
    overviewDisplay = WizardRepo.GetUserSettingsByWizardName("BuildCase", userId);
    return base.OnAfterRenderAsync(firstRender);
}

Les boutons Suivant et Précédent par défaut permettront de sauter ou de passer à toute étape ajoutée ou supprimée. Si vous avez écrit votre propre code de navigation, vous devrez ajuster la numérotation de vos étapes dans votre code. Si vous supprimez la première étape de votre assistant, les positions de toutes les autres étapes seront inférieures.

À titre d’exemple, voici un simple assistant Blazor avec l’affichage par défaut, qui numérote les étapes avec l’étape de présentation incluse (et toutes les étapes suivantes numérotées à partir de celle-ci):

Et voici le même assistant avec l’étape Présentation omise (remarquez comment les étapes sont renumérotées) :

Vous pouvez également utiliser cette technique pour ajouter des étapes d’assistant : incluez l’étape WizardStep dans votre balisage, n’affichez pas l’étape initialement, mais ajoutez ensuite l’étape lorsque cela est nécessaire (bien qu’avec cette technique, de nouvelles étapes soient toujours ajoutées à la
fin de la liste des étapes).

Bien que vous puissiez supprimer des étapes ou étendre le processus avec de nouvelles étapes pendant que l’utilisateur interagit avec le composant Blazor Wizard, il est probablement préférable de traiter cette fonctionnalité comme une option de configuration. Plutôt que de donner aux utilisateurs un processus qui change au fur et à mesure qu’ils l’utilisent, permettez aux utilisateurs de sélectionner les étapes qu’ils souhaitent inclure dans une liste d’options avant de ils démarrent l’assistant. Entre autres avantages, cela permet aux utilisateurs de concevoir un processus qui répond à leurs besoins plutôt que d’avoir toujours à faire face à un processus par défaut « global ».

Comme alternative, il pourrait être plus simple de marquer les étapes que les utilisateurs peuvent ignorer en définissant le WizardStep’s Optional attribuer à vrai. Cela n’a aucun effet sur la capacité de l’utilisateur à naviguer vers et à travers cette étape, mais signale à l’utilisateur qu’une étape peut être ignorée en affichant le mot « Facultatif » sous l’étiquette de l’étape :

Résumé de la série Blazor Wizard

Ceci termine ma plongée profonde dans le composant Telerik Wizard. Vous disposez d’un outil très flexible pour implémenter une partie standard de nombreuses interfaces utilisateur : l’assistant. La beauté du composant UI for Blazor Wizard est qu’il vous permet de vous concentrer sur le développement des interfaces utilisateur pour vos étapes et la mise en œuvre de la logique métier qui sous-tend ces interfaces utilisateur, ce qui compte. Mais, comme vous l’avez vu, l’assistant vous laisse également beaucoup de place pour la personnalisation si vous souhaitez en tirer parti.

Et, si vous constatez que vous ne pouvez pas faire ce que vous voulez avec l’assistant, alors vous devriez regarder le Composant pas à pas, conçu pour prendre en charge des solutions entièrement personnalisées. Par exemple, l’assistant Telerik affiche chaque étape de l’assistant, une à la fois. Si vous vouliez afficher toutes les étapes de votre assistant à la fois et mettre à jour la liste des étapes au fur et à mesure que l’utilisateur se déplace dans chaque étape (et également faire passer l’utilisateur à la bonne étape lorsqu’il clique sur une étape dans la liste des étapes)—le Stepper composant vous permettra de le faire.

Mais, à moins de ce type de chirurgie radicale, vous constaterez que le composant d’interface utilisateur Telerik Blazor Wizard fera tout ce dont vous avez besoin tout en vous permettant de vous concentrer sur ce qui est important pour votre entreprise.