{"id":124673,"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:48","modified_gmt":"2025-02-03T15:44:48","slug":"how-to-create-a-data-list-in-place-edit","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/comment-prototyper-liste-donnees-place","title":{"rendered":"Comment prototyper une liste de donn\u00e9es sur place ?"},"content":{"rendered":"<p>Dans cet exemple, vous apprendrez \u00e0 prototyper une liste de donn\u00e9es en vue d&rsquo;une modification sur place.<\/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>Voici comment le construire :<\/p>\n<h3><b>Voir<\/b><\/h3>\n<ul>\n<li>Allez dans la palette Ma\u00eetrise des donn\u00e9es et cr\u00e9ez une nouvelle \u00ab\u00a0Ma\u00eetrise des donn\u00e9es\u00a0\u00bb, nommez-la \u00ab\u00a0Modification des donn\u00e9es\u00a0\u00bb et cr\u00e9ez un attribut appel\u00e9 \u00ab\u00a0Nom\u00a0\u00bb, puis appuyez sur \u00ab\u00a0Ok\u00a0\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>Cliquez avec le bouton droit de la souris sur la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous venez de cr\u00e9er, s\u00e9lectionnez \u00ab\u00a0Voir et modifier les enregistrements\u00a0\u00bb pour \u00e9crire vos donn\u00e9es d&rsquo;exemple, et appuyez sur \u00ab\u00a0Ok\u00a0\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>S\u00e9lectionnez \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb dans la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb et placez-la sur le canevas ; la fen\u00eatre \u00ab\u00a0Nouvelle liste de donn\u00e9es\u00a0\u00bb sera activ\u00e9e ; donnez un nom \u00e0 votre liste, choisissez ensuite la base de donn\u00e9es que vous avez cr\u00e9\u00e9e pr\u00e9c\u00e9demment et s\u00e9lectionnez l&rsquo;attribut.<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=\"Cr\u00e9er une liste de donn\u00e9es\">Cr\u00e9er une liste de donn\u00e9es<\/video><\/li>\n<\/ul>\n<ul>\n<li>S\u00e9lectionnez le contenu de la cellule de la ligne et cliquez avec le bouton droit de la souris, survolez \u00ab\u00a0Grouper\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0Grouper dans le panneau dynamique\u00a0\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>S\u00e9lectionnez le \u00ab\u00a0panneau dynamique\u00a0\u00bb et cliquez sur l&rsquo;ic\u00f4ne \u00ab\u00a0+\u00a0\u00bb ci-dessus pour cr\u00e9er un deuxi\u00e8me panneau.<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>Placez un \u00ab\u00a0champ de texte de saisie\u00a0\u00bb de la section \u00ab\u00a0Champs de saisie interactifs\u00a0\u00bb \u00e0 l&rsquo;int\u00e9rieur de votre deuxi\u00e8me panneau ; maintenez la touche Commande (Mac) ou Contr\u00f4le (Windows) enfonc\u00e9e et faites glisser l&rsquo;\u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur. Vous verrez une teinte bleue lorsque vous faites glisser l&rsquo;\u00e9l\u00e9ment. <\/li>\n<\/ul>\n<p>Pour cet exemple : Allez dans l&rsquo;onglet Ma\u00eetrise des donn\u00e9es, d\u00e9veloppez-le et faites glisser l&rsquo;attribut \u00ab\u00a0Nom\u00a0\u00bb sur le texte de saisie, l&rsquo;attribut \u00ab\u00a0Nom\u00a0\u00bb sera ajout\u00e9, supprimez-le pour que nous n&rsquo;ayons que la bo\u00eete de saisie. Redimensionnez le \u00ab\u00a0panneau dynamique\u00a0\u00bb pour afficher la totalit\u00e9 de la saisie. <\/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>Ev\u00e9nements<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">S\u00e9lectionnez le \u00ab\u00a0Texte\u00a0\u00bb dans le premier panneau, allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\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\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Set active panel\u00a0\u00bb et cliquez sur le panneau num\u00e9ro 2.  <\/span>Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de votre \u00e9v\u00e9nement.<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\">S\u00e9lectionnez l&rsquo;entr\u00e9e \u00e0 l&rsquo;int\u00e9rieur du panneau num\u00e9ro 2, allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\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\">Cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb dans la bo\u00eete de dialogue et s\u00e9lectionnez \u00ab\u00a0on Change\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Data master action\u00a0\u00bb et cliquez sur \u00ab\u00a0Modify\u00a0\u00bb pour ouvrir le constructeur d&rsquo;expressions.<\/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>Dans le premier champ, vous verrez la fonction \u00ab\u00a0Modifier\u00a0\u00bb apr\u00e8s tous les domaines que vous avez dans votre base de donn\u00e9es.<\/li>\n<li>Faites glisser la \u00ab\u00a0ligne actuelle\u00a0\u00bb de l&rsquo;onglet des calques vers le premier champ en tant que valeur apr\u00e8s avoir s\u00e9lectionn\u00e9 le \u00ab\u00a0champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb et placez-la dans le champ de nom en tant que valeur.  <span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb et \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de votre \u00e9v\u00e9nement.<\/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\">Allez dans la palette \u00c9v\u00e9nements et cliquez sur l&rsquo;ic\u00f4ne \u00ab\u00a0+\u00a0\u00bb pour ajouter un nouvel \u00e9v\u00e9nement.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Focus out\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Set active panel\u00a0\u00bb et cliquez sur le panneau num\u00e9ro 1.  <\/span>Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de votre \u00e9v\u00e9nement.<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\">Simulez votre prototype.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet exemple, vous apprendrez \u00e0 prototyper une liste de donn\u00e9es en vue d&rsquo;une modification sur place. Voici comment le construire : Voir Allez dans 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":[8426,8428],"tags":[],"class_list":["post-124673","post","type-post","status-publish","format-standard","hentry","category-comment-faire","category-formulaires-et-donnees-fr"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124673"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124673"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124673\/revisions"}],"predecessor-version":[{"id":126197,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124673\/revisions\/126197"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}