Lista personalizada

Lista personalizada es un control dinámico basado en plantillas que incorpora varios controles con una flexibilidad excepcional. Lejos de ser un control de lista estándar, la lista personalizada permite incluso más controles dentro del diseño, lo que la hace ideal para tareas como la creación de una cuadrícula de listado de correo electrónico eficaz.

Propiedades

La lista personalizada tiene dos conjuntos de propiedades: uno para el control principal y otro para la plantilla que contiene.

Para alternar entre las propiedades de una lista personalizada y su plantilla, simplemente haz clic en el control en el lienzo o selecciónalo en la vista de árbol de la izquierda.

Esta fila

La palabra clave ThisRow para representar cada fila de los datos de la lista personalizada

Para vincular valores del origen de datos a controles individuales dentro de la lista personalizada, utiliza la palabra clave ThisRow . Para obtener más información, consulta Ejemplos.

Limitaciones

• Debido a consideraciones de rendimiento, no se pueden incluir varios controles en una lista personalizada:

  • Editar cuadrícula

  • Tabla

  • Lista personalizada

  • HTML personalizado

  • Pestañas

  Nota:

  Para los controles basados en listas que superan los cuatro elementos, recomendamos utilizar los controles desplegables .

• No se permite hacer referencia directa a los controles de la lista personalizada , como MainPage.Header, a pesar de que IntelliSense encuentre el nombre del control.
• Arrastrar controles entre el contexto de una lista personalizada y otros controles de contenedor puede causar expresiones no válidas, algunas visibles solo cuando se previsualiza la aplicación. Esto se debe a que las vinculaciones dentro del contexto de la Lista personalizada (utilizando la palabra clave ThisRow ) dejan de ser válidas fuera de la Lista personalizada.

Creación de listas personalizadas óptimas

El método óptimo para trabajar con una lista personalizada es el siguiente:

1. Diseña tu lista personalizada utilizando una herramienta de diseño como Figma.

2. En App Studio, una vez que hayas añadido el control Lista personalizada, crea un diseño utilizando contenedores y controles para cada elemento de la lista.

3. Crea una fila de muestra que incluya una descripción de texto.

4. Reemplaza la descripción del texto con expresiones.

5. Añade reglas a los eventos.

6. Ajusta el estilo de control según el archivo de diseño.

7. Vista previa de la aplicación.

General

Lista personalizada

• Origen de datos: el origen de datos para la visualización de la lista. Los tipos de datos válidos son TablaDeDatos y Matriz de objetos.
• Oculto : si se establece en verdadero, oculta el control durante el tiempo de ejecución.
• Deshabilitado : si se establece en falso, los usuarios de la aplicación pueden interactuar con la lista. Si se establece como verdadero, la lista está en estado de solo lectura.

Plantilla

• Información sobre herramientas: información sobre herramientas que se mostrará en la plantilla. Utilízalo para proporcionar información adicional sobre la plantilla.

• Oculto : si se establece en verdadero, oculta el control durante el tiempo de ejecución.

• Deshabilitado : si se establece en falso, los usuarios de la aplicación pueden interactuar con la plantilla. Si se establece como verdadero, la plantilla está en estado de solo lectura.

Events

Lista personalizada

• Fila seleccionada : configura lo que sucede cuando el usuario de la aplicación selecciona una fila (es decir, un control dentro de una plantilla) en la Lista personalizada. Configura lo que sucede cuando se cambia el valor.

Plantilla

• Seleccionado: configura lo que sucede cuando se hace clic en la plantilla.

Estilo

Lista personalizada

• Alineación de control: por defecto, hereda la alineación principal. Se puede establecer una alineación diferente a la principal. Para volver a la alineación principal, anula la selección de las opciones anuladas.

  Nota: la alineación depende del diseño seleccionado para el elemento principal (Vertical vs Horizontal).
• Diseño : personaliza la posición de las plantillas dentro de la lista personalizada:
  • Vertical : las plantillas se organizan verticalmente

  • Horizontal : las plantillas se organizan horizontalmente

  • Cuadrícula : las plantillas se organizan en formato de cuadrícula

  • Espacio entre (solo píxeles): el espacio entre plantillas, cuando están dispuestas en un diseño Vertical u Horizontal .

  • Espacio horizontal / vertical: el espacio horizontal y vertical entre plantillas, cuando se organizan en un diseño de cuadrícula .

  • Ancho de la plantilla : el ancho de la plantilla.

  • Altura de la plantilla : la altura de la plantilla.

  Nota:

  • En un diseño Horizontal , la Anchura se establece en píxeles y la Altura en píxeles, %, em o auto.
  • En un diseño Vertical , la Altura está en píxeles y la Anchura puede ser en píxeles, %, em o auto.

  • En un diseño de cuadrícula , tanto la altura como la anchura están en píxeles.

• Margen : el margen del diseño. De forma predeterminada, se establece un margen de 4 px. Se combinan las propiedades de los márgenes superior/inferior e izquierdo/derecho . Estas propiedades pueden separarse utilizando el botón Enlace situado a la derecha de la sección Margen .

