{"id":23418,"date":"2016-08-12T21:13:00","date_gmt":"2016-08-12T21:13:00","guid":{"rendered":"https:\/\/site.axamit.com\/?p=538"},"modified":"2026-06-23T07:15:13","modified_gmt":"2026-06-23T07:15:13","slug":"adobe-experience-manager-conseils-utiles-pour-personnaliser-les-champs-de-dialogue-aem","status":"publish","type":"post","link":"https:\/\/axamit.com\/fr\/blog\/adobe-experience-manager\/adobe-experience-manager-conseils-utiles-pour-personnaliser-les-champs-de-dialogue-aem\/","title":{"rendered":"Adobe Experience Manager : Conseils utiles pour personnaliser les champs de dialogue AEM"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#customizing-touch-aem-dialog-fields\">Personnalisation des champs de dialogue Touch UI AEM<\/a><\/li><\/ul><\/div>\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"customizing-touch-aem-dialog-fields\">Personnalisation des champs de dialogue Touch UI AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La personnalisation de l&rsquo;interface utilisateur est un \u00e9l\u00e9ment essentiel de tout projet. D\u00e9couvrez comment personnaliser les champs de dialogue Touch UI AEM dans AEM 6.1. La personnalisation de l&rsquo;interface utilisateur est un \u00e9l\u00e9ment essentiel de tout projet, et AEM 6.1 offre de nombreux points d&rsquo;extension \u00e0 cet effet. Cet article de blog d\u00e9crira comment personnaliser les champs de dialogue Touch UI dans AEM 6.1. Plusieurs propri\u00e9t\u00e9s pr\u00eates \u00e0 l&#8217;emploi sont disponibles pour ajouter des dialogues Touch UI, mais ce n&rsquo;est parfois pas suffisant. Il existe de nombreux articles sur la personnalisation des dialogues Classic UI, mais Touch UI n\u00e9cessite une personnalisation diff\u00e9rente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je vais vous guider \u00e0 travers le processus de personnalisation du dialogue Touch UI en utilisant l&rsquo;exemple d&rsquo;un dialogue de s\u00e9lection de couleur.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd70ea2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd70ea2\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"557\" height=\"411\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-1.webp\" alt=\"\" class=\"wp-image-6627\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-1.webp 557w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-1-300x221.webp 300w\" sizes=\"auto, (max-width: 557px) 100vw, 557px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pour construire ce dialogue, cr\u00e9ez un nouveau champ personnalis\u00e9 (je l&rsquo;ai nomm\u00e9 \u00ab colorpicker \u00bb) et h\u00e9ritez-le de \u00ab granite\/ui\/components\/foundation\/form\/field \u00bb. Ensuite, cr\u00e9ez une biblioth\u00e8que cliente locale (clientlib) et surchargez \u00ab render.jsp \u00bb.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd71424&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd71424\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"323\" height=\"449\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-2.webp\" alt=\"\" class=\"wp-image-6628\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-2.webp 323w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-2-216x300.webp 216w\" sizes=\"auto, (max-width: 323px) 100vw, 323px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dans le script render.jsp, d\u00e9finissez les propri\u00e9t\u00e9s n\u00e9cessaires pour configurer les dialogues et liez-les \u00e0 la clientlib.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd718af&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd718af\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"636\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-3.webp\" alt=\"\" class=\"wp-image-6630\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-3.webp 993w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-3-300x192.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-3-768x492.webp 768w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s cela, cr\u00e9ez un nouveau composant et d\u00e9finissez le resourceType du champ \u00ab color \u00bb comme \u00ab training\/components\/colorpicker \u00bb.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd71cfc&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd71cfc\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"693\" height=\"265\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-4.webp\" alt=\"\" class=\"wp-image-6631\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-4.webp 693w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-4-300x115.webp 300w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ensuite, cr\u00e9ez un fichier .html pour afficher la valeur de la couleur. Nous pouvons enfin choisir une couleur avec notre s\u00e9lecteur de couleurs personnalis\u00e9 et visualiser le r\u00e9sultat.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd7215c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd7215c\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"406\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-5.webp\" alt=\"\" class=\"wp-image-6632\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-5.webp 547w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-5-300x223.webp 300w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd7258d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd7258d\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"220\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-6.webp\" alt=\"\" class=\"wp-image-6633\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-6.webp 479w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-6-300x138.webp 300w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Mais que se passe-t-il si vous devez synchroniser d&rsquo;autres valeurs de champ avec le champ personnalis\u00e9 que vous avez cr\u00e9\u00e9 (par exemple, forcer le champ \u00ab color value \u00bb \u00e0 avoir la m\u00eame valeur que \u00ab color \u00bb) ?<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd729ec&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd729ec\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"558\" height=\"409\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-7.webp\" alt=\"\" class=\"wp-image-6634\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-7.webp 558w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-7-300x220.webp 300w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pour ce faire, cr\u00e9ez un nouveau champ appel\u00e9 \u00ab color value \u00bb, h\u00e9ritez-le de textfield (granite\/ui\/components\/foundation\/form\/textfield), et configurez la valeur \u00ab granite:class \u00bb dans les champs \u00ab colorvalue \u00bb et \u00ab color \u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans le champ \u00ab color \u00bb, configurez la valeur \u00ab granite:class \u00bb pour la liaison.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd72e72&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd72e72\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"978\" height=\"294\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-8.webp\" alt=\"\" class=\"wp-image-6635\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-8.webp 978w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-8-300x90.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-8-768x231.webp 768w\" sizes=\"auto, (max-width: 978px) 100vw, 978px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd7327c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd7327c\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"255\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-9.webp\" alt=\"\" class=\"wp-image-6636\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-9.webp 942w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-9-300x81.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-9-768x208.webp 768w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Et liez-les en cr\u00e9ant un n\u0153ud \u00ab granite:data \u00bb sous le champ \u00ab color \u00bb.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555dd7372f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555dd7372f\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1110\" height=\"297\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-10.webp\" alt=\"\" class=\"wp-image-6637\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-10.webp 1110w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-10-300x80.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-10-1024x274.webp 1024w, https:\/\/axamit.com\/wp-content\/uploads\/2016\/08\/Customizing-Touch-AEM-Dialog-Fields-10-768x205.webp 768w\" sizes=\"auto, (max-width: 1110px) 100vw, 1110px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez comparer les valeurs des propri\u00e9t\u00e9s granite:data et \u00ab granite:class \u00bb pour comprendre quelles valeurs et quels noms de propri\u00e9t\u00e9s doivent y figurer.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Personnalisation des champs de dialogue Touch UI AEM Personnalisation des champs de dialogue Touch UI AEM La personnalisation [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":5015,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[159],"tags":[],"class_list":["post-23418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Give Us a Call","phone":"+1 (438) 383-6878","meta-description":"Comment personnaliser les champs de dialogue AEM Touch dans AEM 6.1 si les propri\u00e9t\u00e9s pr\u00eates \u00e0 l'emploi ne couvrent pas tous vos besoins, par exemple, \u200b\u200bcr\u00e9er un nouveau champ personnalis\u00e9 et le synchroniser avec d'autres valeurs de champ. "},"_links":{"self":[{"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/posts\/23418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/comments?post=23418"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/posts\/23418\/revisions"}],"predecessor-version":[{"id":23420,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/posts\/23418\/revisions\/23420"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/media?parent=23418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/categories?post=23418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/tags?post=23418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}