Ejemplos

Use este widget para apoyar los requisitos de diseño de la aplicación como por ejemplo los siguientes:

• Desea crear una aplicación que permita a los usuarios finales seleccionar un registro de la lista y verlo en el mapa.
• Desea visualizar registros de una fuente de datos en una vista de lista personalizada. Los registros que se van a visualizar deben cumplir varios criterios.
• Desea proporcionar una lista con la que interactúen los usuarios finales, como por ejemplo filtrado de la lista, ordenación de la lista con opciones predefinidas y selección de registros de la lista.

Notas de uso

Cuando agregue un widget Lista, elija primero un diseño de plantilla para las tarjetas de elementos de la lista y haga clic en Iniciar. En el lienzo, el primer elemento en el widget Lista se activa y puede modificar el diseño de los widgets que hay en él o agregar más widgets arrastrándolos desde el panel Insertar hasta la primera tarjeta. Actualmente, el widget Lista solo admite los widgets Texto, Botón e Imagen.

El widget Lista requiere una fuente de datos. Puede utilizar el widget Lista en una página con o sin un mapa mostrado. Si incluye un widget Mapa que utiliza la misma capa, si hace clic en una entidad de la lista, resaltará la entidad correspondiente del mapa. Al designar el contenido de las tarjetas de los elementos en la lista, especifique qué quiere mostrar configurando los widgets en el primer elemento y seleccionando el respectivo contenido dinámico para rellenar los registros de la fuente de datos conectada. (De forma predeterminada, los widgets que agrega a la lista heredan los datos de la lista). También puede establecer acciones para que un widget Lista interactúe con otros widgets de su aplicación, como por ejemplo aplicación de zoom a la entidad seleccionada en un mapa de un widget Mapa o visualización de los atributos de la entidad seleccionada en un widget Información de entidades.

Si configura el widget Lista con varios estados (Regular, Mantener el puntero y Seleccionado), aparece un botón Vinculado a cuando selecciona los widgets anidados. El botón indica si los ajustes del widget están aislados o sincronizados a través de los estados.

• Para widgets sincronizados, el contenido del widget y ajustes de estilo (fondo, borde y sombra) son los mismos, y el tamaño y posiciones pueden ser diferentes en función de los estados.
• Para widgets aislados, puede configurar propiedades sin afectar a ningún otro widget en otro estado.
• Para usar el mismo widget en otro estado o sincronizar el tamaño y posición del widget, seleccione el widget y aplíquelo al estado del destino.
• Cuando elimina un widget sincronizado, el mismo widget en diferentes estados también se elimina a menos que aísle el widget primero.

Ajustes

El widget Lista incluye estos ajustes:

• Seleccionar una plantilla: elija entre diseños de lista predefinidos o empiece con una plantilla de lista vacía. (Si elige una plantilla, puede personalizar su apariencia posteriormente.)
• Datos: especifique los datos que se incluirán en la lista.
  • Seleccionar datos: seleccione la fuente de datos para una capa de entidades con entidades que se van a mostrar en el widget. Solo puede seleccionar una vista de datos para una capa de entidades. En la configuración de la vista de datos, puede filtrar los datos para restringir lo que aparece en el widget, ordenar los datos para mostrar los elementos de la lista en un orden concreto o especificar las limitaciones de registro.
• Disposición: defina cómo mostrar los elementos en la lista.
  • Dirección: visualice elementos en una lista horizontal o vertical.
  • Ancho o altura de elemento: especifique el tamaño de los elementos de la lista en píxeles.
    • Para una lista horizontal, defina el ancho del elemento de la lista escribiendo el número preciso de píxeles en este ajuste o arrastrando la barra de redimensionamiento en el lienzo. La altura del elemento se define con la altura del widget.
    • Para una lista vertical, defina la altura del elemento de la lista escribiendo el número preciso de píxeles en este ajuste o arrastrando la barra de redimensionamiento en el lienzo. El ancho del elemento se define con el ancho del widget.
  • Bloquear relación ancho-altura: bloquee la relación ancho-altura de los elementos de la lista cuando se redimensione el widget.
  • Espaciado horizontal o vertical: defina el espaciado entre elementos de la lista en píxeles.
  • Estilo de paginación: defina cómo cargar elementos de la lista que no encajan en la primera página:
    • Desplazamiento: cargue más elementos cuando los usuarios se desplacen hacia abajo en la lista.
      • Barra de desplazamiento: muestre una barra de desplazamiento.
      • Navegador: incluya controles de navegación hacia arriba y hacia abajo para desplazamiento por la lista. Para Paso, defina el número de elementos en los que desplazarse cada vez que se haga clic en el control del navegador.
    • Varias páginas: divida una lista larga en varias páginas usando paginación. Para Elementos por página, defina el número de elementos que se visualizarán en una página.
