Besoin d’accepter les signatures d’utilisateurs dans votre application Blazor ? La nouvelle interface utilisateur Telerik pour le composant Blazor Signature vous soutient.
Lorsqu’on me demande d’ajouter une fonctionnalité à l’interface utilisateur de mon application Blazor, j’ai généralement une réponse instinctive qui se situe quelque part dans ce spectre :
- Oh c’est simple, je l’ai déjà fait des milliers de fois.
- Cela semble un peu compliqué, j’aurai peut-être besoin de passer du temps à créer une interface utilisateur personnalisée, mais ça ne devrait pas être trop mal.
- Oh l’horreur, par où commencer ?!
Cette dernière réponse de catégorie n’arrive pas trop souvent, mais quand c’est le cas, c’est généralement parce que l’exigence est tellement niche, compliquée ou rare (quelque chose que je n’ai pas à faire très souvent) qu’elle risque de consommer des semaines de temps de développement .
Ce qui nous amène aux… signatures électroniques !
Vous avez probablement rencontré des signatures électroniques. Peut-être avez-vous reçu des documents à signer électroniquement. Ou peut-être avez-vous accepté une livraison et avez-vous été invité à signer pour confirmer la réception (vous avez donc agité votre doigt autour de l’écran et ils ont capturé les gribouillis résultants et l’ont fait passer pour votre signature).
Mais comment procédez-vous exactement pour capturer ces signatures dans votre application Blazor ?
Une solution consiste à créer vous-même ce composant, en déterminant comment capturer les entrées de l’utilisateur et les stocker sous forme d’image. Mais qui peut dire combien de temps cela prendra ?
Entrer la progression Interface utilisateur Telerik pour Blazorc’est nouveau Signature composant, qui vise à vous faire accepter les signatures des utilisateurs en quelques minutes.
Le composant d’interface utilisateur Blazor Signature
Avec Blazor Signature, vous pouvez capturer des signatures manuscrites (dessinées à l’aide d’une souris ou de gestes de la main sur des appareils tactiles).
Vous pouvez intégrer le composant Signature dans un formulaire d’édition, ou ailleurs dans votre interface utilisateur, et offrir la possibilité d’ouvrir la fenêtre contextuelle Signature dans un modal (pour maximiser le canevas de signature et permettre aux utilisateurs de dessiner plus facilement leur signature).
Voici un exemple simple :
<TelerikSignature Width="400px" Height="300px" HideLine="false" />
Avec cela, vous obtiendrez la boîte de signature par défaut.
Si l’utilisateur clique sur la petite icône « popup », il obtiendra une version modale popup de la boîte de signature. La propriété « PopupScale » permet de paramétrer les dimensions des popups par un facteur d’échelle dépendant de la largeur et de la hauteur.
Si l’utilisateur doit effacer la signature saisie, il peut cliquer sur le x (coin inférieur droit) de la fenêtre contextuelle.
Ajustement de l’interface utilisateur
Nous pouvons personnaliser l’apparence du composant Signature de différentes manières. Voici quelques-unes des options les plus utiles :
- Cachez la ligne pointillée.
<TelerikSignature HideLine="true" ... /> - Changez la couleur de fond.
<TelerikSignature BackgroundColor="Purple" ... /> - Changez la couleur de la signature elle-même.
<TelerikSignature Color="White" ... />
Pour une liste complète, consultez le documentation complète sur la modification de l’apparence de la signature.
Comment utiliser la signature résultante ?
Pour utiliser réellement la signature, nous pouvons lier la valeur du composant Signature à un champ.
<TelerikSignature Width="400px" Height="300px" HideLine="false" @bind-Value="Signature" />
@code {
public string Signature { get; set; }
}
À première vue, vous vous demandez peut-être pourquoi il s’agit d’une chaîne – une signature doit sûrement être stockée sous la forme d’une sorte d’image.
Pour comprendre ce qui se passe, affichons la valeur de Signature dans notre interface utilisateur quelque part.
<TelerikSignature Width="400px" Height="300px" HideLine="false" @bind-Value="Signature" />
@Signature
Exécutez ceci et nous découvrons que la valeur est une image encodée en Base64.
Si vous n’êtes pas familier, l’encodage Base64 est un moyen d’encoder des valeurs binaires sous forme de texte. Notre signature ici est une valeur binaire (une image), mais Blazor Signature l’a exposée en tant que chaîne encodée en Base64.
Nous pouvons afficher l’image résultante dans notre interface utilisateur en utilisant un élément d’image HTML standard.
<TelerikSignature Width="400px" Height="300px" HideLine="false" @bind-Value="Signature" />
<img src="@Signature" />
De même, nous pouvons envoyer cette valeur à une API backend et l’utiliser à notre guise (la décoder et la stocker sous forme de fichier image, la conserver sous forme de chaîne et la mettre dans une base de données, etc.).
Mais que se passe-t-il si nous avons déjà une signature et que nous voulons l’afficher dans le composant Signature ? @bind-Value s’en occupe pour nous.
Supposons que nous ayons déjà capturé une signature sous forme de chaîne encodée en Base64. Nous pouvons attribuer cela à notre Signature champ et laissez Blazor Signature gérer le reste.
<TelerikSignature Width="400px" Height="300px" @bind-Value="Signature" />
<button @onclick="LoadExistingSignature">
Load Signature
</button>
@code {
public string Signature { get; set; }
private void LoadExistingSignature()
{
var signature = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxwAAAJUCAYAA...";
Signature = signature;
}
}
Ici, lorsque l’utilisateur clique sur le bouton « Charger la signature », nous attribuons la signature existante à notre signature champ. Le composant Blazor Signature se met automatiquement à jour pour afficher la signature (grâce à notre utilisation de @bind-Value).
Cela augmente également la possibilité pratique de réutiliser plusieurs fois la même signature sur le même écran. Par exemple, si vous demandez à l’utilisateur de signer plusieurs fois un document long, il peut :
- Entrez leur signature une fois.
- Cliquez sur un bouton pour (ré)utiliser cette signature à chaque endroit ultérieur où une signature est requise.
Capturer des signatures via un formulaire
Si vous capturez des signatures, il y a de fortes chances que vous souhaitiez le faire dans le cadre d’un formulaire que l’utilisateur remplit.
Vous pouvez utiliser le TelerikSignature composant directement dans un Blazor EditForm:
@using System.ComponentModel.DataAnnotations;
<EditForm Model="formModel" OnValidSubmit="SubmitForm">
<DataAnnotationsValidator />
<InputText @bind-Value=" formModel.Name" DisplayName="Name"/>
<TelerikSignature Width="500px" Height="300px" @bind-Value=" formModel.Signature" />
<button type="Submit">Submit</button>
</EditForm>
Ici nous avons un EditForm avec une entrée de texte (pour le nom de l’utilisateur) et une instance de TelerikSignature pour capter leur signature.
Le EditForm est lié à un champ appelé formModel. Lorsque le formulaire est soumis, nous pouvons lire les valeurs de formModel (y compris la signature de l’utilisateur), prêt à être traité par le backend/la base de données, etc.
@code {
private Form formModel = new FormModel();
private class FormModel
{
[Required]
public string Name { get; set; }
[Required]
public string Signature { get; set; }
}
private void SubmitForm()
{
}
}
Notez comment nous avons marqué le Signature et Name propriétés selon les besoins.
Cela garantit que le formulaire ne peut être soumis que lorsque l’utilisateur a saisi à la fois son nom et sa signature (dans cet exemple, cela est géré via le DataAnnotationsValidator).
Connecter la logique métier lorsque la signature change
Enfin, vous devrez peut-être exécuter une logique supplémentaire lorsque quelqu’un a saisi sa signature.
Blazor Signature expose quelques événements pratiques auxquels vous pouvez vous connecter :
OnBluretOnChangese déclenchera lorsque le composant Signature perd le focus.ValueChangedse produit lorsque la signature est entièrement dessinée.
En pratique, il y a un certain chevauchement entre ces événements, donc pour voir comment ils fonctionnent, j’ai modifié cet utile exemple de la Telerik Docs.
Cet exemple montre uniquement le dernier événement qui s’est produit. Voici une version modifiée qui affiche un journal de tous les événements (pas seulement le plus récent).
@page "/Signature"
<p>Last event: @LastEvent</p>
<TelerikSignature Value="@SignatureValue"
ValueChanged="@ValueChangedHandler"
OnBlur="@OnSignatureBlur"
OnChange="@OnSignatureChange"
Width="300px"
Height="300px">
</TelerikSignature>
<ul>
@foreach(var evt in EventLog)
{
<li>@evt</li>
}
</ul>
@code {
private string SignatureValue { get; set; }
private List<string> EventLog = new List<string>();
private string LastEvent => EventLog.LastOrDefault("...");
private void ValueChangedHandler(string value)
{
SignatureValue = value;
EventLog.Add($"ValueChanged event fired at {DateTime.Now.ToLongTimeString()}");
}
private void OnSignatureBlur()
{
EventLog.Add($"OnBlur event fired at {DateTime.Now.ToLongTimeString()}");
}
private void OnSignatureChange(string value)
{
EventLog.Add($"OnChange event fired at {DateTime.Now.ToLongTimeString()}");
}
}
Si vous exécutez ceci et dessinez une signature (à l’aide d’une souris ou d’un écran tactile), le ValueChanged incendies événementiels.
Dans la plupart des cas, si vous devez exécuter du code lorsque la signature change, ValueChanged est l’événement que vous recherchez ; il se déclenche chaque fois que la valeur de la signature change.
En conclusion
Si vous voulez un moyen rapide et facile de capturer les signatures des utilisateurs dans votre application Blazor, le composant Blazor Signature de Telerik est là pour vous.
Tu peux:
- Personnalisez l’apparence du composant et de la signature résultante
- Stockez facilement les signatures capturées
- Capturez la signature via un
EditForm - Implémentez votre propre logique métier lorsque la signature change (en gérant le
ValueChangedévénement)
Essayez l’interface utilisateur Telerik pour Blazor
Développez de nouvelles applications Blazor et modernisez les projets Web hérités en deux fois moins de temps grâce à une grille hautes performances et à plus de 100 composants Blazor véritablement natifs et faciles à personnaliser pour répondre à toutes les exigences. Essayez-le gratuitement avec notre essai de 30 jours et profitez de notre assistance de pointe.
Source link