{"id":124633,"date":"2019-06-14T19:52:46","date_gmt":"2019-06-14T17:52:46","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/exercises-data\/"},"modified":"2025-02-03T16:44:32","modified_gmt":"2025-02-03T15:44:32","slug":"exercises-data","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/ejercicios-datos","title":{"rendered":"Listas de datos"},"content":{"rendered":"<p>El widget Lista de Datos muestra los registros maestros de Datos en un formato de lista \/ tabla.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13817\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/display-data-master-records-data-list.png\" alt=\"visualizar datos registros maestros lista de datos\" width=\"755\" height=\"456\"><br \/>\nAl crear tu lista de Datos, la celda superior izquierda se mostrar\u00e1 con los nombres de tus campos maestros de Datos. Las celdas adicionales se mostrar\u00e1n con un relleno gris. Cuando simules tu prototipo, las celdas adicionales se rellenar\u00e1n con tus registros maestros de Datos.  <\/p>\n<h2><a id=\"displaying-data-master-records-in-a-data-list\"><\/a>Mostrar registros maestros de Datos en una lista de Datos<\/h2>\n<p>Aprende a mostrar registros maestros de Datos en forma de lista con una lista de Datos en tus prototipos interactivos. Hag\u00e1moslo paso a paso:<\/p>\n<ol>\n<li>En un nuevo prototipo web, crea un nuevo Maestro de datos haciendo clic en el icono \u00ab+\u00bb de la paleta Maestros de datos. En el cuadro de di\u00e1logo que aparece, dale un nombre a tu Maestro de datos. Para que coincida con nuestro ejemplo, ll\u00e1malo \u00abLista de contactos\u00bb.  <\/li>\n<li>A\u00f1ade Campos a tu Maestro de datos haciendo clic en el icono \u00ab+\u00bb de la derecha. Para que coincida con nuestro ejemplo, crea los siguientes Campos: Nombre, Correo electr\u00f3nico, Empresa e Imagen. <\/li>\n<li>Cambia el Tipo de campo de imagen a \u00abCarga de archivo\u00bb y haz clic en \u00abAceptar\u00bb.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.png\"><source src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.png\" alt=\"Crear un maestro de datos\"><\/source><\/video><\/li>\n<li>De vuelta en la paleta Maestros de datos, haz clic con el bot\u00f3n derecho en tu Maestro de datos y selecciona la pesta\u00f1a Ver y editar registros en el cuadro de di\u00e1logo que aparece. Crea Registros de datos, asignando a cada uno un nombre, un correo electr\u00f3nico, una empresa y una imagen. Haz clic en \u00abAceptar\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Add-datamaster-record.png\" alt=\"simular lista de datos\" width=\"755\" height=\"425\"><\/li>\n<li>A continuaci\u00f3n, ve a Barra de Herramientas &#8211; Icono M\u00e1s &#8211; Contenido Din\u00e1mico &#8211; haz clic en \u00abLista de Datos\u00bb.En el cuadro de di\u00e1logo que aparece, dale un nombre a tu Lista de Datos (\u00abLista de Contactos\u00bb para que coincida con nuestro ejemplo). Selecciona tu Maestro de Datos en el desplegable \u00abMaestros de Datos\u00bb.Queremos incluir todos los Campos del Maestro de Datos en la Lista de Datos. Para moverlos todos al cuadro de selecci\u00f3n, haz clic en el icono de la flecha de doble l\u00ednea a la derecha.A continuaci\u00f3n, haz clic en \u00abAceptar\u00bb y coloca tu Lista de datos en el centro del lienzo.En el lienzo, la celda superior izquierda mostrar\u00e1 los nombres de los Campos de muestra.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.png\"><source src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.png\" alt=\"A\u00f1adir campos a la lista de datos\"><\/source><\/video><\/li>\n<li>Vuelve a hacer clic en \u00abSimular\u00bb para simular tu Lista de datos con los datos reales en su lugar.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Simulate-a-data-grid.png\" alt=\"simular lista de datos\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"data-list-properties\"><\/a>Propiedades<\/h2>\n<p>Desde la paleta Propiedades, puedes modificar las siguientes propiedades de tu Lista de Datos:<\/p>\n<ul>\n<li>N\u00famero de columnas<\/li>\n<li>N\u00famero de celdas por p\u00e1gina<\/li>\n<li>Orientaci\u00f3n &#8211; gira tu Lista de Datos horizontal o verticalmente<\/li>\n<li>Espaciado &#8211; modifica el espaciado entre celdas<\/li>\n<\/ul>\n<h2><a id=\"customizing-a-data-list\"><\/a>Personalizar una lista de datos<\/h2>\n<p>Con Justinmind, puedes personalizar el aspecto de tu lista de Datos. Sigue los pasos que se indican a continuaci\u00f3n para personalizar columnas individuales de tu lista de Datos: <\/p>\n<ol>\n<li>Ve a la paleta Propiedades y cambia el n\u00famero de columnas de la lista Datos a tres.<\/li>\n<li>A continuaci\u00f3n, en la paleta Capas, selecciona la celda \u00abLista celda 1\u00bb de la lista Datos.<\/li>\n<li>En el lienzo, elimina los elementos de Texto \u00abNombre\u00bb, \u00abcorreo electr\u00f3nico\u00bb, \u00abEmpresa\u00bb e \u00abimagen\u00bb para que coincidan con nuestro ejemplo. A continuaci\u00f3n, distribuye los Campos de Texto de Entrada de la celda y cambia el tama\u00f1o de las celdas para que coincidan con nuestro ejemplo o para que lo hagas a tu gusto. <\/li>\n<li>Haz clic en \u00abSimular\u00bb para ver tu lista de Datos personalizada.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14108\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Customize-a-data-list.png\" alt=\"lista de datos personalizada\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"exercise-2-sort-columns\"><\/a>Ordenar columnas<\/h2>\n<p>Ahora aprenderemos a ordenar las columnas de una Lista de Datos de mayor a menor. Esto tambi\u00e9n funcionar\u00eda para una Lista de Datos, pero en este caso s\u00f3lo lo a\u00f1adiremos a la Lista de Datos.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-Sort-Example.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-Sort-Example.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-Sort-Example.png\" alt=\"Crear un ejemplo de columna de ordenaci\u00f3n\"><\/source><\/video><\/p>\n<ol>\n<li>En el mismo prototipo, navega hasta la pantalla \u00abPanel de control de la Lista\u00bb. Recuerda que en el \u00faltimo tutorial, decidimos no incluir el campo \u00abIngresos\u00bb en esta Lista de datos. Para este ejemplo, vamos a volver a incluirlo y a utilizarlo para ordenar los datos por ingresos. Haz clic con el bot\u00f3n derecho del rat\u00f3n en \u00abClientes\u00bb (Lista de datos) y selecciona \u00abNueva columna\u00bb.   <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/create-a-new-column.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/create-a-new-column.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/create-a-new-column.png\" alt=\"Crear una nueva columna de ordenaci\u00f3n\"><\/source><\/video>Pasa el rat\u00f3n por encima de la columna y ver\u00e1s que aparece un icono blanco en forma de \u00abflecha\u00bb. Haz clic y arrastra la columna hacia la izquierda, de forma que quede junto a la columna \u00abGestionado por\u00bb.Copia el encabezado de texto \u00abGestionado por\u00bb y p\u00e9galo en el nuevo encabezado de columna, cambi\u00e1ndole el nombre a \u00abIngresos\u00bb.Copia el campo &#8216;[Clients .Managedby:]&#8217; de Fila_actual_1, y p\u00e9galo en la celda de la nueva columna. En la paleta Propiedades, busca el desplegable &#8216;Campo de datos&#8217; y c\u00e1mbialo por [Clients .Income]. Ahora, este campo mostrar\u00e1 los datos del campo &#8216;Ingresos&#8217; de nuestro Maestro de datos.Adem\u00e1s, coloca un elemento de texto junto a [Clients .Income] y etiqu\u00e9talo como &#8216;$&#8217;.  <\/li>\n<li>Arrastra dos iconos de \u00abflecha\u00bb a la cabecera junto a \u00abIngresos\u00bb. Los utilizaremos para ordenar los datos de mayor a menor renta. Los nuestros son de la biblioteca de widgets \u00abComponentes Web\u00bb, pero cualquier tipo de icono servir\u00e1.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16427\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/SortArrows.png\" alt=\"A\u00f1adir flechas de clasificaci\u00f3n\" width=\"1023\" height=\"701\"><\/li>\n<li>Haz clic en el icono \u00abarriba\u00bb y crea un evento \u00abAl hacer clic\u00bb + \u00abEstablecer valor\u00bb, seleccionando la Lista de Datos como destino de la acci\u00f3n. Para el valor, haz clic en el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb y en el texto \u00abA\u00f1adir expresi\u00f3n\u00bb. Ver\u00e1s que aparece el constructor de Expresiones Calculadas.  <\/li>\n<li>En el constructor, arrastra la funci\u00f3n \u00abOrdenar\u00bb al espacio abierto de la expresi\u00f3n, cambiando la direcci\u00f3n de ordenaci\u00f3n a \u00abdescendiente\u00bb. Arrastra el Maestro de Datos al primer espacio abierto de la izquierda. Arrastra el atributo \u00abIngresos\u00bb al espacio de la derecha.  <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Sort-Descendant.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Sort-Descendant.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Sort-Descendant.png\" alt=\"Ordenar expresi\u00f3n descendiente\"><\/source><\/video>Al igual que el filtro Buscar, la funci\u00f3n Ordenar tiene una estructura similar: el primer espacio define lo que vamos a ordenar, y el segundo espacio define los par\u00e1metros por los que vamos a ordenar. En este caso, vamos a ordenar por los n\u00fameros de los Ingresos. <\/li>\n<li>Repite los pasos 3 y 4 para el icono \u00ababajo\u00bb, acord\u00e1ndote de cambiar la direcci\u00f3n de ordenaci\u00f3n a \u00abAscendente\u00bb.<\/li>\n<\/ol>\n<div><strong>Nota:<\/strong> aseg\u00farate de que los n\u00fameros de los ingresos en el Maestro de datos no contienen comas, puntos ni s\u00edmbolos; la funci\u00f3n \u00abOrdenar\u00bb no es capaz de diferenciarlos.<\/div>\n<p>Puedes <a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster-search-and-sort.vp\">descargar nuestro ejemplo aqu\u00ed<\/a>.<\/p>\n<p><!-- \n\n<h2><a id=\"exercise-3-paginate-data\"><\/a>Exercise 3: Paginate data<\/h2>\n\n\nIn our last exercise, we\u2019ll learn how to paginate the Data List and Data List in our prototype.\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16431\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/PaginateExample.gif\" alt=\"Paginate data example\" width=\"800\" height=\"503\" \/>\n\n\n<ol>\n \t\n\n<li>Still on the List Dashboard screen, select the Data List. Look to the Properties palette and change the number of Rows per page to 10.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16432\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows.png\" alt=\"Change data list rows\" width=\"936\" height=\"526\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows.png 936w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows-300x169.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows-768x432.png 768w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/li>\n\n\n \t\n\n<li>Drag an Index widget from the Dynamic Content section of the widgets palette to the Canvas below the Data List. In the Properties palette, choose \u2018Client List\u2019 from the \u2018Data List\u2019 dropdown. We\u2019ll use this element to show what page of the Data List records we\u2019re on.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16433\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/IndexWidget.png\" alt=\"Add index widget\" width=\"903\" height=\"473\" \/><\/li>\n\n\n \t\n\n<li>Place two \u2018arrow\u2019 icons next to the Index element. We\u2019ll use these to switch between the pages in the Data List.<\/li>\n\n\n \t\n\n<li>Select the right facing arrow and create an \u201cOn Click\u201d + \u201cPaginate Data List\u201d event, selecting the Data List as the target of the action. For the pagination, select \u2018Next Page\u2019.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16435\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage.png\" alt=\"Next page event\" width=\"792\" height=\"538\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage.png 792w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage-300x204.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage-768x522.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/li>\n\n\n \t\n\n<li>Select the left facing arrow and create an \u201cOn Click\u201d + \u201cPaginate Data List\u201d event, selecting the Data List as the target of the action. For the pagination, select \u2018Previous Page\u2019.<\/li>\n\n\n \t\n\n<li>Repeat these steps on the Card Dashboard screen.<\/li>\n\n\n<\/ol>\n\n\nYou can <a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster-search-and-sort.vp\">download our example here<\/a>.\n\n--><\/p>\n<h2><a id=\"filter\"><\/a>Filtrar filas<\/h2>\n<p><span style=\"font-weight: 400;\">En este ejemplo, aprender\u00e1s a utilizar la funci\u00f3n filtro para filtrar los valores de una lista de datos utilizando una lista de selecci\u00f3n en la cabecera.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73228195\/index.html\" width=\"820px\" height=\"420px\" frameborder=\"0\"><\/iframe><\/p>\n<p>As\u00ed es como se construye:<\/p>\n<h3><strong>Ver<\/strong><\/h3>\n<ul>\n<li>Ve a la paleta \u00abMaestros de datos\u00bb y crea un nuevo \u00abMaestro de datos\u00bb, ll\u00e1malo \u00abCoches\u00bb, crea atributos de \u00e1rbol: \u00abFabricante\u00bb, \u00abA\u00f1o\u00bb y \u00abColor\u00bb, y pulsa \u00abAceptar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-1.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li>Haz clic con el bot\u00f3n derecho del rat\u00f3n en el \u00abMaestro de datos\u00bb que acabas de crear y selecciona \u00abVer y editar registros\u00bb, escribe all\u00ed tus coches de ejemplo y pulsa \u00abAceptar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-2.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li>Selecciona \u00abLista de datos\u00bb de la secci\u00f3n \u00abContenido din\u00e1mico\u00bb y col\u00f3cala en el lienzo; se habilitar\u00e1 la ventana \u00abNueva lista de datos\u00bb; dale un nombre a tu lista, a continuaci\u00f3n elige el \u00abMaestro de datos\u00bb que has creado antes y selecciona todos los atributos.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.png\" alt=\"Crear una lista de datos\">Crear una lista de datos<\/source><\/video><\/li>\n<\/ul>\n<ul>\n<li>Coloca una \u00abSelecci\u00f3n\u00bb de la secci\u00f3n \u00abCampos de entrada interactivos\u00bb dentro de la cabecera de la columna que quieras filtrar; pulsa Comando (Mac) o Control (Windows) mientras arrastras el elemento hacia dentro.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.png\" alt=\"Insertar una selecci\u00f3n\">Insertar una selecci\u00f3n<\/source><\/video><\/li>\n<li>Haz clic en \u00abSeleccionar\u00bb y edita los valores de la paleta Propiedades para que coincidan con la opci\u00f3n que tienes en tu columna.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-5.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<\/ul>\n<h3><strong>Eventos<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Con la opci\u00f3n \u00abSeleccionar\u00bb seleccionada, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-6.png\" alt=\"\" width=\"794\" height=\"340\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Haz clic en \u00abElegir activador\u00bb en el cuadro de di\u00e1logo y selecciona \u00aben Cambiar\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb y haz clic en la \u00abLista de datos\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Selecciona el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb para el valor y haz clic en \u00abA\u00f1adir expresi\u00f3n\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-7.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">En el primer campo del constructor de expresiones de valor, arrastra la funci\u00f3n \u00abFiltrar\u00bb, y selecciona tu \u00abMaestro de datos\u00bb de la pesta\u00f1a Maestros de datos para el segundo campo. A continuaci\u00f3n, arrastra la funci\u00f3n \u00abTiene\u00bb y elige el \u00e1rea que vas a filtrar en la pesta\u00f1a Maestros de datos; despu\u00e9s, arrastra la funci\u00f3n \u00abSeleccionar\u00bb y col\u00f3cala en el \u00faltimo campo. Haz clic en \u00abAceptar\u00bb y \u00abOk\u00bb para terminar de crear tu evento.  <\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767991222\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<div> <strong> Nota: <\/strong>Puedes repetir las acciones para cada columna que quieras filtrar.<\/div>\n<p><span style=\"font-weight: 400;\">Simula tu prototipo.<\/span><\/p>\n<h2><a id=\"select-rows\"><\/a>Seleccionar filas<\/h2>\n<p>En este ejemplo, aprender\u00e1s a crear una lista de datos en la que puedes cambiar el color de la fila para darle un efecto de selecci\u00f3n.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73208725\/index.html\" width=\"820px\" height=\"320px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">C\u00f3mo construirlo:<\/span><\/p>\n<h3><strong>Ver<\/strong><\/h3>\n<ul>\n<li>Ve a la paleta \u00abDatos maestros\u00bb y crea un nuevo \u00abDatos maestros\u00bb, ll\u00e1malo \u00abPrueba\u00bb y crea tres atributos: \u00abColumna A\u00bb, \u00abColumna B\u00bb y \u00abColumna C\u00bb, y pulsa \u00abAceptar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44165\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-1.png\" alt=\"A\u00f1adir campos a la lista de datos\" width=\"600\" height=\"349\"><\/li>\n<li>Haz clic con el bot\u00f3n derecho del rat\u00f3n en el \u00abMaestro de datos\u00bb que acabas de crear y selecciona \u00abVer y editar registros\u00bb, escribe all\u00ed tus datos de ejemplo y pulsa \u00abAceptar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44165\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-2.png\" alt=\"A\u00f1adir campos a la lista de datos\" width=\"600\" height=\"349\"><\/li>\n<li>Selecciona \u00abLista de datos\u00bb de la secci\u00f3n \u00abContenido din\u00e1mico\u00bb y col\u00f3cala en el lienzo; se habilitar\u00e1 la ventana \u00abNueva lista de datos\u00bb; dale un nombre a tu lista, a continuaci\u00f3n elige el \u00abMaestro de datos\u00bb que has creado antes y selecciona todos los atributos.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-3.png\" alt=\"Crear una lista de datos\">Crear una lista de datos<\/source><\/video><\/li>\n<\/ul>\n<h3><strong>Eventos<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Coloca el cursor del rat\u00f3n a la izquierda de la fila hasta que se convierta en una flecha apuntando a la derecha y haz clic para seleccionar toda la fila, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.&nbsp;<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abCambiar estilo\u00bb y haz clic en la \u00abLista de datos\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Elige el color de fondo par e impar por defecto. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767361891\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Ve de nuevo a la paleta Eventos y haz clic en el signo \u00ab+\u00bb para a\u00f1adir un nuevo evento.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abCambiar estilo\u00bb y selecciona la fila actual en la \u00abLista de datos\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Elige un color de fondo de estilo y establece el color azul.  <\/span>Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767361928\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Simula tu prototipo.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El widget Lista de Datos muestra los registros maestros de Datos en un formato de lista \/ tabla. Al crear tu lista de Datos, la celda&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8422],"tags":[],"class_list":["post-124633","post","type-post","status-publish","format-standard","hentry","category-formacion","category-formularios-y-datos"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124633"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124633"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124633\/revisions"}],"predecessor-version":[{"id":126162,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124633\/revisions\/126162"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}