Fermer

juillet 27, 2018

Création de vues personnalisées à partir de vos données avec Kendo UI Builder


Apprenez à tirer parti des sources et des fournisseurs de données REST pour créer une vue personnalisée dans Kendo UI Builder.

Lorsque vous créez une application, la plupart des vues doivent afficher les données des systèmes principaux. Kendo UI Builder donne accès à ces données via des fournisseurs de données et leurs sources de données associées. Actuellement, le produit a un support intégré pour REST, OData et JSDO.

Dans ce blog, nous allons apprendre comment créer une vue personnalisée qui rend les données d'un service REST. Nous verrons comment nous pouvons nous interfacer avec les sources de données pour obtenir les données ainsi que les métadonnées (définition des champs).

Pour simplifier les choses, nous allons créer une vue personnalisée qui rendra un tableau HTML avec la liste des champs en en-tête et les données dans des lignes de table supplémentaires comme dans l'exemple suivant:

Sample Table "title = "Sample Table" /></p data-recalc-dims=

Télécharger depuis GitHub et Follow Along

Pour suivre, téléchargez le template samples zip depuis github ou clonez le dépôt puis ouvrez le dossier " custom- table-from-data-source "et suivez les mêmes étapes décrites dans ce post pour installer ce modèle dans votre application cible

Setup

La vue personnalisée peut afficher des données depuis Nous fournissons une liste de mesures à partir des appareils IoT, et nous fournissons les statistiques de ces appareils par le même serveur REST que celui que nous avons configuré dans un blog . série .

Si vous ne les avez pas encore configurés, veuillez vous référer Définition des vues personnalisées

Dans le panneau des propriétés d'affichage Kendo UI Builder, les utilisateurs de vue personnalisée doivent pouvoir sélectionner le fournisseur de données et la source de données à utiliser.

Nous ajoutons les définitions suivantes au fichier de définition (Voir custom-table-from-data-source.json).

Si vous avez suivi dans notre série Kendo UI Builder, la plupart des propriétés devraient être familières à vous maintenant, mais sinon vous voudrez peut-être revenir en arrière et lire le post où j'ai d'abord introduit des vues personnalisées .

La chose clé ici est le editorType pour chaque propriété.

"fournisseur de données" : {

"type" : "chaîne" [19659002] "editorType" : "fournisseur de données"

"titre" [19659017]: "Fournisseur de données"

"description" : "Le nom du fournisseur de données provient de dont on obtient la définition de la source de données "

" par défaut ": " "

"minLength" : 1,

"commande" : 2

},

"source de données" : [

"type" : "chaîne de caractères"

"éditeurType" : "dataSource "

" titre ": " Source des données "

"description" : "Le nom de la source de données à partir de laquelle nous obtenons des données"

"par défaut" : ""

"minLength" : 1,

"ordre" : 3

}

Maintenant au moment de la conception, nous sera en mesure de sélectionner l'origine des données en quelques clics dans le panneau des propriétés

Design-Time View

Nous voulons donner à nos utilisateurs une idée de La table va rendre.

Pour ce faire, nous devons prendre en charge deux éléments principaux:

  1. Affiche les en-têtes de table avec les noms de champ basés sur la source de données sélectionnée. Et si aucun fournisseur de données ou source de données n'est sélectionné, affiche des en-têtes faux.
  2. Affiche des données. Nous ne faisons pas d'appel REST au moment du design, donc nous allons simplement générer des exemples de données.

Comme nous l'avons appris dans le post précédent augmenting models nous devons implémenter la fonction augmentModel dans l'index .js pour fournir ces deux éléments.

Pour accéder à la liste des champs: les champs sont disponibles dans un fichier json dans le sous-répertoire de l'application: " / meta / dataProviders / ". Le nom du fichier est basé sur le nom du fournisseur de données tel que défini par l'utilisateur, dans mon exemple, je l'ai nommé IoT, donc le chemin relatif du fichier est /meta/dataProviders/IoT.json . Ainsi, l'objectif est de lire la liste des champs à partir des métadonnées directement à partir du système de fichiers. Cela implique la création du chemin vers le fichier, la lecture du fichier, l'analyse en JSON et l'accès à partir des données JSON, le tableau des champs pour la source de données spécifique.

Il y a deux choses importantes à garder à l'esprit pour y parvenir:

  1. à la ligne 51 de index.js:
        

    const dataProviderFileName = `./meta/dataProviders/${metaModel.dataProvider}.json` ;

    Le nom du fournisseur de données est disponible dans la variable de modèle de métadonnées d'entrée (metaModel)

  2. à la ligne 63 de l'index. js

    // et accès à partir des données JSON, le tableau de champs pour la source de données spécifique

    const dataSource = dataProvider.children.find (dataSource => dataSource.name === metaModel.dataSource);

        

        

Le nom de la source de données est également disponible dans la variable d'entrée du métamodèle. Pour plus de détails, dans design / index.js, vérifiez la fonction getFieldsFromDataSource .

Enfin, pour générer des données, nous créons simplement un tableau de 10 littéraux d'objets. Les propriétés d'objet sont renseignées en bouclant les champs de source de données et en ajoutant quelques fausses valeurs. Nous générons différentes données pour les champs numériques par rapport à tous les autres champs. Dans design / index.js, vous trouverez la fonction createSampleDataForEachField

Nous prenons également soin de rendre la vue personnalisée avec des champs et des données factices quand aucun fournisseur de données ou source de données n'est sélectionné. Dans design / index.js, voir la fonction createSampleFieldsAndDataWhenNoDataSource pour cela.