• Tamaño : la anchura y la altura de la lista personalizada, en píxeles. Valores predeterminados:
  • En un diseño Horizontal : Ancho 800 px, Altura automática
  • En un diseño Vertical : Anchura automática, Altura 400 px
  • En un diseño de cuadrícula : ancho 800 px, alto 400 px
  Para establecer valores mínimos o máximos, haz clic en el icono de tres puntos (...).

Plantilla

• Alineación de control: por defecto, hereda la alineación principal. Se puede establecer una alineación diferente a la principal. Para volver a la alineación principal, anula la selección de las opciones anuladas.

  Nota: la alineación depende del diseño seleccionado para el elemento principal (Vertical vs Horizontal).

• Diseño : determina cómo se colocan los controles dentro de la plantilla:

  • Horizontal/vertical: la orientación de los controles.
  • Alineación : la alineación de los controles dentro de la plantilla.
  • Permitir ajuste : si se selecciona, ajusta los controles en la plantilla.

  • Permitir desplazamiento : si se selecciona, permite desplazarse dentro de la plantilla. Para habilitar Permitir desplazamiento, la plantilla debe tener una altura fija (disposición vertical) o una anchura fija (disposición horizontal).

• Color de fondo: el color de fondo de la plantilla.

• Borde: establece el borde del control. Se pueden configurar el grosor, el color y el radio del borde.

• Fuente : la familia de fuentes para la plantilla. Todos los controles dentro de la plantilla comparten la misma familia de fuentes. De forma predeterminada, la plantilla hereda la familia de fuentes de la lista personalizada.

• Margen: establece el margen del diseño. De forma predeterminada, se establece un margen de 0px. Se combinan las propiedades de los márgenes superiores/inferiores e izquierdos/derechos. Estas propiedades se pueden separar utilizando el botón Enlace situado a la derecha de la sección Margen.

• Relleno : el relleno de la plantilla. De forma predeterminada, se establece un relleno de 16 px. Se combinan las propiedades de los márgenes superior/inferior e izquierdo/derecho . Estas propiedades pueden separarse utilizando el botón Enlace situado a la derecha de la sección Relleno .

• Avanzado: muestra las propiedades flexibles del control.

  • Base flexible: establece el tamaño original de un elemento flexible antes de que se distribuya o se elimine el espacio adicional (px, %, em, auto).

  • Crecimiento flexible : cuando hay espacio adicional disponible, este valor dicta cuánto debe crecer un elemento flexible en relación con el resto de los elementos.

  • Reducción flexible : cuando el espacio no es suficiente, este valor dicta cuánto debe reducirse un elemento flexible en comparación con los demás elementos.

    Para obtener más información, consulta la documentación de Mozilla Developer Network.

Propiedades VB

Nombre de propiedad	Tipo de datos	Permisos de acceso	Ejemplo
Deshabilitada	Booleano	Leer/Escribir	-
Oculto	Booleano	Leer/Escribir	-
SelectedItem	Unión del tipo de origen de datos y la lista de controles dentro de la lista personalizada	Leer/Escribir	Digamos que tu fuente de datos es una entidad Para acceder a la fila de la entidad: MainPage.CustomList.SelectedItem.data Digamos que tienes un selector de fecha en tu lista personalizada. Para acceder al valor del control Selector de fecha : MainPage.CustomList.SelectedItem.Datepicker.value
ÍndiceDeElementoSeleccionado	Entero	Solo lectura	Devuelve el índice de la fila actualmente seleccionada: MainPage.CustomList.SelectedItemIndex
Esta fila	Lo mismo que el campo Origen de datos	Solo lectura	Hace referencia al registro actual del origen de datos. Úsalo para configurar campos dentro de la lista personalizada.

Ejemplos de vinculación de datos para elementos de lista personalizada

El origen de datos es una entidad

Digamos que haces referencia a una entidad en el campo Fuente de datos. Esta entidad tiene una columna llamada cvxz"FirstName".vcc

Para vincular esta columna a un control de Cuadro de texto dentro de la Lista personalizada, puedes utilizar la siguiente expresión:

ThisRow.Firstname

El origen de datos es una TablaDeDatos

Digamos que haces referencia a un argumento TablaDeDatos de un proceso en el campo Fuente de datos .

El tipo de EstaFila es FilaDeDatos, y su valor se puede extraer de la siguiente manera:

ThisRow("FieldName")

Asegúrate de convertirlo al tipo apropiado.

Demo

Uso de la lista personalizada

Introducción

Esta aplicación demuestra la funcionalidad Lista personalizada .

Aplicación de demostración: pruébela usted mismo

Para probar la lista personalizada , utiliza la aplicación de demostración.

Descargar la aplicación de demostración de GitHub

Vista previa de la aplicación de demostración en la nube

Aplicación de demostración: instrucciones de uso

1. En UiPath^® Apps, crea una nueva aplicación e importa la aplicación de demostración descargada.

2. Es posible que observe algunos errores. Para solucionarlos, sustituye las entidades a las que se hace referencia "País", "Bandeja de entrada de correo electrónico", "Empleados", "Empleados2" y "Usuarios del sistema" por entidades de tu tenant.

3. Para interactuar con los campos de la lista personalizada , previsualiza tu aplicación.