Grilles de données low-code avec Blazor

Les grilles de données sont la référence pour l'affichage de grandes quantités de données dans les applications métier. L'interface utilisateur Telerik pour la grille Blazor est spécialement conçue pour cette tâche en incorporant une multitude de fonctionnalités, dont la plupart peuvent être activées de manière simple et intuitive via des options low-code.

En tant que personne qui utilise beaucoup Blazor depuis plusieurs années. maintenant, j'ai trouvé que Blazor était une plate-forme de développement productive. Les avantages du langage C# fortement typé permettent des techniques qui peuvent réduire la quantité de code nécessaire pour accomplir des tâches répétitives.

Dans cet article, nous explorerons l'idée d'utiliser un modèle de données pour réduire la quantité d'interface utilisateur (UI) code qui doit être écrit par la fonction de génération automatique d'activation sur la grille de données Telerik UI for Blazor.

Comment est-ce Low-Code ?

« Low-code » est un terme industriel avec une définition large. Généralement, nous voyons le terme « low-code » utilisé dans le contexte d'un concepteur par glisser-déposer ou d'un outil de développement d'applications propriétaire qui permet aux professionnels techniques de créer des applications.

Cependant, les techniques de développement à faible code peuvent aider les développeurs professionnels. être plus efficace avec les tâches répétitives ou combler le fossé entre les contextes de développement tels que les systèmes backend et d'interface utilisateur. Dans les exemples suivants, nous augmenterons le besoin de code d'interface utilisateur en utilisant des annotations de données. En utilisant des annotations de données, un développeur backend peut être plus productif en écrivant moins de code dans un environnement familier.

En utilisant des annotations de données, un développeur backend peut être plus productif en écrivant moins de code dans un environnement familier.

Blazor Data Grille

Les grilles de données sont l'étalon-or pour afficher de grandes quantités de données dans les applications d'entreprise. L'interface utilisateur Telerik pour la grille Blazor est spécialement conçue pour cette tâche en incorporant une multitude de fonctionnalités, dont la plupart peuvent être activées de manière simple et intuitive. Commençons par examiner un exemple écrit avec Razor et le balisage HTML.

Dans l'exemple de code ci-dessous, la grille est constituée de plusieurs éléments de type HTML qui définissent les colonnes de la grille, les formats de données, la source de données et les fonctionnalités de la grille.

Concentrons-nous un instant sur la première ligne de balisage et voyons où de simples ajustements peuvent faire une grande différence dans le fonctionnement de la grille. Si nous activons les propriétés suivantes, nous pouvons grandement améliorer la convivialité du composant. Dans l'extrait suivant, nous allons activer la pagination, le tri, le regroupement et le filtrage en définissant leurs propriétés respectives.

...

Nous avons facilement augmenté la valeur de ce composant pour nos utilisateurs avec un certain balisage. Même avec de simples commutateurs comme ceux-ci, il est facile d'imaginer qu'une grille de données avec de nombreuses fonctionnalités pourrait rapidement gonfler en plusieurs lignes de balisage.

Dans cet esprit, concentrons-nous sur la plus grande partie du balisage, où les colonnes de la grille sont définis. Les colonnes de la grille sont responsables de la majeure partie de notre balisage, car chaque point de données individuel doit être défini avec le champ, le titre de colonne souhaité et le formatage.

Cette section de balisage est répétitive et lourde à écrire. Heureusement, cela peut être considérablement réduit avec la fonction AutoGenerateColumns de la grille Telerik.

Génération automatique de colonnes de grille de données

Lors de l'utilisation de la grille Telerik, la génération automatique peut réduire considérablement ou supprimer complètement le besoin de explicite GridColumns défini dans le balisage. Étant donné que Blazor utilise .NET et que nos modèles de données sont fortement typés, la grille peut déduire des informations du modèle. De plus, la grille Telerik prend en charge System.ComponentModel.DataAnnotations qui fournissent des métadonnées lorsqu'elles sont appliquées au modèle.

Avant de nous familiariser avec la fonction de génération automatique, examinons la classe de modèle utilisée dans l'exemple. L'exemple ci-dessous est le modèle sans aucune annotation.

classe publique WeatherForecast
{
    public int Id { get; ensemble; } // caché
    public DateHeure Date { get; ensemble; }
    public double TempératureC { get; ensemble; }
    public double TemperatureCLow { get; ensemble; }
    public double TempératureF { get; ensemble; }
    public double TempératureFlow { get; ensemble; }
    chaîne publique Résumé { get; ensemble; }
}

À l'aide de ce modèle, chacune des propriétés est mappée sur un composant GridColumn et des propriétés supplémentaires Title et DisplayFormat sont définies pour obtenir la sortie souhaitée. Ce modèle est suivi pour chaque point de données affiché dans la grille.

/* Une colonne de grille explicite */

