Commandes avancées pour les listes déroulantes

The tutorials on this page demonstrate using drop-down lists with the UiPath Form Designer, inside the Create Form Task activity. The most used property for achieving the results in the tutorials is the FormData(Collection).

Création de listes déroulantes dynamiques

Utilisez-les dans les workflows où vous souhaitez envoyer des données dynamiques pour remplir un contrôle déroulant dans une action de formulaire.

With this method, a variable of the type List of Strings holds the values of the drop-down list instead of adding static values on the Data tab in the UiPath Form Designer.

Dans l'exemple suivant, nous créons une liste déroulante dynamique de pays, initialisons une variable avec la liste des pays et créons une variable supplémentaire pour capturer le pays sélectionné par les utilisateurs.

To create a dynamic drop-down:

1. In the Create Form Task activity, click the ellipsis (...) to the right of FormData.
2. Ajoutez un argument pour la liste déroulante dynamique comme suit :

   • Nom : countryList_dropdown

   • Direction: In

   • Type: List of Strings (List<String>)

   • Value: Press Ctrl + K and enter listOfCountries as the variable name.

     La variable listOfCountries contient les éléments de la liste déroulante.

     Remarque :

     Array of Strings is also supported, but you must manually add the drop-down component in Form Designer and add the Field Key value.

3. Si vous souhaitez rétablir la sélection de l'utilisateur dans le workflow, ajoutez un autre argument pour capturer la valeur sélectionnée :
   • Nom : country (la clé de champ du composant déroulant)
   • Direction: In/Out or Out
   • Type: String
   • Value: Press Ctrl + K and enter selectedCountry as the variable name.
4. Click OK to close Form Data.
5. Open the Variables panel and initialize listOfCountries with the default value new List(of string) from { "India", "Romania", "US" }.
   Astuce :

   You can also choose to populate listOfCountries through other activities instead of initializing it.

Création de listes déroulantes en cascade

Utilisez-les dans les formulaires basés sur les tâches lorsque vous souhaitez que la sélection dans une liste déroulante (parent) renseigne les valeurs dans la deuxième liste déroulante (enfant).

Pour créer une liste déroulante en cascade :

1. In the Create Form Task activity, click the ellipsis (...) to the right of FormData.

2. Liez la liste déroulante parente au workflow.

   Pour cet exemple, créez un argument qui transmet la variable listOfCountries Liste<String> au workflow sous la forme d'une liste déroulante.

   Remarque :

   La variable listOfCountries contient les éléments de la liste déroulante parent, c'est-à-dire la liste des pays.

   1. Nommez l'argument CountryList_dropdown. Le nom de la propriété Clé de champ de cet argument est CountryList.
   2. Définir la direction sur Entrée
   3. Définissez le Type sur System.Collections.Generic.List<System.String>
   4. Définissez la Valeur comme variable listOfCountries List<String>.

3. Liez la liste déroulante enfant au workflow.

   Pour cet exemple, créez un argument qui transmet la variable stateDictionaryList Dictionnaire<String, Liste<String>> au workflow sous la forme d'une liste déroulante.

   Remarque :

   La variable stateDictionaryList contient les éléments de la liste déroulante enfant, c'est-à-dire les états de chaque pays.

   1. Nommez l'argument stateDictList_dropdown. Le nom de la propriété Clé de champ de cet argument est stateDictList.
   2. Définir la direction sur Entrée
   3. Définissez le Type sur System.Collections.Generic.Dictionary<System.String, System.Collections.Generic.List<System.String>
   4. Définissez la Valeur comme variable stateDictionaryList Dictionnaire<String, List<String>

4. Liez la liste déroulante enfant à la liste déroulante parent.

   Create an argument with the name of the child dropdown and add the _parent suffix. Then set the Value of the argument to the name of the parent dropdown, like this: ”ParentDropdownVariableName”.

   Pour cet exemple, créez un argument nommé stateDictList_parent. La liste déroulante enfant est stateDictList et vous y ajoutez le suffixe _parent .

   1. Définissez la Direction sur Entrée.
   2. Définissez le Type sur String.
   3. Définissez la Valeur sur ”CountryList”.

   When populating the stateDictList Dictionary variable, take note that the dictionary Key is a value from the parent drop-down list and its corresponding Value is a list of options to be shown on the form if the parent is set to the key.

   Astuce :

   Vous pouvez définir les valeurs à pré-remplir (par exemple, avec les champs de pays et d’état) dans la collection FormData . Si vous transmettez des valeurs enfants, assurez-vous d'inclure également la valeur parente afin d'éviter tout comportement inattendu.

