Controles avanzados para desplegables

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).

Crear menús desplegables dinámicos

Úselos en flujos de trabajo en los que desee enviar datos dinámicos para rellenar un control desplegable dentro de una acción de formulario.

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.

En el siguiente ejemplo, creamos un menú desplegable dinámico de países, inicializamos una variable con la lista de países y creamos una variable adicional para capturar el país seleccionado por los usuarios.

To create a dynamic drop-down:

1. In the Create Form Task activity, click the ellipsis (...) to the right of FormData.
2. Añade un argumento para el menú desplegable dinámico de la siguiente manera:

   • Nombre: countryList_dropdown

   • Direction: In

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

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

     La variable listOfCountries contiene los elementos en la lista desplegable.

     Nota:

     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 desea volver al flujo de trabajo la selección de usuario, añada otro argumento para capturar el valor seleccionado:
   • Nombre: country (la clave de campo del componente desplegable)
   • 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" }.
   Consejo:

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

Crear menús desplegables en cascada

Úselos en formularios basados en tareas cuando desee que la selección en un menú desplegable (principal) complete los valores del segundo menú desplegable (secundario).

Para crear un menú desplegable en cascada:

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

2. Vincula el menú desplegable principal al flujo de trabajo.

   Para este ejemplo, crea un argumento que pase la variable listOfCountries List<String> al flujo de trabajo como una lista desplegable.

   Nota:

   La variable listOfCountries contiene los elementos de la lista desplegable principal, es decir, la lista de países.

   1. Nombra el argumento CountryList_dropdown. El nombre de la propiedad Clave de campo para este argumento es CountryList.
   2. Establecer la dirección como En
   3. Establece el Tipo como System.Collections.Generic.List<System.String>
   4. Establece el Valor como la variable listOfCountries List<String>.

3. Vincula el menú desplegable secundario al flujo de trabajo.

   Para este ejemplo, crea un argumento que pase la variable stateDictionaryList Dictionary<String, List<String>> al flujo de trabajo como una lista desplegable.

   Nota:

   La variable stateDictionaryList contiene los elementos de la lista desplegable secundaria, es decir, los estados de cada país.

   1. Nombra el argumento stateDictList_dropdown. El nombre de la propiedad Clave de campo para este argumento es stateDictList.
   2. Establecer la dirección como En
   3. Establece el Tipo como System.Collections.Generic.Dictionary<System.String, System.Collections.Generic.List<System.String>
   4. Establece el valor como la variable stateDictionaryList Dictionary<String, List<String>

4. Vincular el menú desplegable secundario al menú desplegable principal.

   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”.

   Para este ejemplo, crea un argumento llamado stateDictList_parent. El desplegable secundario es stateDictList y se le añade el sufijo _parent .

   1. Establece la Dirección como En.
   2. Establece el Tipo como String.
   3. Establece el Valor como ”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.

   Consejo:

   Puedes pasar los valores que se rellenarán previamente (por ejemplo, con campos de país y estado) en la colección FormData . Si estás pasando valores secundarios, asegúrate de incluir también el valor principal para evitar un comportamiento inesperado.

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:

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

Descargue estos ejemplos aquí

Crear menús desplegables en cascada en componentes Editar cuadrícula y Cuadrícula de datos

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. Abre el Diseñador de formularios.

3. Si los campos desplegables no se crean dentro de su formulario, verifique 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. Abra el menú de configuración del menú desplegable secundario (haga clic).

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

   

8. Navigate to the Actions > Schema Definition field.

9. Reemplaza [data.<parent_dropdown_key>] con [row.<parent_dropdown_key>] en la expresión del esquema.

   

   Nota:

   La palabra clave fila indica al formulario que utilice el valor principal de la fila de la cuadrícula.

10. Guarda el formulario.

Establecer el número de resultados de búsqueda para menús desplegables

Los menús desplegables muestran como máximo cuatro resultados de búsqueda de forma predeterminada. Puede cambiar este límite estableciendo una propiedad en el diseño del formulario.

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.

Mostrar todas las opciones dentro de los menús desplegables

Si las cadenas del menú desplegable tienen más de 50 caracteres, es posible que no se muestren.

Para mostrar todas las opciones que coinciden con tu término de búsqueda:

1. Haz clic en Editar JSON para el componente Lista desplegable que deseas editar.
2. In the Component JSON field, add the following properties:

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

Nota:

La propiedad threshold dicta en qué punto el algoritmo detiene la operación de búsqueda para el término de búsqueda dado. Por ejemplo, un threshold de 0 requiere una coincidencia exacta de letras y ubicación. Un threshold de 1 puede coincidir con cualquier cosa, incluso con errores ortográficos. Ajusta el valor threshold en función de tu caso de uso.