Fermer

juin 15, 2022

Maîtrisez les processus UX avec Blazor Stepper 2 : intégrez-les à l’interface utilisateur

Maîtrisez les processus UX avec Blazor Stepper 2 : intégrez-les à l’interface utilisateur


Une fois que vous avez ajouté le Blazor Stepper à votre composant, votre prochaine étape consiste à intégrer le Stepper à votre interface utilisateur. Vous avez un tas d’options et voici comment les mettre en œuvre toutes.

Dans un blog précédentj’ai montré comment vous pouvez utiliser le Composant pas à pas du Interface utilisateur Telerik pour les composants Blazor pour créer une interface utilisateur qui casse un « tâche difficile» dans un processus étape par étape.

L’étape suivante consiste à ajouter les étapes qui composent ce processus (votre interface utilisateur) et à intégrer ces étapes à l’interface utilisateur du Stepper. Il y a deux parties dans cette intégration car le Stepper effectue deux tâches pour vous :

  • Le Stepper permet à l’utilisateur de sélectionner la partie du processus qu’il souhaite effectuer ensuite. Ainsi, lorsque l’utilisateur sélectionne une étape, votre interface utilisateur doit être mise à jour pour refléter l’étape sélectionnée par l’utilisateur.
  • Le Stepper indique également où se trouve l’utilisateur dans le processus. Ainsi, lorsque vous déplacez l’utilisateur vers une nouvelle étape, vous devez mettre à jour le Stepper pour refléter cela.

Pour cette discussion, je vais supposer ce balisage Blazor Stepper :

<TelerikStepper @bind-value="currentStep">
  <StepperSteps>
            <StepperStep Label="Overview" 
                         Icon="info-circle" ></StepperStep>
            <StepperStep Label="Pick Date Range" 
                         Icon="calendar" ></StepperStep>
            <StepperStep Label="Select Occurrences"
                         Icon="link" ></StepperStep>
            <StepperStep Label="Define Case"
                         Icon="folder-open" ></StepperStep>
            <StepperStep Label="Save Changes"
                         Icon="save" ></StepperStep>       
    </StepperSteps>
</TelerikStepper>

Cela donnerait cette interface utilisateur :

Un processus en cinq étapes.  Chaque cercle de l'étape a une icône.  La première étape a l'icône d'information (la lettre minuscule i à l'intérieur d'un cercle), la deuxième étape a un calendrier, la troisième étape a un lien dans une chaîne, la quatrième étape a un dossier ouvert et la cinquième étape a un disque .  Chaque étape comporte également une étiquette en dessous :

Pour vous donner le contrôle dont vous avez besoin sur le Stepper, le bind-value attribut dans le TelerikStepper L’élément devra lier le contrôle à un champ entier (ou propriété) dans votre code comme celui-ci :

int CurrentStep = 0;

Utilisant bind-value implémente la liaison de données bidirectionnelle : lorsque l’utilisateur sélectionne une étape dans le Stepper, la currentStep sera mis à jour pour afficher l’index de l’étape actuelle (c’est-à-dire, si l’utilisateur est sur la deuxième étape, currentStep sera mis à 1); si, dans votre code, vous mettez à jour le currentStep champ, le pas correspondant dans le Stepper sera sélectionné.

Affichage de toutes les étapes : mise à jour du stepper

Une solution pour intégrer votre interface utilisateur et le Stepper consiste à afficher toutes les étapes du processus en même temps. Avec cette conception, vous devez mettre en surbrillance chaque étape de votre interface utilisateur lorsque l’utilisateur se déplace dans le Stepper. Cette approche permet à l’utilisateur de voir l’ensemble du processus dans l’interface utilisateur (qui, selon le degré d’intimidation du processus, peut ou non être utile à l’utilisateur).

Autre remarque : avec cette conception, pour empêcher Stepper de défiler en haut de l’écran lorsque l’utilisateur se déplace dans les étapes, vous avez besoin d’un CSS intelligent ou d’avoir toutes les étapes sur un seul écran avec Stepper. Je supposerai simplement que vous avez abordé ce problème dans le reste de cette discussion.

Avec cette conception, vous devez :

  • Placez chaque étape dans un div ou span élément (cela facilite également le formatage des étapes individuellement)
  • Sélectionnez un événement sur les éléments qui composent l’étape qui signale que l’utilisateur est passé à cette étape
  • Sur l’élément englobant, liez votre événement sélectionné à une méthode qui mettra à jour l’étape actuelle dans le Stepper

Lorsque vous sélectionnez l’événement pour signaler que l’utilisateur est passé à une étape, vous devez sélectionner la façon dont un événement remontera jusqu’à l’élément englobant : onfocusin ou onclick sont de bons choix.

Par exemple, le code suivant lie le onfocusin événement d’un div élément à une méthode appelée instep, passant la position de la marche. Lorsque l’utilisateur se déplace vers l’une des zones de texte, la zone de texte focusin l’événement se déclenchera, l’événement remontera alors jusqu’au div élément, et la méthode liée à div éléments inStep l’événement s’appellera :

<div @onfocusin="() => inStep(2)">
    Date Start: <input type="date" @bind-value="startDate"/>
    Date End: <input type="date" @bind-value="endDate"/>
</div>

