Widget Sélecteur d'arborescence (thématisable)
 |
Le Sélecteur d'arborescence est disponible en tant que widget dans Mashup Builder et en tant que composant Web dans la bibliothèque SDK Web Component.
|
Le widget Sélecteur d'arborescence vous permet d'assurer une navigation hiérarchique des données et la sélection d'un seul élément stocké dans une propriété de table d'informations. Par exemple, vous pouvez utiliser le widget pour permettre aux utilisateurs de sélectionner des produits de différentes familles et catégories, des machines distantes déployées sur différents sites ou des articles d'inventaire qui sont stockés dans un entrepôt de maintenance. Vous pouvez lier l'élément sélectionné à d'autres widgets tels que Grille ou Affichage propriétés pour afficher plus d'informations sur un objet spécifique. Le widget est divisé en deux zones :
• Une vue arborescente qui affiche le chemin d'accès à l'élément sélectionné et vous permet de naviguer dans la structure arborescente.
• Une vue de sélection qui répertorie tous les enfants de l'élément actuel.
En outre, un bouton de recherche permet aux utilisateurs de rechercher l'ensemble de la hiérarchie du sélecteur d'arborescence. Lorsque le Sélecteur d'arborescence est chargé lors de l'exécution, il affiche les éléments de niveau supérieur dans la zone de sélection. Lorsqu'un élément est sélectionné, ses enfants s'affichent et l'arborescence est mise à jour pour mettre en surbrillance le chemin d'accès à l'élément. Vous pouvez utiliser l'arborescence pour accéder aux niveaux supérieurs de la hiérarchie des données. Pour afficher les enfants d'un élément, vous devez le sélectionner dans la zone de sélection. Lorsqu'un élément n'a pas d'enfant, un message s'affiche. Vous pouvez personnaliser ce message à l'aide de la propriété de widget NoChildrenMessage.
Anatomie
Le sélecteur d'arborescence est divisé en deux vues. Une vue arborescente qui affiche le chemin d'accès à l'élément actuel et une vue de sélection qui répertorie les enfants disponibles pour l'élément sélectionné.
1. Effacez la sélection actuelle. Si vous cliquez sur ce bouton, le sélecteur d'arborescence est réinitialisé sur l'élément de niveau supérieur.
2. Elément de niveau supérieur
3. Elément enfant de Factories et parent de Painting Line.
4. Bouton de recherche d'élément
5. Elément
6. Couleur de surbrillance d'élément
Format des données
Pour configurer les éléments de liste pour le widget Sélecteur d'arborescence, vous devez créer un service qui renvoie une table d'informations avec les définitions de champ suivantes :
Champ ID | Champ ID parent | Champ Nom | Champ Couleur | |
|---|---|---|---|---|
Type de base | STRING | STRING | STRING | STRING |
Description | Identificateur unique pour chaque élément dans le sélecteur d'arborescence. | ID de l'élément parent dans le sélecteur d'arborescence. | Etiquette à afficher pour l'élément dans le sélecteur d'arborescence. | Champ facultatif qui spécifie la couleur utilisée pour mettre l'élément en surbrillance. Formats pris en charge : noms de couleur CSS 'red', valeurs RVB 'rgb(255, 0, 0)' ou valeurs hexadécimales '#ff0000'. |
Exemple de ligne | #2 | #1 | Factory | Red |
Chaque ligne de la table d'informations définit un élément dans la liste déroulante. Vous pouvez configurer votre service de données pour générer des éléments de manière statique, ou de manière dynamique en utilisant la saisie provenant d'autres widgets ou services.
Création d'un service de données pour le sélecteur d'arborescence
1. Dans Composer, ouvrez un objet, un modèle d'objet ou tout autre type d'entité, puis ouvrez l'onglet Services.
2. Cliquez sur Ajouter afin de créer un nouveau service pour le sélecteur d'arborescence.
3. Sous Infos service, entrez le nom du service, puis cliquez sur Enregistrer et continuer.
4. Dans l'éditeur de code, définissez une nouvelle table d'informations à l'aide du format de données du sélecteur d'arborescence.
5. Définissez les éléments d'arborescence en ajoutant des lignes avec des valeurs pour chaque champ de la table d'informations à l'aide de la forme de données. La syntaxe pour définir une ligne est la suivante :
<infotable_name>.AddRow(<Row_Object>);
6. Une fois votre service défini, cliquez sur Terminé, puis sur Enregistrer pour enregistrer les modifications apportées à l'entité.
 | Cliquez sur Exécuter pour afficher un aperçu de la table d'informations de sortie renvoyée par le service de données. |
