{"id":124631,"date":"2018-03-08T15:32:14","date_gmt":"2018-03-08T14:32:14","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/prototyping-forms-data-lists-and-data-grids\/"},"modified":"2025-02-03T16:43:49","modified_gmt":"2025-02-03T15:43:49","slug":"prototyping-forms-data-lists-and-data-grids","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/prototipos-formularios-listas-de-datos-y-rejillas-de-datos","title":{"rendered":"Visualizaci\u00f3n de datos"},"content":{"rendered":"<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781862975\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Imagina que est\u00e1s creando el prototipo de una aplicaci\u00f3n para gestionar los clientes de tu empresa. Como tu empresa tiene muchos clientes, necesitar\u00e1s alguna forma de mostrarlos en bloque, posiblemente en forma de tarjetas o tablas. Tambi\u00e9n necesitar\u00e1s una forma de editar o eliminar clientes individuales de la lista y que esos cambios se mantengan en las distintas pantallas de tu prototipo. Aunque una tabla de texto normal podr\u00eda funcionar, no es muy din\u00e1mica, y es dif\u00edcil de mantener si tus datos cambian con el tiempo. \u00bfC\u00f3mo prototipar\u00edas esto? En Justinmind, lo que buscas son Maestros de datos. Un Maestro de datos es una lista de informaci\u00f3n, similar a una base de datos o una hoja de c\u00e1lculo. Los datos pueden ser texto o im\u00e1genes, y constar de campos (t\u00edtulos de columnas) y registros (filas). Sigue este art\u00edculo para aprender a utilizar datos en tus prototipos:    <\/p>\n<h2><a id=\"create-data-master\"><\/a>Crear un maestro de datos<\/h2>\n<p>Utilizar\u00e1s un Maestro de datos para almacenar la informaci\u00f3n de tus clientes. Aqu\u00ed te explicamos c\u00f3mo crear uno: <\/p>\n<ol>\n<li>Busca la paleta Maestros de datos en Justinmind. Si no la ves, ve al men\u00fa Ventana y marca Maestros de Datos para que se muestre. <\/li>\n<li>Haz clic en el bot\u00f3n \u00ab+\u00bb de la paleta para crear un nuevo Maestro de Datos. Esto es lo que debes hacer a continuaci\u00f3n:\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/450266217\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Escribe un nombre para el Maestro de Datos. En este ejemplo, ll\u00e1malo \u00abClientes\u00bb. <\/li>\n<li><strong>b.<\/strong>  Pulsa el bot\u00f3n \u00ab+\u00bb para a\u00f1adir un campo. Un campo es el nombre de una columna de datos. Crea cuatro campos: \u00abNombre\u00bb, \u00abIngresos\u00bb, \u00abContacto\u00bb y \u00abGestionado por:\u00bb.  <\/li>\n<li><strong>c.<\/strong>  Selecciona el tipo de datos que vas a a\u00f1adir. En este ejemplo s\u00f3lo vas a a\u00f1adir texto, as\u00ed que deja el tipo como \u00abtexto\u00bb. <\/li>\n<li><strong>d.<\/strong>  Haz clic en \u00abAceptar\u00bb para guardar tu Maestro de datos.<\/li>\n<\/ul>\n<\/li>\n<li>Vuelve a la paleta Maestros de Datos y haz clic con el bot\u00f3n derecho del rat\u00f3n en el Maestro de Datos que acabas de crear. Ver\u00e1s una nueva pesta\u00f1a \u00abVer y editar registros\u00bb. <\/li>\n<li>Encontrar\u00e1s \u00abTexto de ejemplo\u00bb escrito en cada registro. Haz clic en un registro para editarlo y escribir alguna informaci\u00f3n o dato. <\/li>\n<li>Haz clic en el bot\u00f3n \u00ab+\u00bb para a\u00f1adir m\u00e1s registros.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44150\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-record.png\" alt=\"Bot\u00f3n m\u00e1s al pasar el rat\u00f3n por encima para a\u00f1adir un nuevo registro\" width=\"1067\" height=\"880\"><br \/>\n Para eliminar un registro, selecci\u00f3nalo haciendo clic en la casilla situada junto a \u00e9l y luego haz clic en el bot\u00f3n \u00abEliminar\u00bb.<\/li>\n<\/ol>\n<h3>Importar datos<\/h3>\n<p>Tambi\u00e9n puedes crear un nuevo Maestro de Datos directamente desde un archivo .csv: Ve a la paleta Maestros de datos y haz clic en el bot\u00f3n \u00abImportar\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44152\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Import-data-csv.png\" alt=\"Bot\u00f3n Importar resaltado\" width=\"828\" height=\"394\"><br \/>\nVer\u00e1s un nuevo cuadro de di\u00e1logo en el que puedes nombrar tu maestro de datos, seleccionar el archivo .csv y elegir un delimitador de campos.<\/p>\n<div><strong>Nota:<\/strong> la primera fila de tu archivo .csv se utilizar\u00e1 como nombre de los campos.<\/div>\n<h2><a id=\"display-data\"><\/a>Mostrar datos<\/h2>\n<p>Ahora que has introducido toda la informaci\u00f3n de tus clientes en un Maestro de Datos, es hora de mostrar los datos en el Lienzo. En este ejemplo, aprender\u00e1s a mostrar la informaci\u00f3n de dos formas: en forma de tarjeta con m\u00e1s detalles y en una lista compacta con menos detalles. <\/p>\n<h3>Cuadr\u00edculas de datos<\/h3>\n<p>Empezar\u00e1s creando un expositor de tarjetas:<\/p>\n<ol>\n<li>Ve al desplegable Barra de herramientas y busca la secci\u00f3n \u00abContenido din\u00e1mico\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44154\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-grid.png\" alt=\"Cuadr\u00edcula de datos en la barra de herramientas\" width=\"661\" height=\"414\"><\/li>\n<li>Haz clic en el widget Rejilla de datos y ver\u00e1s una nueva ventana emergente:\n<ul class=\"hidden-bullet\">\n<li><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\/08\/Add-fields-to-data-grid.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-fields-to-data-grid.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-fields-to-data-grid.png\" alt=\"A\u00f1ade un nombre a la cuadr\u00edcula de datos y mueve los campos para rellenarla\"><\/source><\/video><\/li>\n<li><strong>a.<\/strong>  Dale un nombre a tu cuadr\u00edcula de datos. Para que coincida con el ejemplo, n\u00f3mbrala \u00abTarjetaCliente\u00bb. <\/li>\n<li><strong>b.<\/strong>  Selecciona el Maestro de Datos \u00abClientes\u00bb que creaste anteriormente para rellenar la rejilla de datos.<\/li>\n<li><strong>c.<\/strong> Como querr\u00e1s que la visualizaci\u00f3n de esta tarjeta tenga m\u00e1s detalles, incluir\u00e1s todos los campos en la cuadr\u00edcula de datos.Haz clic en el bot\u00f3n &#8216;&gt;&gt;&#8217; para mover todos los campos a la cuadr\u00edcula de datos.<\/li>\n<li>Haz clic en \u00abAceptar\u00bb y coloca la cuadr\u00edcula de datos en el lienzo.<\/li>\n<\/ul>\n<\/li>\n<li>Echa un vistazo m\u00e1s de cerca a la cuadr\u00edcula de datos. Lo ver\u00e1s:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44157\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-grid-contents.png\" alt=\"Contenido de la cuadr\u00edcula de datos ampliado\" width=\"739\" height=\"542\"><\/p>\n<ol class=\"image-bullet\">\n<li>Los campos que has nombrado antes. Son elementos de texto normales.<\/li>\n<li>Los registros del Maestro de Datos. Aparecer\u00e1n entre par\u00e9ntesis y mostrar\u00e1n datos durante la simulaci\u00f3n. <\/li>\n<\/ol>\n<p>Despliega el contenido de la Cuadr\u00edcula de datos en la paleta Capas, y ver\u00e1s algo llamado \u00abCelda de cuadr\u00edcula\u00bb. La celda de cuadr\u00edcula sirve como vista previa del aspecto que tendr\u00e1n todas las celdas de la cuadr\u00edcula de datos, y cualquier cambio o modificaci\u00f3n que hagas en esta celda aparecer\u00e1 tambi\u00e9n en todas las dem\u00e1s. Haz clic en el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo y ver c\u00f3mo tu cuadr\u00edcula de datos muestra todos los datos que has introducido en el Maestro de datos. <\/p>\n<p><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\/08\/Simulate-data-grid.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Simulate-data-grid.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Simulate-data-grid.png\" alt=\"Simulaci\u00f3n de una red de datos\"><\/source><\/video><\/li>\n<li>Ahora que sabes c\u00f3mo se estructura una rejilla de datos, puedes personalizar su aspecto:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Pulsa la tecla <kbd>A<\/kbd> para activar la herramienta Selecci\u00f3n Directa, que te permitir\u00e1 seleccionar f\u00e1cilmente elementos dentro de la rejilla de datos.<\/li>\n<li><strong>a.<\/strong>  Selecciona los elementos de texto \u00abNombre\u00bb, \u00abIngresos\u00bb y \u00abContacto\u00bb, y elim\u00ednalos.<\/li>\n<li><strong>b.<\/strong>  Ahora que tienes m\u00e1s espacio en la celda, mueve los elementos de texto y los campos de datos restantes dentro de la celda como quieras.<\/li>\n<li><strong>c.<\/strong> Vuelve al modo de selecci\u00f3n normal pulsando <kbd>V<\/kbd>.Con la celda de la cuadr\u00edcula a\u00fan seleccionada, utiliza los indicadores para redimensionar la celda de modo que sea m\u00e1s ancha y m\u00e1s larga.<\/li>\n<li><strong>d.<\/strong> Coloca dos elementos del Bot\u00f3n <kbd>B<\/kbd> en la celda de la cuadr\u00edcula, nombr\u00e1ndolos \u00abEditar\u00bb y \u00abEliminar\u00bb. Puedes mantener pulsado <kbd>Comando<\/kbd> (en Mac) o <kbd>Control<\/kbd> (en Windows) para arrastrarlos dentro.Los utilizar\u00e1s m\u00e1s adelante para modificar y eliminar clientes del Maestro de Datos. <\/li>\n<li><strong>e.<\/strong>  Selecciona toda la cuadr\u00edcula de datos y ve a la paleta Propiedades. Cambia el n\u00famero de columnas a 3 y aumenta el espaciado vertical y horizontal entre celdas. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Puedes personalizar a\u00fan m\u00e1s la cuadr\u00edcula de datos como desees. Para que coincida con el ejemplo, tambi\u00e9n puedes cambiar la familia, el tama\u00f1o y el color de la fuente, as\u00ed como los estilos de los botones. \u00c9ste es el aspecto del panel de control de la Tarjeta Cliente cuando se simula: <\/p>\n<p><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\/08\/Data-grid-preview.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Data-grid-preview.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Data-grid-preview.png\" alt=\"La vista de simulaci\u00f3n de la rejilla de datos\"><\/source><\/video><\/p>\n<h3>Listas de datos<\/h3>\n<p>Ahora crear\u00e1s una lista compacta de informaci\u00f3n de clientes en forma de lista de Datos:<\/p>\n<ol>\n<li>Busca en la paleta Pantallas y haz clic en el bot\u00f3n \u00ab+\u00bb para a\u00f1adir una nueva pantalla. N\u00f3mbrala \u00abPantalla 2\u00bb.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44163\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-screen-data.png\" alt=\"A\u00f1adir una nueva pantalla resaltada\" width=\"1181\" height=\"752\"><\/li>\n<li>Ve al desplegable Barra de herramientas y busca la secci\u00f3n \u00abContenido din\u00e1mico\u00bb.<\/li>\n<li>Haz clic en el widget Lista de datos y ver\u00e1s una ventana emergente:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  Nombra la lista de datos \u00abListaClientes\u00bb.<\/li>\n<li><strong>b.<\/strong>  Selecciona el Maestro de Datos \u00abClientes\u00bb para rellenar la lista de datos.<\/li>\n<li><strong>c.<\/strong>  Como querr\u00e1s que la visualizaci\u00f3n de esta tarjeta tenga menos detalles, incluye s\u00f3lo algunos de los campos de la lista de datos.<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\/08\/Create-data-list.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Create-data-list.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Create-data-list.png\" alt=\"A\u00f1adir campos a la lista de datos\"><\/source><\/video>Haz clic en los campos individuales y pulsa el bot\u00f3n &#8216;&gt;&#8217; para moverlos a la lista de datos. Para que coincida con el ejemplo, omite el campo \u00abIngresos\u00bb. <\/li>\n<li><strong>d.<\/strong>  Haz clic en \u00abAceptar\u00bb y coloca la lista de datos en el lienzo.<\/li>\n<\/ul>\n<\/li>\n<li>Echa un vistazo m\u00e1s de cerca a la lista de datos. Ver\u00e1s<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44168\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-list-contents.png\" alt=\"Capas de la lista de datos\" width=\"885\" height=\"606\"><\/p>\n<ol class=\"image-bullet\">\n<li>Los campos que has nombrado antes.<\/li>\n<li>Los registros del Maestro de Datos. Aparecer\u00e1n entre par\u00e9ntesis y mostrar\u00e1n datos durante la simulaci\u00f3n. <\/li>\n<\/ol>\n<p>Despliega el contenido de la lista de datos en la paleta Capas, y ver\u00e1s algo llamado \u00abFila actual\u00bb. Al igual que la celda de la cuadr\u00edcula de datos, la fila actual sirve como vista previa del aspecto que tendr\u00e1n todas las celdas de la lista de datos, y cualquier cambio o modificaci\u00f3n que hagas en esta celda aparecer\u00e1 tambi\u00e9n en todas las dem\u00e1s. <\/li>\n<li>Haz clic en \u00abSimular\u00bb y comprueba c\u00f3mo queda tu lista de datos.<\/li>\n<li>Ahora que sabes c\u00f3mo se estructura una lista de datos, puedes personalizar su aspecto:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  Selecciona \u00abEncabezado\u00bb (el encabezado de la lista de datos) y ve a la paleta Propiedades. All\u00ed, cambia el \u00abDise\u00f1o\u00bb a horizontal con alineaci\u00f3n centrada.<br \/>\nSelecciona la fila actual y utiliza los indicadores que aparecen para arrastrar hacia abajo, lo que aumentar\u00e1 el tama\u00f1o de las filas de la lista de datos. Cambia el &#8216;Dise\u00f1o&#8217; a horizontal con alineaci\u00f3n centrada.  <\/li>\n<li><strong>b.<\/strong>  Selecciona toda la lista de datos y ve a la paleta Propiedades. Cambia los colores de las filas Par\/Impar a transparente. <\/li>\n<li><strong>c.<\/strong>  Haz clic con el bot\u00f3n derecho del rat\u00f3n en la lista de datos y selecciona \u00abNueva columna\u00bb.<\/li>\n<li><strong>d.<\/strong> Utiliza la herramienta Selecci\u00f3n Directa <kbd>A<\/kbd> para colocar dos <kbd>Elementos de<\/kbd>Texto dentro de la celda de la fila, etiquetando uno como \u00abEditar\u00bb y el otro como \u00abBorrar\u00bb. Los utilizar\u00e1s m\u00e1s adelante para modificar y eliminar clientes del Maestro de Datos. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Puedes personalizar a\u00fan m\u00e1s la lista de datos como desees. Para que coincida con el ejemplo, tambi\u00e9n puedes cambiar la familia de fuentes, el tama\u00f1o y el color del texto, y eliminar algunos de los bordes. \u00c9ste es el aspecto del panel de control de la Lista de clientes cuando simulas: <\/p>\n<p><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\/2023\/01\/Data-list-preview.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2023\/01\/Data-list-preview.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2023\/01\/Data-list-preview.png\" alt=\"La vista de simulaci\u00f3n de la rejilla de datos\"><\/source><\/video><\/p>\n<h2><a id=\"modify-data\"><\/a>Modificar datos<\/h2>\n<p>Hasta ahora, has creado y personalizado el aspecto de la informaci\u00f3n de los clientes de varias formas. Ahora aprender\u00e1s a a\u00f1adir, editar y eliminar registros de estas listas. <\/p>\n<ol>\n<li>Primero tendr\u00e1s que crear una nueva pantalla. N\u00f3mbrala \u00abEditar tarjeta\u00bb: en esta pantalla editar\u00e1s la informaci\u00f3n de un cliente seleccionado. <\/li>\n<li>Arrastra cuatro Campos de Texto de Entrada <kbd>F<\/kbd> al Lienzo. A\u00f1ade un bot\u00f3n debajo del formulario y ren\u00f3mbralo \u00abModificar\u00bb. A\u00f1ade otro bot\u00f3n a su lado y ren\u00f3mbralo \u00abCancelar\u00bb. Personaliza la apariencia del formulario como desees.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44174\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Modify-form.png\" alt=\"El formulario de modificaci\u00f3n con cuatro campos de texto de entrada y dos botones\" width=\"1020\" height=\"682\"><\/li>\n<li>Haz clic con el bot\u00f3n derecho del rat\u00f3n en esta pantalla de la paleta Pantallas y haz clic en \u00abDuplicar\u00bb. Nombra esta pantalla \u00abNueva tarjeta\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44176\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Duplicate-screen.png\" alt=\"Haz clic con el bot\u00f3n derecho en una pantalla para ver las opciones para duplicarla\" width=\"1072\" height=\"746\">  Mant\u00e9n todo en esta pantalla igual, pero cambia el bot\u00f3n para que diga \u00abA\u00f1adir\u00bb en lugar de \u00abModificar\u00bb.<\/li>\n<\/ol>\n<h3>A\u00f1adir nuevos registros de clientes<\/h3>\n<p>En esta secci\u00f3n aprender\u00e1s a a\u00f1adir nuevos registros a un maestro de datos.<\/p>\n<ol>\n<li>Ve a la pantalla del Panel de control de la tarjeta y coloca un elemento bot\u00f3n en el Lienzo, d\u00e1ndole el nombre de \u00abNuevo\u00bb.<\/li>\n<li>Con ese bot\u00f3n seleccionado, crea un evento <strong>Al hacer clic<\/strong> + <strong>Navegar a<\/strong>, enlazando con la pantalla \u00abNuevo cliente\u00bb que creaste antes.<\/li>\n<li>Ve a la pantalla Nuevo Cliente y selecciona el bot\u00f3n \u00abA\u00f1adir\u00bb. Crea un evento <strong>Al hacer clic<\/strong> + <strong>Acci\u00f3n del Maestro de<\/strong> Datos. Haz clic en el bot\u00f3n \u00abNuevo\u00bb y ver\u00e1s que aparece el constructor de Expresiones de Valor.\u00c9sta es la estructura del evento Acci\u00f3n Maestra de Datos &#8211; Nuevo:  <\/li>\n<\/ol>\n<ul>\n<li>Cada \u00abCampo\u00bb del Maestro de datos.<\/li>\n<li>Los valores que se a\u00f1adir\u00e1n al Maestro de datos y se reflejar\u00e1n en la lista de datos y en la rejilla de datos.<\/li>\n<li>Arrastra cada campo de texto de entrada correspondiente a los espacios abiertos en la expresi\u00f3n y haz clic en \u00abAceptar\u00bb.<\/li>\n<\/ul>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/744897674?h=a679248f19\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ul>\n<li>Con el bot\u00f3n \u00abA\u00f1adir\u00bb a\u00fan seleccionado, crea un evento <strong>Al hacer clic<\/strong> + <strong>Navegar a<\/strong>, seleccionando el bot\u00f3n de opci\u00f3n \u00abPantalla anterior\u00bb como destino del enlace.<\/li>\n<li>Selecciona el bot\u00f3n \u00abCancelar\u00bb y crea el mismo evento que en el \u00faltimo paso.<\/li>\n<li>Ve a la pantalla del Panel de control de la Lista y coloca un bot\u00f3n en el Lienzo, etiqu\u00e9talo como \u00abNuevo\u00bb. Crea un evento <strong>Al hacer clic<\/strong> + <strong>Navegar a<\/strong> para este bot\u00f3n, que enlace con la pantalla \u00abNuevo cliente\u00bb. <\/li>\n<\/ul>\n<p>Ahora ambas pantallas deber\u00edan estar enlazadas para que puedas a\u00f1adir nueva informaci\u00f3n al maestro de datos. Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo. Toca el bot\u00f3n \u00abNuevo\u00bb, que te enlazar\u00e1 con la pantalla Nuevo cliente. Introduce alguna informaci\u00f3n en el formulario y toca \u00abA\u00f1adir\u00bb. Ver\u00e1s que se a\u00f1ade un nuevo registro a la ficha.    <\/p>\n<h2>Modificar registros de clientes<\/h2>\n<p>Para editar los registros de los clientes, necesitar\u00e1s alguna forma de seleccionar una fila concreta para modificarla. Utilizar\u00e1s la funcionalidad especial de \u00abFila actual\u00bb (en las listas de datos) y \u00abCelda de cuadr\u00edcula\u00bb (en las cuadr\u00edculas de datos) para seleccionar una fila: son capaces de detectar la fila con la que interact\u00faas durante la simulaci\u00f3n. Tras seleccionar una fila, necesitas almacenar la informaci\u00f3n de esa fila en alg\u00fan lugar para poder colocarla en un campo de texto de entrada para editarla. En este ejemplo, utilizar\u00e1s una Variable, que puede almacenar filas enteras de informaci\u00f3n del cliente a la vez. <\/p>\n<ol>\n<li>Ve a la paleta Variables y crea una variable llamada \u00abFilaSeleccionada\u00bb con un valor por defecto en blanco.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44191\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-variable-data.png\" alt=\"Variable a\u00f1adida en la paleta de variables\" width=\"1353\" height=\"575\">  Si no ves la paleta Variables, aseg\u00farate de que est\u00e1 marcada para que sea visible en el men\u00fa Ventana.<\/li>\n<li>Ve a la pantalla del panel de control de la tarjeta y selecciona el bot\u00f3n \u00abEditar\u00bb que colocaste antes en la celda de la cuadr\u00edcula.<\/li>\n<li>Crea un evento <strong>On Click<\/strong> + <strong>Set Value<\/strong>, seleccionando la variable SelectedRow como destino de la acci\u00f3n.Para el valor, haz clic en &#8216;Calculado&#8217; y en el enlace de texto &#8216;A\u00f1adir expresi\u00f3n&#8217;.<\/li>\n<li>Ver\u00e1s que aparece el constructor de Expresiones de Valor. Arrastra la celda de la cuadr\u00edcula al espacio abierto en la expresi\u00f3n. Puede que te resulte m\u00e1s f\u00e1cil seleccionarla y arrastrarla desde las capas del constructor que desde la vista previa del Lienzo. Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n.Este evento transferir\u00e1 los valores de la tarjeta que acabas de pulsar a la variable.   <\/li>\n<li>Vuelve a la paleta Eventos para ver el evento que acabas de crear. A\u00f1ade un evento <strong>Al hacer clic<\/strong> + <strong>Navegar a<\/strong> para el bot\u00f3n \u00abEditar\u00bb, que enlace con la pantalla \u00abEditar cliente\u00bb. <\/li>\n<li>Ve a la pantalla Editar Cliente. Haz doble clic en el Lienzo para seleccionar la pantalla base. <\/li>\n<li>Crea un evento <strong>En carga de p\u00e1gina<\/strong> + <strong>Establecer valor<\/strong>, seleccionando el campo de texto de entrada \u00abNombre\u00bb como objetivo de la acci\u00f3n. Para el valor, haz clic en \u00abCalculado\u00bb y, a continuaci\u00f3n, en \u00abA\u00f1adir expresi\u00f3n\u00bb. Ver\u00e1s que aparece el constructor de Expresiones de Valor. Para construir la expresi\u00f3n   <\/li>\n<\/ol>\n<ul>\n<li>Arrastra la funci\u00f3n <strong>Seleccionar<\/strong> al espacio abierto en la expresi\u00f3n.<\/li>\n<li>Ver\u00e1s que aparecen dos nuevos espacios en la expresi\u00f3n. Arrastra la \u00abFilaSeleccionada\u00bb al espacio de la izquierda. <\/li>\n<li>Haz clic en la pesta\u00f1a Maestros de Datos del constructor y expande el Maestro de Datos para que puedas ver los atributos (los campos del Maestro de Datos).Arrastra el atributo \u00abNombre\u00bb al segundo espacio de la expresi\u00f3n.<\/li>\n<\/ul>\n<p>Repite los pasos 6 y 7 para los otros campos de texto de entrada, asegur\u00e1ndote de cambiar cada vez el objetivo de la acci\u00f3n y el atributo en la expresi\u00f3n.<\/p>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/744901851?h=3736e734a9\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Ahora crear\u00e1s los eventos para modificar la informaci\u00f3n del cliente. Selecciona el bot\u00f3n \u00abModificar\u00bb en la parte inferior del formulario y crea un evento <strong>Al hacer clic<\/strong> + <strong>Acci\u00f3n del Maestro de Datos<\/strong> &#8211; <strong>Modificar<\/strong>. Esto abrir\u00e1 el constructor de Expresiones de Valor.As\u00ed es como funciona este evento:\n<ul class=\"hidden-bullet\">\n<li>El espacio abierto donde definir\u00e1s la fila que se modificar\u00e1.<\/li>\n<li>Los espacios abiertos donde especificar\u00e1s la informaci\u00f3n que se modificar\u00e1 en el Maestro de Datos.<\/li>\n<\/ul>\n<\/li>\n<li>Coloca la variable FilaSeleccionada en el primer espacio abierto de la izquierda. Arrastra los campos de texto de entrada correspondientes a los espacios abiertos de la expresi\u00f3n y pulsa \u00abAceptar\u00bb para terminar de construir el evento. <\/li>\n<li>De nuevo en el Lienzo, y con el bot\u00f3n \u00abModificar\u00bb a\u00fan seleccionado, crea un evento <strong>Al hacer clic<\/strong> + <strong>Navegar a<\/strong>, seleccionando el bot\u00f3n de opci\u00f3n \u00abPantalla anterior\u00bb.<\/li>\n<li>Selecciona el bot\u00f3n \u00abCancelar\u00bb y crea un evento <strong>\u00abAl hacer clic<\/strong> + <strong>Navegar a\u00bb<\/strong>, seleccionando el bot\u00f3n de opci\u00f3n \u00abPantalla anterior\u00bb.<\/li>\n<li>Repite los pasos 2 &#8211; 5 en la pantalla del Panel de control de la lista, arrastrando la fila actual al espacio abierto de la expresi\u00f3n cuando est\u00e9s estableciendo el valor de la variable SelectedRow.<\/li>\n<\/ol>\n<p>Haz clic en el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo. Haz clic en el bot\u00f3n \u00abModificar\u00bb de una de las filas, que te llevar\u00e1 a la pantalla \u00abModificar cliente\u00bb. Introduce algunos datos en el formulario y haz clic en \u00abModificar\u00bb. Ver\u00e1s la informaci\u00f3n editada del cliente en la ficha.   <\/p>\n<h2><a id=\"delete-records\"><\/a>Borrar datos<\/h2>\n<p>A continuaci\u00f3n, aprender\u00e1s a eliminar registros de clientes.<\/p>\n<ol>\n<li>Ve a la pantalla del panel de control de la tarjeta. Selecciona el bot\u00f3n \u00abEliminar\u00bb que a\u00f1adiste antes en la celda de la cuadr\u00edcula.Crea un evento <strong>Al hacer clic<\/strong> + <strong>Acci\u00f3n del Maestro de Datos<\/strong> &#8211; <strong>Eliminar<\/strong>. Ver\u00e1s que aparece el constructor de Expresiones de Valor.  <\/li>\n<li>F\u00edjate bien en la expresi\u00f3n y ver\u00e1s un espacio abierto. Aqu\u00ed es donde especificar\u00e1s la fila que se eliminar\u00e1 del Maestro de Datos.Arrastra la celda de la cuadr\u00edcula al espacio abierto de la expresi\u00f3n. Puede que te resulte m\u00e1s f\u00e1cil seleccionarla desde las capas del di\u00e1logo.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44182\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Delete-action-1.png\" alt=\"Celda de la cuadr\u00edcula en la expresi\u00f3n\" width=\"1089\" height=\"574\"><br \/>\nDebido a la funcionalidad especial de la celda de la cuadr\u00edcula (y de la fila actual), la <strong>Acci\u00f3n Maestro de Datos<\/strong> s\u00f3lo eliminar\u00e1 la fila en la que hagas clic en el bot\u00f3n \u00abEliminar\u00bb.<\/li>\n<li>Repite los pasos 1 y 2 en la pantalla del Panel de control de la lista, arrastrando esta vez la fila actual de la lista de datos al espacio abierto de la expresi\u00f3n.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44184\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Delete-action-list.png\" alt=\"Fila actual en la expresi\u00f3n\" width=\"1086\" height=\"499\"><\/li>\n<\/ol>\n<h3>\u00daltimos pasos<\/h3>\n<p>\u00a1Ya casi has terminado! S\u00f3lo necesitas alguna forma de cambiar entre las pantallas del Panel de control de Tarjetas y de Listas para poder ver c\u00f3mo se mantienen tus cambios en las distintas pantallas. <\/p>\n<ol>\n<li>Coloca dos Im\u00e1genes <kbd>I<\/kbd> en la pantalla Panel de control de tarjetas. Una representar\u00e1 la pantalla Panel de control de tarjetas, y la otra la pantalla Panel de control de listas. <\/li>\n<li>Crea un evento <strong>Al hacer clic<\/strong> + <strong>Navegar a<\/strong> en la imagen para el Panel de control de la lista y enlaza con la pantalla del Panel de control de la lista.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44187\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Link-image-dashboard.png\" alt=\"Enlace al panel de control de la lista\" width=\"776\" height=\"308\"><\/li>\n<li>Repite los pasos anteriores en la pantalla del Panel de Control de la Lista, vinculando la imagen del Panel de Control de la Tarjeta a la pantalla del Panel de Control de la Tarjeta.<\/li>\n<\/ol>\n<p>\u00a1Ya est\u00e1! Haz clic en el bot\u00f3n \u00abReproducir\u00bb para simular tu prototipo y ver c\u00f3mo puedes editar, a\u00f1adir y eliminar registros de clientes. <\/p>\n<p><a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster.vp\">Puedes descargar el ejemplo aqu\u00ed.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Imagina que est\u00e1s creando el prototipo de una aplicaci\u00f3n para gestionar los clientes de tu empresa. Como tu empresa tiene muchos clientes, necesitar\u00e1s alguna forma de&#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-124631","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\/124631"}],"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=124631"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124631\/revisions"}],"predecessor-version":[{"id":126134,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124631\/revisions\/126134"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}