Dans la méthode que vous avez liée à l’élément englobant, il vous suffit de définir le champ auquel le composant Stepper est lié (currentStep dans mon cas) pour mettre à jour l’interface utilisateur du Stepper. Une méthode typique ressemblera à ceci :

private void inStep(int newStep)
{
   currentStep = newStep;
}

Vous n’êtes pas obligé d’écrire une méthode distincte si vous ne le souhaitez pas. Vous pouvez, à la place, simplement mettre votre code dans l’expression lambda de votre événement, comme dans cet exemple :

<div @onfocusin="() => currentStep = 2">

Affichage de toutes les étapes : passer à l’étape

Cela prend en charge la mise à jour du Stepper au fur et à mesure que l’utilisateur parcourt les étapes. Cependant, vous devez également déplacer l’utilisateur vers la bonne étape lorsque l’utilisateur sélectionne « l’étape suivante » dans le Stepper. La première chose à faire est d’ajouter un ref attribuez un attribut au premier élément de chaque étape et liez-le à un champ (ou une propriété) de votre code. Cet exemple lie une zone de texte à un champ appelé step1TextBox:

<div>
    Start Date: <input @ref="step1Textbox" type="date" @bind-value="startDate" />

Dans votre code, vous devez déclarer ce champ en tant que ElementRef:

ElementReference step1Textbox;

Pour réagir lorsque l’utilisateur sélectionne « l’étape suivante » dans le Stepper, vous pouvez lier une méthode au StepperStep. OnChange événement, comme ceci :

<StepperStep Label="Pick Date Range"
                     Icon="calendar"
                     OnChange="@StepChanged"></StepperStep>

La méthode que vous liez au OnChange l’événement doit accepter un paramètre de type StepperStepChangeEventArgs. Ce paramètre a un TargetIndex propriété qui vous indique quelle étape l’utilisateur a sélectionnée. En utilisant le TargetIndex propriété, vous pouvez sélectionner le champ lié à l’élément dans l’étape et appeler la FocusAsync() pour déplacer le curseur de l’utilisateur dans la bonne étape (vous devrez également marquer la méthode liée comme asynchrone):

ElementReference step1Textbox;
private async Task StepChanged(StepperStepChangeEventArgs e)
{
   switch (e.TargetIndex)
   {
       case 0:
                    await step1Textbox.FocusAsync();
                   break;         
       case 1:
	

Révéler les étapes progressivement

L’alternative à l’affichage simultané de toutes les étapes sur la page consiste à révéler les étapes au fur et à mesure que l’utilisateur en a besoin (c’est-à-dire le modèle de conception d’interface utilisateur d’assistant typique et familier). Le fait de n’avoir qu’une seule étape à la fois sur l’écran simplifie l’interface utilisateur présentée à l’utilisateur à tout moment, mais cela empêche l’utilisateur de voir l’ensemble du processus.

La façon la plus simple d’implémenter cette conception est, dans votre interface utilisateur, de déplacer chaque étape dans les blocs de cas d’une instruction switch liée au champ lié du Stepper. Au fur et à mesure que l’utilisateur passe d’une étape à l’autre (et, par conséquent, met à jour le champ lié du Stepper), l’interface utilisateur appropriée s’affiche :

@switch (currentStep)
{
    case 0:
        <div>
            Date Start: <input type="date" @bind-value="startDate" />
            Date End: <input type="date" @bind-value="endDate" />
        </div>
        break;
    case 1:
        …step 2 markup
        break;
}

Étant donné que l’utilisateur ne peut pas passer à une étape sans interagir avec le Stepper, vous n’avez pas à gérer la mise à jour du Stepper pour refléter «l’étape actuelle».

Inclure toute l’interface utilisateur de chaque étape dans votre instruction switch peut créer un balisage Razor désordonné. Une meilleure solution pourrait consister à créer un composant pour chaque étape et à transmettre un élément de données partagé à chaque composant de l’étape.

Ce code, par exemple, suppose l’existence d’un champ appelé pData dans le composant parent qui contient toutes les données recueillies auprès de l’utilisateur dans le processus. Ce champ est transmis à chaque composant qui met ensuite (vraisemblablement) à jour les données contenues dans le champ :

@switch (currentStep)
{
    case 0:
<Step1Component ProcessData=pData></Step1Component>
break;
    case 1:
<Step2Component ProcessData=pData></Step2Component>
break;
   //…more cases…

Le composant parent – le composant avec le Stepper – est juste responsable de l’initialisation de l’objet de données du processus (probablement le dernier composant du processus est responsable de l’utilisation des données recueillies dans les étapes précédentes) :

    MasterData pData = new MasterData { startDate = DateTime.Now.AddDays(-30),
                                                                           endDate = DateTime.Now
                                                                        }

Chaque composant enfant peut accepter l’objet de données du processus en déclarant un paramètre pour accepter l’objet :

[Parameter]
public MasterData pData { get; set; }

La seule limitation dans toute cette discussion est que j’ai supposé que vous intégriez les étapes dans votre interface utilisateur dans le cadre d’un processus statique. Il existe au moins un cas standard (et, je parie, un nombre infini de cas non standard) où votre processus ne sera pas dynamique, où vous devrez ajouter ou supprimer des étapes. C’est mon prochain article de blog.




Source link