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 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, como por ejemplo filtrándola, ordenándola con opciones predefinidas y seleccionando 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 (Predeterminado, Mantener el puntero y Seleccionado), aparece un botón Vinculado a cuando selecciona los widgets anidados para diseños personalizados. 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 las propiedades sin que afecte a otros widgets 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.

Configuración

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.
  • Ningún mensaje de datos: decida qué mensaje mostrar cuando el widget no contiene datos, por ejemplo, cuando el usuario aplica un filtro.
  • Texto de última actualización: cuando lafuente de datos tiene activada laactualización automática , excluya opcionalmente la última etiqueta de actualización que indica cuándo se actualizaron los datos en la aplicación.
• Disposición: defina cómo mostrar los elementos en la lista.
  • Diseño: muestra los elementos en una lista de filas, columnas o cuadrícula.
  • Altura o ancho del elemento: especifique el tamaño de los elementos de la lista.
    • Para una lista de filas, defina el ancho del elemento de la lista escribiendo un 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 de columnas, defina la altura del elemento de la lista escribiendo un 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.
    • Para una lista de cuadrícula, defina el ancho y la altura del elemento de la lista escribiendo el número preciso de píxeles de cada ajuste o arrastrando las barras de redimensionamiento en el lienzo. También puede definir el ancho del elemento de la lista por porcentaje del ancho del widget.

    Nota:

    Si la lista utiliza un diseño personalizado para dispositivos de pantalla mediana o pequeña, puede personalizar el tamaño de los elementos de la lista. Los iconos de esta configuración indican a qué tamaño de pantalla (grande, mediano o pequeño) se aplica la configuración.

  • Bloquear relación ancho-altura: bloquee la relación ancho-altura de los elementos de la lista cuando se redimensione el widget.
  • Alineación (disponible para listas de cuadrículas): alinee los elementos de la lista a la derecha, al centro o a la izquierda.
  • Espaciado horizontal o vertical: defina el espaciado entre elementos de la lista en píxeles. Para listas de cuadrícula, defina ambas opciones.
  • 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 o hacia la izquierda y hacia la derecha para el desplazamiento por la lista. Para Paso, defina el número de elementos o filas 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: Predeterminado (estado predeterminado para el elemento sin interacción con el usuario), Mantener el puntero (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 y haga clic en el botón del estado que desee cambiar. En el ajuste Diseño , seleccione Personalizado. Haga clic en un widget anidado, haga clic en el 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 predeterminado (sin interacción actual del usuario). 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: defina el borde de los elementos de la lista en su estado predeterminado eligiendo el color, el estilo (por ejemplo, con guiones o puntos) y el ancho en píxeles del borde.
  • Radio del borde: cambie el tamaño del radio (en píxeles o porcentaje) para dar forma a las esquinas de los elementos de la lista en su estado predeterminado. Bloquee los ajustes para sincronizar el radio de las cuatro esquinas.
  • Cursor: especifique si la apariencia de un elemento de la lista cambia cuando los usuarios 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 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 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 los usuarios 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 a buscar valores relevantes.
  • Ordenar: proporcione un menú para que los usuarios ordenen la lista mediante campos y una secuencia específicos. Escriba un nombre común para cada opción de menú.
  • Filtro: agregue filtros para que los usuarios interactúen con la lista. Al definir filtros, el widget incluye un botón de restablecimiento que restablece los filtros a sus estados originales.
  • Mostrar selección: proporcione la opción para que los usuarios actualicen la lista para visualizar únicamente los elementos seleccionados.
  • Borrar selección: proporcione la opción para que los usuarios 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.