{"id":124648,"date":"2022-11-16T17:39:53","date_gmt":"2022-11-16T16:39:53","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-data-list-in-place-edit\/"},"modified":"2025-02-03T16:44:50","modified_gmt":"2025-02-03T15:44:50","slug":"how-to-create-a-data-list-in-place-edit","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/how-to-prototype-data-list-in-place-edit","title":{"rendered":"C\u00f3mo crear el prototipo de una lista de datos editada in situ"},"content":{"rendered":"<p>En este ejemplo, aprender\u00e1s a crear un prototipo de edici\u00f3n in situ de una lista de datos.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73224978\/index.html\" width=\"820px\" height=\"400px\" frameborder=\"0\"><\/iframe><\/p>\n<p>As\u00ed es como se construye:<\/p>\n<h3><b>Ver<\/b><\/h3>\n<ul>\n<li>Ve a la paleta Maestros de datos y crea un nuevo \u00abMaestro de datos\u00bb, ll\u00e1malo \u00abEdici\u00f3n de datos\u00bb, y crea un atributo llamado \u00abNombre\u00bb, luego pulsa \u00abAceptar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-1.png\" alt=\"\" width=\"749\" height=\"339\"><\/li>\n<li>Haz clic con el bot\u00f3n derecho del rat\u00f3n en el \u00abMaestro de datos\u00bb que acabas de crear, selecciona \u00abVer y editar registros\u00bb para escribir los datos de tu ejemplo, y pulsa \u00abAceptar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-2.png\" alt=\"\" width=\"749\" height=\"339\"><\/li>\n<li>Selecciona \u00abLista de datos\u00bb en 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 maestro de datos que has creado antes y selecciona el atributo.<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\/data-list-in-place-edit-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-3.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-3.png\" alt=\"Crear una lista de datos\">Crear una lista de datos<\/video><\/li>\n<\/ul>\n<ul>\n<li>Selecciona el contenido de la celda de la fila y haz clic con el bot\u00f3n derecho del rat\u00f3n, pasa el rat\u00f3n por encima de \u00abAgrupar\u00bb y selecciona \u00abAgrupar en panel din\u00e1mico\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-4.png\" alt=\"\" width=\"749\" height=\"339\"><\/li>\n<li>Selecciona el \u00abPanel din\u00e1mico\u00bb y haz clic en el icono \u00ab+\u00bb de arriba para crear un segundo panel.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-5.png\" alt=\"\" width=\"749\" height=\"339\"><\/li>\n<li>Coloca un \u00abCampo de texto de entrada\u00bb de los \u00abCampos de entrada interactivos\u00bb dentro de tu segundo panel; mant\u00e9n pulsado Comando (Mac) o Control (Windows) y arrastra el elemento dentro. Ver\u00e1s un tinte azul cuando est\u00e9s arrastrando. <\/li>\n<\/ul>\n<p>Para este ejemplo Ve a la pesta\u00f1a Maestros de datos, exp\u00e1ndela y arrastra el atributo \u00abNombre\u00bb encima del texto de entrada, se a\u00f1adir\u00e1 el atributo \u00abNombre\u00bb, elim\u00ednalo para que s\u00f3lo tengamos el cuadro de entrada. Cambia el tama\u00f1o del \u00abPanel din\u00e1mico\u00bb para mostrar la entrada completa. <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 45%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767989831\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h3><strong>Eventos<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Selecciona el \u00abTexto\u00bb dentro del primer panel, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-7.png\" alt=\"\" width=\"749\" height=\"339\"><\/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 \u00abEstablecer panel activo\u00bb y haz clic en el panel n\u00famero 2.  <\/span>Haz clic en \u00abAceptar\u00bb para terminar de crear tu evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-8.png\" alt=\"\" width=\"749\" height=\"339\"><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Selecciona la entrada dentro del panel n\u00famero 2, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-9.png\" alt=\"\" width=\"749\" height=\"339\"><\/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 \u00abAcci\u00f3n maestra de datos\u00bb y haz clic en \u00abModificar\u00bb para abrir el constructor de expresiones.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-10.png\" alt=\"\" width=\"749\" height=\"339\"><\/li>\n<li>En el primer campo, ver\u00e1s la funci\u00f3n \u00abModificar\u00bb despu\u00e9s de todas las \u00e1reas que tengas en tu maestro de datos.<\/li>\n<li>Arrastra \u00abFila actual\u00bb de la pesta\u00f1a capas al primer campo como valor despu\u00e9s de seleccionar el \u00abCampo de texto de entrada\u00bb y col\u00f3calo en el campo nombre como valor.  <span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Haz clic en \u00abAceptar\u00bb y \u00abOk\u00bb para terminar de construir tu evento.<\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767990495\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Ve a la paleta Eventos y haz clic en el icono \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 desenfocar\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer panel activo\u00bb y haz clic en el panel n\u00famero 1.  <\/span>Haz clic en \u00abAceptar\u00bb para terminar de crear tu evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70615\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/data-list-in-place-edit-last-event.png\" alt=\"\" width=\"749\" height=\"339\"><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Simula tu prototipo.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este ejemplo, aprender\u00e1s a crear un prototipo de edici\u00f3n in situ de una lista de datos. As\u00ed es como se construye: Ver Ve a la&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8429,8424],"tags":[],"class_list":["post-124648","post","type-post","status-publish","format-standard","hentry","category-formularios-y-datos-es","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124648"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124648"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124648\/revisions"}],"predecessor-version":[{"id":126206,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124648\/revisions\/126206"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}