Mashup Builder > Widgets > Grilles avancées > Tri, recherche et filtrage dans la grille avancée et la grille d'arborescence
Tri, recherche et filtrage dans la grille avancée et la grille d'arborescence
Le tri, la recherche et le filtrage de vos données de grille sont gérés via un service de requête de plateforme standard avec un seul événement Filter et un paramètre QueryFilter. Lorsque l'événement Filter est déclenché, qu'il s'agisse de trier, de rechercher ou de filtrer les données de grille, le paramètre QueryFilter garantit que les données renvoyées remplissent toutes les conditions spécifiées.
Vous pouvez interroger vos données pour les trier, les rechercher et les filtrer en procédant comme suit :
Configurez une table de données contenant vos données et accédez-y à l'aide de l'API de plateforme standard QueryDataTableEntries.
Si la génération des données s'effectue de manière dynamique, via un service de données, utilisez la fonction Query InfoTable pour trier et rechercher des données dans une table d'informations.
Pour plus d'informations sur les paramètres de requête, consultez la rubrique Paramètre de requête pour les services de requête du Centre d'aide ThingWorx.
Mise en oeuvre du tri
1. Définissez la propriété EnableSorting sur "vrai", soit en cliquant sur celle-ci dans le panneau Propriétés du Mashup Builder, soit en la définissant dans le script JSON d'un service de configuration dynamique. La propriété QueryFilter et l'événement Filter s'affichent dans le panneau des propriétés.
2. Liez la propriété QueryFilter au paramètre de requête de sortie où se trouvent les données à trier :
Si vos données se trouvent dans une table, liez le filtre QueryFilter au paramètre de requête du service QueryDataTableEntries.
Si vous générez les données au moyen d'un service de données, liez le QueryFilter au paramètre queryFilter du service de données.
3. Liez l'événement de filtrage au service qui se déclenchera à l'exécution du tri :
Si vous utilisez une table de données, liez l'événement Filter au service QueryDataTableEntries.
Si vous générez les données au moyen d'un service de données, liez l'événement Filter au service de données.
L'exemple suivant montre un paramètre de requête avec le nom et le titre des colonnes de tri appliqués :
{"maxItems":100000,"query":{"sorts":[{"fieldName":"name","isAscending":true},{"fieldName":"title","isAscending":true}]}}
Lorsque ces étapes de liaison sont terminées, le panneau Connexions doit ressembler à ce qui suit :
Implémentation de la recherche
La recherche permet de retrouver une valeur de chaîne dans n'importe quelle colonne d'une grille.
1. Définissez la propriété EnableGridSearch sur "vrai", soit en cliquant sur celle-ci dans le panneau Propriétés du Mashup Builder, soit en la définissant dans le script JSON d'un service de configuration dynamique. La propriété GridSearchLocation, la propriété QueryFilter et le Filtre apparaissent dans le panneau des propriétés.
2. Utilisez la propriété GridSearchLocation, soit dans le panneau des propriétés du Mashup Builder, soit dans un script JSON, pour configurer un emplacement pour le champ de recherche dans la grille. Les options disponibles sont les suivantes : en haut à droite, en haut à gauche, en bas à droite et en bas à gauche.
3. Liez la propriété QueryFilter au paramètre de requête de sortie où se trouvent les données à rechercher :
Si vos données se trouvent dans une table, liez le filtre QueryFilter au paramètre de requête du service QueryDataTableEntries.
Si vous générez les données au moyen d'un service de données, liez le QueryFilter au paramètre queryFilter du service de données.
4. Liez l'événement Filter au service qui se déclenchera à l'exécution de la recherche :
Si vous utilisez une table de données, liez l'événement Filter au service QueryDataTableEntries.
Si vous générez les données au moyen d'un service de données, liez l'événement Filter au service de données.
L'exemple suivant montre une requête de recherche qui recherche un événement Rain dans toutes les colonnes :
{"maxItems":100000,"query":{"filters":{"type":"OR","filters":[{"fieldName":"id","type":"LIKE","value":"%Rain%"},{"fieldName":"date","type":"LIKE","value":"%Rain%"},{"fieldName":"max_temp","type":"LIKE","value":"%Rain%"},{"fieldName":"min_temp","type":"LIKE","value":"%Rain%"},{"fieldName":"cold","type":"LIKE","value":"%Rain%"},{"fieldName":"visibility","type":"LIKE","value":"%Rain%"},{"fieldName":"wind","type":"LIKE","value":"%Rain%"},{"fieldName":"precipitation","type":"LIKE","value":"%Rain%"},{"fieldName":"events","type":"LIKE","value":"%Rain%"},{"fieldName":"image","type":"LIKE","value":"%Rain%"},{"fieldName":"key","type":"LIKE","value":"%Rain%"},{"fieldName":"location","type":"LIKE","value":"%Rain%"},{"fieldName":"source","type":"LIKE","value":"%Rain%"},{"fieldName":"sourceType","type":"LIKE","value":"%Rain%"},{"fieldName":"tags","type":"LIKE","value":"%Rain%"},{"fieldName":"timestamp","type":"LIKE","value":"%Rain%"}]}}}
Implémentation du filtrage
Pour implémenter un filtrage dans une grille, ajoutez un widget Filtre de données à l'application composite dans laquelle vous créez la grille. Vous ne pouvez ajouter un widget Filtre de données qu'à une grille qui est liée à une table de données basée sur une forme de données sous-jacente.
1. Dans l'onglet Widgets, sur la gauche du Mashup Builder, sélectionnez le widget Filtre de données et faites-le glisser jusqu'à votre application composite.
2. Liez le paramètre de requête de sortie du widget Filtre de données à la propriété QueryFilter de la grille avancée. Dans ce scénario, la propriété QueryFilter sert à la fois une fonction d'entrée et une fonction de sortie. Elle reçoit une entrée du widget Filtre de données, qui est automatiquement associé à toute entrée de tri et de recherche active et génère une sortie unique pour le paramètre de requête.
3. Liez la propriété QueryFilter au paramètre de requête du service QueryDataTableEntries de la table de données filtrée, triée ou recherchée.
L'exemple suivant présente une requête de filtrage de données avec un paramètre de filtrage unique, une valeur d'événement Rain :
{"maxItems":100000,"query":{"filters":{"fieldName":"events","type":"LIKE","value":"Rain*"}}}
Une requête de filtrage peut devenir beaucoup plus complexe lorsque plusieurs filtres sont appliqués, ou lorsqu'une entrée de filtrage est combinée avec des paramètres de recherche et de tri. L'exemple suivant illustre une combinaison de paramètres de tri, de recherche et de filtrage dans une même requête de sortie :
{"maxItems":100000,"query":{"sorts":[{"fieldName":"id","isAscending":true},{"fieldName":"min_temp","isAscending":true}],"filters":{"type":"And","filters":[{"type":"And","filters":[{"fieldName":"events","type":"LIKE","value":"Rain*"},{"fieldName":"cold","type":"EQ","value":false}]},{"type":"OR","filters":[{"fieldName":"id","type":"LIKE","value":"%21%"},{"fieldName":"date","type":"LIKE","value":"%21%"},{"fieldName":"max_temp","type":"LIKE","value":"%21%"},{"fieldName":"min_temp","type":"LIKE","value":"%21%"},{"fieldName":"cold","type":"LIKE","value":"%21%"},{"fieldName":"visibility","type":"LIKE","value":"%21%"},{"fieldName":"wind","type":"LIKE","value":"%21%"},{"fieldName":"precipitation","type":"LIKE","value":"%21%"},{"fieldName":"events","type":"LIKE","value":"%21%"},{"fieldName":"image","type":"LIKE","value":"%21%"}]}]}}
Dans la grille avancée, lorsque le filtrage est utilisé conjointement avec le tri et/ou la recherche, les liaisons doivent ressembler au diagramme suivant lorsqu'elles sont terminées :