Dans l'ensemble, l'implémentation n'était pas si simple: cela m'a aidé à avoir des données de débogage. Ainsi, en chemin, j'ai stocké divers points de données dans la variable metaModel et les ai générés dans la vue du concepteur

Run-Time

Il y a deux éléments principaux que nous voulons rendre dans notre table:

  1. Obtenir les noms de champ pour l'en-tête de table
  2. Obtenir les données à rendre dans les lignes de table en effectuant un appel REST

Pour obtenir les noms de champs, nous utilisons la même stratégie que dans l'affichage de conception. Nous lisons les noms du fichier JSON de métadonnées et les stockons sous forme de tableau dans le méta-modèle. Nous avons déjà appris cette technique à partir de l'article de blog précédent sur Augmenting Models (voir la section «Modèle d'exécution»).

Ceci est fait dans les vues / custom-table-from-data -source / angular / generator / index.js, la fonction augmentModel comme suit:

const pathToDataProviderFile = path.join (__ dirname, '..' '..' '..' '..' '..' `. / Meta / dataProviders / $ {metaModel.dataProvider} .json`) ;

const contenus = fs.readFileSync (pathToDataProviderFile);

const dataProvider = JSON.parse (contenu); [19659002] const dataSource = dataProvider.children.find (sourceSource => sourceSource.name === metaModel.dataSource);

metaModel.myDataSrcFields = sourceSource [ ] 'champs' ];

Nous stockons la liste des champs dans myDataSrcFie lds . Nous utiliserons cette variable lorsque nous aurons besoin de récupérer les noms de champs lors du rendu

Accès aux données

Voir les vues / table-personnalisée-de-source-de-données / angulaire / __ nom __.vue.base.component.ts .ejs

J'ai fourni un ensemble d'utilitaires sous la forme d'un code de type typé. Consultez les vues de dossiers / custom-table-from-data-source / angulaire / data-services. Je ne vais pas entrer dans les détails de chaque fichier – les traiter comme une boîte noire pour vous aider quand vous en avez besoin.

Cependant, il convient de souligner que dans les vues / custom-table-from-data-source / angulaire /data-services/data-properties-initialization.ts.ejs, nous avons la définition du littéral de l'objet $ dataServices. Cet objet contient un service de données pour chaque source de données. Ceci sera utilisé dans ngOnInit (__name __. View.base.component.ts.ejs). Voici l'extrait de code pertinent:

const dataSourceName = '<%- view.dataSource %>' ;

const dataService = this . $ DataServices [dataSourceName]

résultats constants: Observable = dataService.dataChanges ();

results.map (response => {

débogueur;

retour réponse? response.data: [];

}). souscrire (data => this .myRestList = data); [19659151] Nous obtenons la source de données d'affichage et accédons au service de données d'affichage.

Nous appelons la fonction dataChanges sur le service de données. La fonction dataChanges renvoie un RxJs observable. Consultez cet aperçu pour en savoir plus si vous n'êtes pas familier avec ceux-ci

Lorsque le flux RxJs a reçu ses données, nous les stockons dans la variable myRestList prête pour le rendu dans le composant view.

Rendu des données

Maintenant, c'est relativement la partie la plus facile ?.

Voir les vues / custom-table-de-data-source / angulaire / __ name __. View.component.html.ejs

Nous rendons les en-têtes en itérant à travers la variable myDataSrcFields et en produisant une cellule de tableau pour chaque champ comme ceci:

< tr style = "background-color: # 3fd5d5; grammage: gras; ">

<% view.myDataSrcFields.forEach(field => {%>

<[19659136] td style = "padding-top: 0.5rem; remplissage-fond: 0.5rem;" >

[19<%- field.name %> : 0,8rem; marge-droite: 0.8rem; ">

<%- field.label %>

[/ >

<% })%>

[/ tr >

Pour rendre les données: Pour tous les éléments reçus du serveur, nous générons une ligne de table Dans la ligne, nous affichons simplement la valeur de chaque champ REST Notez que nous parcourons les données à partir du serveur REST au moment de l'exécution, mais nous bouclons au moment de la génération du code Voici l'extrait de code:

<tr * ngFor = "let item de myRestList" style = "background-color: #ddd;" [19659017]>

<% view.myDataSrcFields.forEach(field => {%>

<td align = "juste" >

"marge-droite: 0.8rem;" >

[19659176] {{item [ '<%- field.name %>' ]}}

<% })%>

Conclusion

Nous avons appris comment interfacer avec des fournisseurs de données et des sources de données afin de rendre un exemple de table au moment de la conception, de tirer parti des services de données pour accéder aux données d'un serveur REST.

Nous utiliserons les techniques que nous avons apprises ici pour construire une carte d'interface dans un prochain article de cette série - restez à l'écoute!

Rattrapez-vous sur Kendo UI Builder

Si vous avez sauté dans cette série dans le milieu et que vous voulez commencer depuis le début, vous pouvez trouver les billets de blog précédent ici:

  1. Introduction aux modèles de Kendo UI Builder
  2. Dans les coulisses de Kendo UI Builder Templates
  3. Traitement des événements dans les modèles Kendo UI Builder
  4. Amélioration des modèles dans les modèles Kendo UI Builder
  5. Introduction aux composants personnalisés pour Kendo UI Builder
  6. Création de Kendo UI Builder Custom Co mponents de composants angulaires
  7. Création d'un composant de classement personnalisé avec Kendo UI Builder
  8. Affichage des métriques de périphériques IoT avec Kendo UI Builder
  9. Valeur par rapport aux composants personnalisés Kendo UI Builder multi-valeur

Le meilleur outil 2023 pour ta croissance Instagram !



Source link