5. Map each value from the parent drop-down to a List of Strings variable. You can populate the list (dictionary) for the parent drop-down in any way, but for this example, we use an Add to Dictionary activity for each value.

   • Dictionary: the dictionary of the child drop-down, stateDictList.
   • Key: a value from the list of strings for the parent drop-down, CountryList - in this example, "US", "India", and "Romania".
   • Value: Press Ctrl + K and enter a name for the the List of Strings variable which holds the values to show in the child drop-down when the Key value is selected in the parent - usaStatesList, indianStatesList, and romanianCountyList, respectively.

6. Make sure you place the activity or activities for the above step before the Create Form Task activity.

7. Click OK to close Form Data.

8. Open the Variables panel and initialize the new List of String variables you created with the following default values:

   • Pour indianStatesList : new List(of string) from { "Odisha", "Rajasthan", "Karnataka" }
   • Pour usaStatesList : new List(of string) from {"Florida", "Georgia", "Washington"}
   • pour romanianCountyList: new List(of string) from {"Cluj", "Prahova", "Constanta"}.

Téléchargez ces exemples ici.

Création de listes déroulantes en cascade dans les composants Modifier la grille (Edit Grid) et Grille de données (Data Grid)

To use cascaded drop-downs inside a Edit Grid or Data Grid component:

1. Create the drop-down fields following the steps above (using the FormData wizard).

2. Ouvrez le Concepteur de formulaires.

3. Si les champs déroulants ne sont pas créés dans votre formulaire, vérifiez que :

   • The <dropdownKey> , <dropdownKey>_dropdown, and <dropdownKey>_parent arguments are correctly added in the FormData collection.
   • The GenerateInputFields box is checked.

4. Drag and drop the Edit Grid or Data Grid component.

5. Drag and drop the drop-downs created at Step 1 into the Edit Grid or Data Grid component.

6. Ouvrez le menu de configuration de l'enfant (cliquez sur ).

7. In the Logic tab, notice the preconfigured advanced logic.

   

8. Navigate to the Actions > Schema Definition field.

9. Remplacez [data.<parent_dropdown_key>] par [row.<parent_dropdown_key>] dans l'expression de schéma.

   

   Remarque :

   Le mot-clé de ligne indique au formulaire d'utiliser la valeur parente de la ligne de grille.

10. Enregistrez le formulaire.

Définition du nombre de résultats de recherche pour les listes déroulantes

Les listes déroulantes affichent au maximum quatre résultats de recherche par défaut. Vous pouvez modifier cette limite en définissant une propriété dans la conception de formulaire.

To set the number of search results for a drop-down:

1. In the UiPath Form Designer, click Edit to open settings for the drop-down list and then select the Data tab.
2. Under Choices.js options, add { "searchResultLimit" : x }, where x is the maximum number of results you want to show.

Affichage de toutes les options dans les listes déroulantes

Si les chaînes du menu déroulant comportent plus de 50 caractères, elles peuvent être omises de l'affichage.

Pour afficher toutes les options correspondant à votre terme de recherche:

1. Cliquez sur Modifier JSON pour le composant Liste déroulante que vous souhaitez modifier.
2. In the Component JSON field, add the following properties:

   ...
     "fuseOptions": {
       "distance": 800,
       },
     "threshold": 1,
     "useExactSearch": false,
   ...
   

Remarque :

La propriété threshold détermine le moment où l'algorithme arrête l'opération de recherche pour le terme de recherche donné. Par exemple, un threshold sur 0 nécessite une correspondance exacte de lettres et d’emplacement. Un threshold sur 1 peut correspondre à tout, même aux erreurs d'orthographe. Ajustez la valeur threshold en fonction de votre cas d'utilisation.