{"id":2479,"date":"2016-08-12T21:13:00","date_gmt":"2016-08-12T21:13:00","guid":{"rendered":"https:\/\/site.axamit.com\/?p=538"},"modified":"2024-01-09T06:39:10","modified_gmt":"2024-01-09T06:39:10","slug":"customizingtouchuidialogs","status":"publish","type":"post","link":"https:\/\/axamit.com\/en\/blog\/adobe-experience-manager\/customizingtouchuidialogs\/","title":{"rendered":"Adobe Experience Manager: Useful Tips to Customize AEM Dialog Fields"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#customizing-touch-aem-dialog-fields\">Customizing Touch AEM Dialog Fields<\/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\">Customizing Touch AEM Dialog Fields<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">User interface customization is an essential part of any project. Learn how to customize Touch AEM Dialog Fields in AEM 6.1. User interface customization is an essential part of any project, and AEM 6.1 has many extension points for this. This blog post will describe how to customize Touch UI Dialog fields in AEM 6.1. Multiple out-of-the-box properties are available for adding touch UI dialogs, but sometimes it is not enough. There are a lot of posts on how to customize Classic UI dialogs, but Touch UI requires different customization.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I will walk you through the process of customizing the Touch UI dialog using a Color Picker dialog example.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a334ed114576&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed114576\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063548\/Customizing-Touch-AEM-Dialog-Fields-1.webp\" alt=\"\" class=\"wp-image-6627\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063548\/Customizing-Touch-AEM-Dialog-Fields-1.webp 557w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063548\/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\">To build this dialog, create a new custom field (I named it \u2018colorpicker\u2019), and inherit it from \u2018granite\/ui\/components\/foundation\/form\/field\u2019. Then, create a local clientlib and override \u2018render.jsp\u2019.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a334ed114de0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed114de0\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063614\/Customizing-Touch-AEM-Dialog-Fields-2.webp\" alt=\"\" class=\"wp-image-6628\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063614\/Customizing-Touch-AEM-Dialog-Fields-2.webp 323w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063614\/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\">In the render.jsp script, define the necessary properties to configure the dialogs and bind them with clientlib.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a334ed1155ed&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed1155ed\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063622\/Customizing-Touch-AEM-Dialog-Fields-3.webp\" alt=\"\" class=\"wp-image-6630\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063622\/Customizing-Touch-AEM-Dialog-Fields-3.webp 993w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063622\/Customizing-Touch-AEM-Dialog-Fields-3-300x192.webp 300w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063622\/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\">After that, create a new component and set resourceType of field \u2018color\u2019 as \u2018training\/components\/colorpicker\u2019.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a334ed115dbd&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed115dbd\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063630\/Customizing-Touch-AEM-Dialog-Fields-4.webp\" alt=\"\" class=\"wp-image-6631\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063630\/Customizing-Touch-AEM-Dialog-Fields-4.webp 693w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063630\/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\">Then, create .html to display the color value. We can finally choose a color with our custom color picker and visualize the result.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a334ed116626&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed116626\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063638\/Customizing-Touch-AEM-Dialog-Fields-5.webp\" alt=\"\" class=\"wp-image-6632\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063638\/Customizing-Touch-AEM-Dialog-Fields-5.webp 547w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063638\/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;6a334ed116b3f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed116b3f\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063649\/Customizing-Touch-AEM-Dialog-Fields-6.webp\" alt=\"\" class=\"wp-image-6633\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063649\/Customizing-Touch-AEM-Dialog-Fields-6.webp 479w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063649\/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\">But what if you need to synchronize other field values with the custom field you have created (e.g. force \u2018color value\u2019 field to have the same value as \u2018color\u2019)?<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a334ed11729f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed11729f\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063657\/Customizing-Touch-AEM-Dialog-Fields-7.webp\" alt=\"\" class=\"wp-image-6634\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063657\/Customizing-Touch-AEM-Dialog-Fields-7.webp 558w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063657\/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\">To accomplish this, create a new field called \u2018color value\u2019, inherit it from textfield (granite\/ui\/components\/foundation\/form\/textfield), and configure \u2018granite:class\u2019 value in both \u2018colorvalue\u2019 and \u2018color\u2019 fields.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the \u2018color\u2019 field, configure \u2018granite:class\u2019 value for binding.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a334ed117984&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed117984\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063705\/Customizing-Touch-AEM-Dialog-Fields-8.webp\" alt=\"\" class=\"wp-image-6635\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063705\/Customizing-Touch-AEM-Dialog-Fields-8.webp 978w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063705\/Customizing-Touch-AEM-Dialog-Fields-8-300x90.webp 300w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063705\/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;6a334ed118299&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed118299\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063717\/Customizing-Touch-AEM-Dialog-Fields-9.webp\" alt=\"\" class=\"wp-image-6636\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063717\/Customizing-Touch-AEM-Dialog-Fields-9.webp 942w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063717\/Customizing-Touch-AEM-Dialog-Fields-9-300x81.webp 300w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063717\/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\">And bind them by creating \u2018granite:data\u2019 node under \u2018color\u2019 field.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a334ed118b02&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a334ed118b02\" 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=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063725\/Customizing-Touch-AEM-Dialog-Fields-10.webp\" alt=\"\" class=\"wp-image-6637\" srcset=\"https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063725\/Customizing-Touch-AEM-Dialog-Fields-10.webp 1110w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063725\/Customizing-Touch-AEM-Dialog-Fields-10-300x80.webp 300w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063725\/Customizing-Touch-AEM-Dialog-Fields-10-1024x274.webp 1024w, https:\/\/d11cw4yu2zh4tp.cloudfront.net\/wp-content\/uploads\/2016\/08\/09063725\/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\">You can compare values in granite:data and \u2018granite:class\u2019 properties to understand what values and property names should be there.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Customizing Touch AEM Dialog Fields Customizing Touch AEM Dialog Fields User interface customization is an essential part of [&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":[22],"tags":[],"class_list":["post-2479","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":"How to customize Touch AEM Dialog Fields in AEM 6.1 if the out-of-the-box properties do not cover all your needs, for example, \u200b\u200bcreate a new custom field and sync it with other field values.  "},"_links":{"self":[{"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/posts\/2479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/comments?post=2479"}],"version-history":[{"count":0,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/posts\/2479\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/media?parent=2479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/categories?post=2479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/tags?post=2479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}