Liste personnalisée

Liste personnalisée ( Custom List ) est une commande dynamique basée sur des modèles, qui intègre diverses commandes avec une flexibilité exceptionnelle. Loin d'être un contrôle de liste standard, la Liste personnalisée ( Custom List ) permet encore plus de contrôles dans la mise en page, ce qui la rend idéale pour des tâches telles que la création d'une grille de liste d'e-mails efficace.

Propriétés

La liste personnalisée a 2 ensembles de propriétés : un pour la commande principale et un pour le modèle qu'il contient.

Pour basculer entre les propriétés d'une liste personnalisée et de son modèle, cliquez simplement sur la commande dans la zone de dessin ou sélectionnez-la dans l'arborescence sur la gauche.

Cette ligne

Le mot-clé ThisRow représentant chaque ligne des données de la liste personnalisée

Pour lier les valeurs de la source de données à des commandes individuelles dans la liste personnalisée, utilisez le mot clé ThisRow . Pour en savoir plus, consultez les exemples.

Limitations

• Pour des raisons de performances, plusieurs contrôles ne peuvent pas être inclus dans une liste personnalisée :

  • Modifier la grille

  • Table

  • Liste personnalisée

  • HTML personnalisé

  • Onglets

  Remarque :

  Pour les commandes basées sur des listes qui dépassent quatre éléments, nous vous recommandons d'utiliser les commandes Liste déroulante ( Dropdown ).

• Le référencement direct des contrôles de liste personnalisée , tels que MainPage.Header, n'est pas autorisé, bien que le nom du contrôle ait été trouvé par IntelliSense.
• Le glisser-déposer des contrôles entre le contexte d'une liste personnalisée et d'autres contrôles de conteneur peut entraîner des expressions non valides, certaines visibles uniquement lorsque vous prévisualisez l'application. En effet, les liaisons dans le contexte de la Liste personnalisée ( Custom List ) (en utilisant le mot clé ThisRow ) deviennent non valides en dehors de la Liste personnalisée.

Création optimale de listes personnalisées

Voici la méthode optimale pour travailler avec une liste personnalisée :

1. Concevez votre liste personnalisée à l'aide d'un outil de conception tel que Schéma.

2. Dans l'application Studio, une fois que vous avez ajouté la commande Liste personnalisée (Custom List), créez une mise en page en utilisant des conteneurs et des commandes pour chaque élément de liste.

3. Créez un exemple de ligne qui comprend une description textuelle.

4. Remplacez la description par des expressions.

5. Ajouter des règles aux événements.

6. Ajustez le style de commande en fonction du fichier de conception.

7. Prévisualisez l'application.

Général

Liste personnalisée

• Source de données (Data Source ) : source de données pour l'affichage de la liste. Les types de données valides sont TableDonnées et Tableau d'objet.
• Masqué ( Hidden ) : si la valeur est définie sur true, masque la commande pendant le runtime.
• Désactivé : si défini sur false, les utilisateurs de l'application peuvent interagir avec la liste. Si la valeur est true, la liste est en lecture seule.

Modèle

• Info-bulle ( Tooltip ) : info-bulle à afficher sur le modèle. Utilisez cette option pour fournir des informations supplémentaires sur le modèle.

• Masqué ( Hidden ) : si la valeur est définie sur true, masque la commande pendant le runtime.

• Désactivé : si défini sur false, les utilisateurs de l'application peuvent interagir avec le modèle. S'il est défini sur true, le modèle est en lecture seule.

Events

Liste personnalisée