Au lieu de définir chaque colonne, nous pouvons supprimer complètement le GridColumns et ses enfants du balisage et définir la propriété AutoGenerateColumns sur le composant de grille parent. Lors de l'utilisation de la génération automatique, le composant TelerikGrid peut même être converti en une balise à fermeture automatique si aucune modification supplémentaire n'est nécessaire. Il est tout à fait possible d'ajouter un composant de grille complet avec un seul élément.

La grille utilise le modèle pour générer la sortie à l'aide des noms et des types de propriété. Chaque propriété est mappée telle quelle en utilisant le nom de la propriété comme Titre de la colonne de grille. Dans l'image ci-dessous, nous pouvons comparer la grille définie par le balisage à la grille générée automatiquement et remarquer quelques différences.

classe publique WeatherForecast { [Display(AutoGenerateField = false)] public int Id { get; ensemble; } [DisplayFormat(DataFormatString = "{0:dddd, dd MMM yyyy}")] public DateHeure Date { get; ensemble; } [Display(Name = "High Temp. C")] [DisplayFormat(DataFormatString = "{0:N1}")] public double TemperatureC { get; ensemble; } [Display(Name = "Low Temp. C")] [DisplayFormat(DataFormatString = "{0:N1}")] public double TemperatureCLow { get; ensemble; } [Display(Name = "High Temp. F")] [DisplayFormat(DataFormatString = "{0:N1}")] public double TemperatureF { get; ensemble; } [Display(Name = "Low Temp. F")] [DisplayFormat(DataFormatString = "{0:N1}")] public double TempératureFlow { get; ensemble; } chaîne publique Résumé { get; ensemble; } }

Après avoir annoté le modèle, nous pouvons comparer la grille définie par le balisage à celle générée automatiquement et constater qu'il n'y a plus de différences entre les deux.

Personnalisation

Souvent, avec les solutions low-code, les développeurs sont coincés à la croisée des chemins en matière de personnalisation. Heureusement, avec la fonction de génération automatique de la grille Telerik, ce n'est pas un problème. La grille Telerik fournit un moyen d'exposer les colonnes générées ainsi de les développeurs peuvent choisir de mélanger et de faire correspondre les colonnes générées avec les colonnes définies par le balisage. Cette technique peut être appliquée aux colonnes nécessitant une personnalisation qui ne peut pas être réalisée avec des attributs tels que des modèles.

Dans l'exemple ci-dessous, nous revenons à la définition de balisage de la grille et développons l'élément pour inclure le GridColumns composant. Dans GridColumnsnous indiquons à la grille où afficher les colonnes générées automatiquement en ajoutant un composant GridAutoGeneratedColumns. Toutes les colonnes définies avant ou après seront affichées en plus de ce qui est généré.

Ensuite, nous pouvons ajouter notre contenu personnalisé. Dans cet exemple, nous allons compléter la grille en incluant une colonne personnalisée qui affiche une icône basée sur les données du champ Summary. Un Modèle est utilisé dans une colonne de grille et les données sont transmises à une méthode pour trouver l'icône qui est rendue dans la cellule de grille. Pour personnaliser davantage la colonne, le FilterMenuType est défini sur un CheckboxList qui est automatiquement lié à des valeurs récapitulatives uniques dans l'ensemble de données.

La grille rendue ci-dessous utilise à la fois des colonnes générées automatiquement et une colonne de modèle personnalisée définie dans le balisage. Comme nous pouvons le voir dans l'image ci-dessous, la colonne personnalisée affiche des icônes basées sur les données ainsi qu'un filtre de type Excel à partir des données de l'ensemble de données.

Conclusion

L'interface utilisateur Telerik pour Blazor Grid est un composant puissant doté de nombreuses fonctionnalités. Nous pouvons facilement activer les fonctionnalités de l'interface utilisateur via des propriétés simples et automatiser davantage le développement de l'interface utilisateur avec une première approche de modèle à faible code.

À travers l'exemple, nous avons vu à la fois une grille définie par le balisage et une grille générée automatiquement basée sur les données. Chaque approche remplit un rôle unique en fonction des besoins du développeur tout en offrant la flexibilité de choisir la bonne combinaison de code bas et personnalisation.

La fonction de génération automatique est destinée à accélérer le développement de l'interface utilisateur en prenant un modèle fortement typé et en l'utilisant pour déduire l'interface utilisateur. Cela signifie que les développeurs peuvent passer moins de temps à écrire du code passe-partout répétitif et plus de temps concentrés au apporter des solutions. Cette fonctionnalité n'est pas limitée aux colonnes de grille : les grilles dont la modification est activée appliqueront la même logique aux formulaires générés automatiquement. De plus, les composants Telerik Form et Tree List ont des capacités similaires.

Les fonctionnalités de génération automatique de Telerik UI pour Blazor vous intéressent-elles ? Obtenez un essai gratuit de l'interface utilisateur Telerik pour Blazor et découvrez-le. Faites-nous également part de vos réflexions dans la section commentaires. Nous aimerions entendre vos commentaires sur la façon dont vous utilisez les colonnes générées automatiquement. Si vous avez des idées sur la façon dont nous pouvons améliorer cette fonctionnalité, veuillez nous en informer sur notre Portail de commentaires.