Notre communauté ajoute constamment de nouveaux widgets intéressants à l'App Store. Si vous n'êtes pas sûr de ce qui existe, consultez nos avis précédents sur Blocs de construction de l'interface utilisateur, le widget de commentaires, ainsi que d'autres favoris et critiques mensuelles.
Cette semaine, je mets en avant le Sélecteur d'étiquettes, un widget très utile qui vient d'être mis à jour le 25 septembreth. Le widget utilise la bibliothèque Tag-it pour combiner le créateur d'objets en ligne et le sélecteur de référence de balises. Vous obtenez ainsi un outil utile qui vous permet d'étiqueter rapidement les entités pour référence ultérieure. Je vais vous expliquer comment obtenir le widget, comment le configurer dans votre modèle et quelques cas d'utilisation utiles pour vous permettre d'étiqueter plus rapidement.
Pourquoi utiliser le sélecteur d'étiquettes ?
Les utilisateurs souhaitent souvent se référer aux informations qu'ils ont saisies ou récupérées à une date antérieure. Mais cela peut s'avérer difficile lorsque l'application implique de grands ensembles de données qui nécessitent une variété de filtres de combinaison pour produire vos résultats. Dans cette optique, il est utile de pouvoir baliser une entité à l'avance, afin de pouvoir retrouver vos informations en un clin d'œil.
Configuration du widget
La première étape de l'utilisation d'un widget consiste à le télécharger depuis l'App Store. Depuis l'App Store intégré à Modeler, recherchez Label Selector et sélectionnez « Télécharger » pour importer automatiquement le widget dans votre projet.
Configuration du modèle de domaine
Utilisons le modèle de domaine simple suivant pour configurer nos balises. J'ai une seule entité appelée TheData avec quelques attributs. L'exemple d'application est utilisé par une équipe qui saisit chaque jour de nombreux enregistrements « TheData ». Elle doit fréquemment se référer aux données existantes.
Notre application se compose de quelques pages qui nous permettent de filtrer, de créer et de modifier des enregistrements. Nous avons une page d'aperçu et une page NewEdit qui nous permet de modifier les détails des objets.
Maintenant que nous avons notre modèle de base, il est temps d'intégrer le balisage. Avant de mettre à jour nos pages, nous devons créer l'entité qui représente nos étiquettes. Celle-ci est ajoutée à notre modèle de domaine et associée à tous les objets que nous souhaitons baliser. Notez le sens de l'association ici. Dans le modèle de domaine mis à jour ci-dessous, l'entité Tag contiendra la balise dans l'attribut Caption. Je vous recommande de stocker le propriétaire et la date de création des balises.
Mise à jour de l'interface utilisateur
Une fois le modèle de domaine établi, nous devons présenter aux utilisateurs une interface utilisateur pour créer et afficher des balises. Le package Label Selector peut être déposé sur n'importe quelle page pour aider à créer la bonne interface. Nous allons l'ajouter à notre page Data_NewEdit et le configurer pour utiliser l'entité Tag comme étiquette.
Dans cette fenêtre de configuration, vous disposez d'un certain nombre de propriétés. Vous pouvez configurer si les utilisateurs créent de nouvelles étiquettes ou utilisent uniquement les options existantes. Vous pouvez également déclencher des microflux après la création d'une étiquette. Pour obtenir une liste complète des propriétés et savoir comment les utiliser, consultez le fichier README ici.
Pour permettre aux utilisateurs de rechercher des éléments étiquetés, vous pouvez ajouter un filtre aux pages Data_Overview comme indiqué. Cela permettra aux utilisateurs de trouver rapidement tout ce qu'ils ont étiqueté.
Extension de votre application avec des ensembles d'étiquettes
Les utilisateurs trouvent généralement une collection d'enregistrements grâce à une série de filtres, puis utilisent le sélecteur d'étiquettes pour transformer cette collection en « ensemble ». Au lieu de recréer l'ensemble complet de filtres qui ont conduit à la collection, les utilisateurs doivent simplement filtrer sur la balise créée. Pour faciliter cela, nous devons fournir un Microflow qui permet aux utilisateurs de baliser un groupe entier d'entités à la fois. Voici une solution à ce problème :
1) Créez une entité appelée TagHelper qui possède une association d’ensemble de référence aux données et une association à une entité Tag.
2) Créez un Microflow qui prend une liste de données et associe la liste à un nouvel objet TagHelper.
3) Transmettez ce nouvel objet TagHelper à une page contenant le widget de sélection d'étiquettes. Le widget doit utiliser l'association TagHelper_Tag pour définir les étiquettes
4) Enfin, créez un Microflow sur la page qui récupère la collection d’objets de données, récupère les balises, puis définit l’association entre les données et les balises.
Effectuez une action sur votre page Data_Overview qui appelle le Microflow à l'étape 1. Vous pouvez choisir de transmettre la sélection d'un utilisateur avec une sélection multiple ou simplement de transmettre l'intégralité du contenu de la liste.
Une fois cela en place, tous les éléments de votre liste auront la même balise !
Tag ménage
Maintenant que votre application est configurée pour utiliser le sélecteur d'étiquettes, vous devez prendre en compte certains éléments de gestion. Je recommande de créer une page de gestion des balises dans laquelle les administrateurs peuvent créer, supprimer ou mettre à jour les balises créées par erreur. Cela est nécessaire si vous n'autorisez pas les utilisateurs à créer leurs propres balises et les obligez plutôt à choisir dans une liste.
Trouvez-le sur GitHub
Comme une grande partie de notre nouveau contenu App Store, le widget Sélecteur d'étiquettes a un GitHub référentiel. Notre communauté open source active travaille constamment à l'amélioration des widgets existants et à la création de nouveaux contenus intéressants. Gardez un œil sur ce widget à l'avenir, car des fonctionnalités supplémentaires sont en cours d'ajout. Si vous vous sentez plein d'initiative, téléchargez le référentiel et ajoutez vous-même de nouvelles fonctionnalités !
Bon mannequinat !