• Ligne sélectionnée ( Row selected ) : configurez ce qui se passe lorsque l'utilisateur de l'application sélectionne une ligne (c'est-à-dire une commande dans un modèle) dans la liste personnalisée. Configurez ce qui se passe lorsque la valeur est modifiée.

Modèle

• Cliqué (Clicked On) : configurez ce qui se passe lorsqu'un clic est effectué sur le modèle.

Style

Liste personnalisée

• Alignement de commande (Control Alignment) : hérite de l'alignement parent par défaut. Un autre alignement que le parent peut être défini. Pour revenir par défaut à l'alignement parent, désélectionnez les options remplacées.

  Remarque : l'alignement dépend de la mise en page sélectionnée pour le parent (Vertical vs Horizontal).
• Mise en page ( Layout ) : personnalisez la position des modèles dans la liste personnalisée :
  • vertical : les modèles sont disposés verticalement

  • Horizontal : les modèles sont disposés horizontalement

  • Grille (Grid) : les modèles sont disposés sous forme de grille

  • Espace intermédiaire (pixels uniquement) : l'espacement entre les modèles, lorsqu'ils sont disposés sur une disposition verticale ou horizontale .

  • Écart horizontal /vertical : l'espacement horizontal et vertical entre les modèles, lorsqu'ils sont disposés en grille .

  • Largeur du modèle ( Template Width ) - la largeur du modèle.

  • Hauteur du modèle ( Template Hauteur ) - la hauteur du modèle.

  Remarque :

  • Dans une mise en page horizontale , la largeur ( Width ) est définie en pixels et la hauteur ( Height ) en pixels, %, em, ou auto.
  • Dans une mise en page verticale , la hauteur ( Height ) est en pixels et la largeur ( Width ) peut être en pixels, %, em, ou auto.

  • Dans une mise en page Grille , la hauteur et la largeur sont en pixels.

• Marge (Margin) : définit la marge de la mise en page. Par défaut, une marque de 4px est définie. Les propriétés des marges Haut/Bas (Top/Bottom)et Gauche/Droite (Left/Right) sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Marge (Margin).

• Taille (Size) : largeur et hauteur de la liste personnalisée, en pixels. Valeurs par défaut
  • Dans une mise en page horizontale : Largeur 800 px, Hauteur auto
  • Dans une mise en page verticale : Largeur auto, Hauteur 400 px
  • Dans une mise en page Grid : Largeur 800 px, Hauteur 400 px
  Pour définir des valeurs minimales ou maximales, cliquez sur l'icône à trois points (...).

Modèle

• Alignement de commande (Control Alignment) : hérite de l'alignement parent par défaut. Un autre alignement que le parent peut être défini. Pour revenir par défaut à l'alignement parent, désélectionnez les options remplacées.

  Remarque : l'alignement dépend de la mise en page sélectionnée pour le parent (Vertical vs Horizontal).

• Mise en page ( Layout ) : déterminez comment les commandes du modèle sont positionnées :

  • Horizontal/Vertical : l'orientation des commandes.
  • Alignement : l'alignement des commandes dans le modèle.
  • Autoriser l'encapsulage ( Allow wrapping ) : si cette option est sélectionnée, encapsule les commandes dans le modèle.

  • Autoriser le défilement ( Allow scrolling ) : si cette option est sélectionnée, elle permet de faire défiler l'intérieur du modèle. Pour activer Autoriser le défilement ( Allow scrolling), le modèle doit avoir une hauteur fixe (disposition verticale) ou une largeur fixe (disposition horizontale).

• Couleur d'arrière-plan ( Background Color ) : la couleur d'arrière-plan du modèle.

• Bordure (Border) : la bordure de la commande. L'épaisseur (Thickness), la couleur (Color) et le rayon (Radius) peuvent être configurés.

• Police ( Font ) : la famille de polices relative à l'application du modèle. Toutes les commandes du modèle partagent la même famille de polices. Par défaut, le modèle hérite de la famille de polices de la liste personnalisée.

• Marge (Margin) : définit la marge de la mise en page. Par défaut, une marge de 0px est définie. Les propriétés des marges Haut/Bas (Top/Bottom)et Gauche/Droite (Left/Right) sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Marge (Margin).

• Remplissage ( Padding ) : remplissage du modèle. Par défaut, un remplissage de 16 px est défini. Les propriétés des marges Haut/Bas et Gauche/Droite sont combinées. Ces propriétés peuvent être dissociées à l'aide du bouton Lier (Link) sur le côté droit de la section Remplissage ( Padding ).

• Avancé (Advanced) : affiche les propriétés flexibles de la commande.

  • Base Flex - définit la taille d'origine d'un élément Flex avant que l'espace supplémentaire ne soit distribué ou supprimé (px, %, em, auto).

  • Croître flexible (Flexi*) : lorsqu'un espace supplémentaire est disponible, ces valeurs dictent la croissance d'un élément flexible par rapport au reste des éléments.

  • Réduction du libelle : lorsque l’espace est insuffisant, cette valeur détermine la valeur à laquelle un élément flexible doit rétrécir par rapport aux autres éléments.

    Pour plus de détails, consultez la documentation de Mozilla Developer Network.

Propriétés VB

Nom de la propriété	Type de données	Autorisations d’accès	Exemple
Désactivé (Disabled)	Booléen	Lecture/Écriture	-
Masqué	Booléen	Lecture/Écriture	-
SelectedItem	Union du type de source de données et de la liste des contrôles à l'intérieur de la liste personnalisée	Lecture/Écriture	Supposons que votre source de données soit une entité Pour accéder à la ligne de l'entité : MainPage.CustomList.SelectedItem.data Supposons que vous ayez un sélecteur de date dans votre liste personnalisée. Pour accéder à la valeur de la commande Sélecteur de date ( Date Picker ) : MainPage.CustomList.SelectedItem.Datepicker.value
IndexÉlémentSélectionné	Entier	Lecture seule	Renvoie l'index de la ligne actuellement sélectionnée : MainPage.CustomList.SelectedItemIndex
Cette ligne	Le même que le champ Source de données	Lecture seule	Fait référence à l'enregistrement actuel de la source de données. Utilisez-le pour configurer les champs de la liste personnalisée.

Exemples de liaison de données pour les éléments de liste personnalisée

La source de données est une entité

Supposons que vous référencez une entité dans le champ Source de données (Data source). Cette entité a une colonne nommée cvxz"FirstName".vcc

Pour lier cette colonne à une commande Zone de texte ( Textbox ) dans la Liste personnalisée ( Custom List), vous pouvez utiliser l'expression suivante :

ThisRow.Firstname

La source de données est un objet TableDonnées

Supposons que vous référenciez un argument TableDonnées d'un processus dans le champ Source de données .

Le type de CeciLigne est DataRow, et sa valeur peut être extraite comme suit :

ThisRow("FieldName")

Assurez-vous de le convertir dans le type approprié.

Démo

Utilisation d'une liste personnalisée

Introduction

Cette application montre la fonctionnalité Liste personnalisée ( Custom List ).

Application de démonstration - essayez-la vous-même

Pour essayer vous-même la liste personnalisée , utilisez l’application de démonstration.

Télécharger l’application de démonstration depuis GitHub

Aperçu de l’application de démonstration dans le cloud

Application de démonstration - instructions d'utilisation

1. Dans UiPath^® Apps, créez une nouvelle application et importez l'application de démonstration téléchargée.

2. Vous remarquerez peut-être des erreurs. Pour les corriger, remplacez les entités référencées « Country », « EmailInbox », « Employees », « Employees2 » et « System Users » par des entités dans votre locataire.

3. Pour interagir avec les champs Liste personnalisée ( Custom List ), prévisualisez votre application.