Dans mon précédent billet, j’ai montré comment mettre en place un agent conversationnel en utilisant FormFlow du SDK Bot Builder pour .NET. Vous avez vu à quel point il est facile de mettre en place un bot capable d’effectuer un sondage.Toutefois nous ne sommes pas satisfaits du résultat obtenu. Nous voulons par exemple améliorer le texte des questions qui sont affichées par le robot, améliorer la liste des choix de réponses qui sont proposés, etc.
FormFlow offre plusieurs attributs et options pouvant être utilisés pour customiser son formulaire. Nous allons explorer les plus importants/intéressants dans ce billet de blog.
I – l’attribut Describe
Dans l’exemple de mon billet précédent, FormFlow a utilisé les valeurs de mes énumérations pour afficher la liste des réponses possibles pour chaque question. FormFlow utilise la majuscule et l’underscore pour séparer les valeurs d’énumérations et rendre l’affichage plus convivial. Toutefois, cela n’est pas suffisant pour avoir un texte correctement formaté affiché. Par ailleurs, la valeur d’énumération doit respecter les règles concernant la déclaration d’une variable : ne pas commencer par un chiffre, pas de ponctuation, etc.
Prenons, par exemple, la déclaration de l’énumération suivante :
| Code c# : | Sélectionner tout |
1 2 3 4 5 6 | public enum WebFrameworkOptions { ASPNET_Core = 1, AngularJS, Laravel, ReactJS, Autre }; |
À l’exécution, on aura le résultat suivant dans la fenêtre de chat du bot framework emulator :
Cependant, vous voulons que ASPNET Core soit affiché ASP.NET Core ou Angular JS soit affiché AngularJS. Pour y parvenir, nous allons utiliser l’attribut [Describe], comme suit :
| Code c# : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public enum WebFrameworkOptions { [Describe("ASP.NET Core")] ASPNET_Core = 1, [Describe("AngularJS")] AngularJS, Laravel, [Describe("ReactJS")] ReactJS, [Describe("NodeJS")] NodeJS, Autre }; |
L’attribut [Describe] permet « d’override » la description par défaut d’un champ, d’une propriété ou la valeur d’une énumération. Nous allons donc utiliser ce dernier pour améliorer ce qui sera affiché à l’utilisateur :
Pour répondre à la question « Veuillez choisir un web framework », l’utilisateur peut simplement cliquer sur son choix, et ce dernier est retourné dans la zone de saisie. Toutefois, le texte affiché sera utilisé par FormFlow pour récupérer la valeur correspondante dans l’énumération. Et dans certains cas, il ne sera pas en mesure de le faire. Par exemple pour « ReactJS » il s’attend à ce que la réponse de l’utilisateur soit « React JS » :
Pour pallier cela, vous pouvez utiliser le champ « message » de cet attribut pour setter le message qui est retourné lorsque l’utilisateur va cliquer sur le bouton :
| Code c# : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 | public enum WebFrameworkOptions { [Describe("ASP.NET Core")] ASPNET_Core = 1, [Describe("AngularJS")] AngularJS, Laravel, [Describe("ReactJS", message: "React JS")] ReactJS, [Describe("NodeJS", message:"Node JS")] NodeJS, Autre }; |
Le fait qu’on clique sur « ReactJS » et on obtient à l’écran « React JS » n’est pas fameux non plus. Nous verrons comment améliorer cela en utilisant un autre attribut.
L’attribut [Describe] dispose de plusieurs autres champs comme Title qui permet de définir un titre, SubTitle pour un sous-titre et image pour afficher une image dans le bouton :
| Code c# : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 | public enum WebFrameworkOptions { [Describe("ASP.NET Core")] ASPNET_Core = 1, [Describe("AngularJS")] AngularJS, Laravel, [Describe(image: "http://rdonfack.developpez.com/images/react.jpg")] ReactJS, [Describe(image: "http://rdonfack.developpez.com/images/nodejs.png")] NodeJS, Autre }; |
Pour cette question, notre bot va afficher une « HeroCard » dans un « Carousel » pour faciliter la navigation :
L’attribut Terms
Lorsque l’utilisateur saisit ReactJS, notre bot n’est pas en mesure de lier le terme avec la valeur de l’énumération correspondante. De plus, pour offrir plus de flexibilité à l’utilisateur, on doit tenir compte du fait que sa saisie peut être erronée ou qu’il saisit partiellement ce qui est attendu.
Avec l’attribut Terms, nous serons en mesure de définir les différents termes qui sont attendus pour un champ ou une valeur d’énumération :
| Code c# : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | public enum WebFrameworkOptions { [Describe("ASP.NET Core")] [Terms("ASP.NET Core", "ASP.NET", "ASP","ASPNET")] ASPNET_Core = 1, [Describe("AngularJS")] [Terms("Angular", "AngularJS")] AngularJS, Lavarel, [Describe("ReactJS")] [Terms("React","ReactJS")] ReactJS, [Describe("NodeJS")] [Terms("Node","NodeJS")] NodeJS, Autre }; |
L’attribut Numeric
Il sera utilisé pour fournir les limites des valeurs possibles pour un champ numérique :
| Code c# : | Sélectionner tout |
1 2 | [Numeric(18,45)] public int Age; |
On obtient le résultat suivant :
L’attribut Pattern
Cet attribut va permettre de définir une expression régulière pour valider la valeur d’un champ. Par exemple, une adresse mail :
| Code c# : | Sélectionner tout |
1 2 | [Pattern("(@)(.+)$")] public string Email; |
Ce qui produit :
L’attribut Prompt
Vous avez probablement remarqué que FormFow a généré la question suivante « Veuillez choisir un web framework ». Ce n’est pas la question que je souhaite afficher à l’utilisateur. Je veux afficher « Quel Framework Web utilisez-vous ? ». Pour le faire, je peux utiliser l’attribut Prompt comme suit :
| Code c# : | Sélectionner tout |
1 2 | [Prompt("Quel Framework Web utilisez-vous ? {||}")] public WebFrameworkOptions WebFramework; |
Prompt utilise les éléments du « pattern language » pour identifier les éléments qui doivent être remplacés. Pour en savoir plus, vous pouvez consulter l’article suivant :
https://docs.microsoft.com/en-us/bot...ttern-language
Pour cet exemple, nous aurons le résultat suivant :
L’attribut Template
La génération d’une question est effectuée en utilisant un Template. Pour l’exemple ci-dessus par exemple, le Template utilisé a permis de générer la question en affichant les réponses dans une liste de bouton. Nous pouvons décider que l’affichage soit différent en utilisant l’attribut Template :
| Code c# : | Sélectionner tout |
1 2 3 | [Template(TemplateUsage.EnumSelectOne,patterns: "Quel Framework Web utilisez-vous ? {||}", ChoiceStyle = ChoiceStyleOptions.PerLine)] public WebFrameworkOptions WebFramework; |
Grâce aux différents attributs qui sont offerts, vous pouvez mieux contrôler ce qui sera généré et affiché par FormFlow.
À bientôt pour de nouvelles aventures avec le bot framework.