• Estados: proporcione una representación visual para comunicar los tres estados de los elementos de la lista: Regular (estado predeterminado para el elemento sin interacción con el usuario), Cursor (el usuario inicia este estado señalando un elemento de la lista) y Seleccionado (el usuario selecciona el elemento de la lista).

  Sugerencia:

  Si cambia los estados correspondientes para widgets anidados, puede aislar los cambios para que no se apliquen a todos los estados. Seleccione el widget Lista, haga clic en el botón para el estado que desea cambiar, haga clic en un widget anidado seguido del botón Vinculado a que aparece, elija Aislar y configure los ajustes del widget anidado. (Si primero configura ajustes y posteriormente hace clic en Aislar, los cambios ya se habrán aplicado a los demás estados).

  • Fondo: defina el fondo para los elementos de la lista en su estado regular (sin interacción actual del cliente). Seleccione un color o imagen de relleno. Si elige una imagen, puede colocarla dentro del borde del elemento de la lista usando Ajustar, Rellenar, Centro, Tesela o Extender. Si elige Ajustar, el color de relleno de fondo aparece alrededor de la imagen.
  • Borde: establezca el borde de los elementos de la lista en su estado regular eligiendo el color, estilo (como por ejemplo guiones o puntos) y el ancho en píxeles del borde.
  • Radio del borde: cambie el tamaño del radio (por píxeles o porcentaje) para dar forma a las esquinas de los elementos de la lista en su estado regular. Bloquee los ajustes para sincronizar el radio de las cuatro esquinas.
  • Mantener el puntero: especifique si la apariencia de un elemento de la lista cambia cuando los usuarios finales sitúan el cursor sobre él. Cuando el estado Mantener el puntero está habilitado, sus ajustes aparecen en el panel de configuración con opciones para cambiar el fondo, borde y radio del borde del elemento de la lista con cursor.
    • Aparece una pestaña Mantener el puntero junto al primer elemento de la lista del lienzo, que se actualiza para mostrar cómo va a aparecer el elemento cuando los usuarios sitúen el cursor sobre él. También puede agregar widgets o eliminar, redimensionar y recolocar widgets existentes solo para el estado Mantener el puntero.
  • Seleccionado: especifique si la tarjeta de elemento de la lista puede seleccionarse y cómo cambia su apariencia cuando los usuarios finales hacen clic para seleccionarla. Cuando el estado seleccionado está habilitado, sus ajustes aparecen en el panel de configuración con opciones para permitir realizar varias selecciones y cambiar el fondo, borde y radio del borde del elemento de la lista seleccionado. Con Modo de selección puede limitar las selecciones a solo un elemento a la vez (si se hace clic en otro elemento se elimina la selección actual) o permitir que los usuarios finales seleccionen varios elementos a la vez (si se hace clic en otro elemento, este se agrega al conjunto de selección actual).
    • Aparece una pestaña Seleccionado junto al primer elemento de la lista del lienzo, que se actualiza para mostrar cómo va a aparecer el elemento cuando los usuarios lo seleccionen. También puede agregar widgets o eliminar, redimensionar y recolocar widgets existentes solo para el estado seleccionado.
• Herramientas: proporcione herramientas para que usuarios finales interactúen con la lista.
  • Buscar: proporcione un cuadro de búsqueda en la lista.
    • Seleccionar los campos de búsqueda: elija uno o más campos de búsqueda.
    • Coincidencia exacta: limite los resultados de búsqueda a solo registros que coincidan con la frase de búsqueda.
    • Sugerencia: proporcione una sugerencia que aparezca como texto del marcado de posición en el cuadro de búsqueda para ayudar a los usuarios finales a buscar valores relevantes.
  • Ordenar: proporcione un menú para que los usuarios finales ordenen la lista mediante campos y secuencia específicos. Escriba un nombre común para cada opción de menú.
  • Filtro: agregue filtros para que los usuarios finales interactúen con la lista.
  • Mostrar selección: proporcione la opción para que los usuarios finales actualicen la lista para visualizar únicamente los elementos seleccionados.
  • Borrar selección: proporcione la opción para que los usuarios finales borren la selección de todos los elementos seleccionados.

  Nota:

  Las herramientas Mostrar selección y Borrar selección solo aparecen cuando el estado Seleccionado está habilitado.