La sortie de la table d'informations après l'exécution du service de données est illustrée ci-dessous :
Liaison de données au sélecteur d'arborescence
Pour lier des données au widget Sélecteur d'arborescence, procédez comme suit :
1. Dans Mashup Builder, ajoutez un objet contenant un service de données pour les éléments du sélecteur d'arborescence à l'aide du panneau Données.
2. Liez la propriété All Data d'un service à la propriété Data du widget.
3. Liez le service à l'événement d'application composite Loaded.
4. Dans le panneau Propriétés, spécifiez les colonnes de la table d'informations à utiliser pour configurer les éléments du sélecteur d'arborescence :
◦ IDField : colonne d'identificateur unique des éléments.
◦ NameField : étiquette de colonne à afficher pour l'élément.
◦ ParentIDField : colonne utilisée pour spécifier l'ID parent des éléments.
◦ ColorField : colonne contenant la couleur utilisée pour mettre en surbrillance chaque élément.
5. Cliquez sur Enregistrer, puis sur Afficher l'application composite.
Au moment de l'exécution, l'élément de niveau supérieur s'affiche lorsque vous ouvrez le sélecteur d'arborescence.
Recherche d'éléments
La recherche affiche une liste des éléments correspondants de l'ensemble des données de l'arborescence. Les éléments proches de la sélection actuelle sont répertoriés plus haut dans les résultats de la recherche. Chaque nom d'élément est suivi du chemin complet dans l'arborescence. En outre, les couleurs de surbrillance sont affichées pour faciliter l'identification des éléments associés. Pour désactiver la recherche, définissez la propriété HideSearchButton sur "faux".
Transmission des éléments sélectionnés à d'autres widgets ou services
Vous pouvez transmettre l'élément sélectionné à l'aide de l'une des propriétés suivantes :
• SelectedData
• SelectedItem : contient le nom de l'élément sélectionné.
Utilisez la propriété SelectedData. La propriété SelectedItem ne fournit pas de valeur unique.
La table d'informations (INFOTABLE), une structure de données, contient une ligne unique qui correspond à l'élément sélectionné (SelectedItem) de la table d'informations d'origine. Ce choix de conception a été fait pour résoudre un problème spécifique : l'impossibilité de faire la distinction entre les éléments aux noms identiques uniquement en fonction du SelectedItem.
Prenons l'exemple fourni dans la spécification Figma. Le terme "Apple" apparaît dans trois sections différentes : "Computer companies", "Record company" et "Fruit". Chaque instance de "Apple" est un élément distinct. En nous fiant uniquement à SelectedItem, il serait impossible de déterminer laquelle des trois instances de "Apple" a été sélectionnée par l'utilisateur.
Toutefois, en utilisant SelectedData, nous pouvons contourner cette limitation. SelectedData fournit des informations complètes sur l'élément sélectionné, ce qui nous permet d'identifier l'élément exact qui a été sélectionné, que d'autres éléments partagent ou non le même nom. Cela garantit une sélection précise et précise des éléments, améliorant ainsi les fonctionnalités et l'expérience utilisateur du système.
Propriétés du widget
Nom de propriété | Description | Type de base | Valeur par défaut | Liable (<-, ->) | Localisable ? (O/N) |
|---|---|---|---|---|---|
Data | Source de données de table d'informations utilisée pour définir les éléments à afficher dans le widget. | INFOTABLE | O | N | |
IDField | Colonne de table d'informations dans les données qui contient l'ID de chaque élément. | Champ de table d'informations | N | N | |
ParentIDField | Colonne de table d'informations dans les données qui contient l'ID parent de chaque élément. | Champ de table d'informations | N | N | |
NameField | Colonne de table d'informations dans les données qui contient le nom affiché de chaque élément. | Champ de table d'informations | N | N | |
ColorField | Colonne de table d'informations dans les données qui contient la couleur de chaque élément. Formats pris en charge : noms de couleur CSS 'red', valeurs RVB 'rgb(255, 0, 0)' ou valeurs hexadécimales '#ff0000'. | Champ de table d'informations | N | N | |
SelectedData | Table d'informations contenant les données de ligne avec un identificateur unique pour l'élément sélectionné. Utilisez cette propriété lorsque la propriété SelectedItem ne fournit pas de valeur unique. Par exemple, lorsqu'un élément portant le même nom est affiché sous plusieurs parents. | INFOTABLE | O | N | |
SelectedItem | Nom de l'élément sélectionné. Spécifie l'élément sélectionné dans le sélecteur d'arborescence. | STRING | Vide | O | N |
SelectedItemChanged | Evénement pouvant être lié déclenché lorsque l'élément sélectionné est modifié. | Evénement | O | N | |
HideSearchButton | Masque le bouton de recherche. Lors de l'utilisation de la recherche, les éléments les plus proches de l'élément sélectionné sont répertoriés en premier, suivis par le reste des résultats de la recherche. | BOOLEAN | Faux | O | N |
NoSelectionMessage | Message à afficher sur la droite du widget lorsqu'aucune sélection n'est effectuée dans le sélecteur de structure arborescente. | STRING | Widgets.NoSelectionMessage | O | O |
EndOfSelectionMessage | Message à afficher sur la droite du widget lorsque l'élément sélectionné n'a pas d'enfant. | STRING | Widgets.EndOfSelectionMessage | O | O |
NoSearchResultsMessage | Message à afficher sur la droite du widget lorsque la recherche ne produit aucun résultat. | STRING | Widgets.NoResultsMessage | O | O |
Label | Spécifie le texte du sélecteur d'arborescence. | STRING | Vide | O | O |
SelectionLabel | Spécifie l'étiquette à afficher au-dessus de la section de sélection à droite. | STRING | Widgets.ChooseBelowMessage | O | O |
ClearSelectionLabel | Définit le texte de l'étiquette pour le bouton Effacer la sélection. | STRING | Widgets.ClearSelectionMessage | O | O |
Disabled | Utilisez cette propriété pour désactiver le widget dans l'application composite. | BOOLEAN | Faux | O | N |