{"id":23927,"date":"2016-08-12T21:13:00","date_gmt":"2016-08-12T21:13:00","guid":{"rendered":"https:\/\/site.axamit.com\/?p=538"},"modified":"2026-07-01T10:01:25","modified_gmt":"2026-07-01T10:01:25","slug":"adobe-experience-manager-handige-tips-voor-het-aanpassen-van-aem-dialoogvensters","status":"publish","type":"post","link":"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/adobe-experience-manager-handige-tips-voor-het-aanpassen-van-aem-dialoogvensters\/","title":{"rendered":"Adobe Experience Manager: Handige tips voor het aanpassen van AEM-dialoogvensters"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#customizing-touch-aem-dialog-fields\">AEM Touch dialoogvensters aanpassen<\/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\">AEM Touch dialoogvensters aanpassen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Het aanpassen van de gebruikersinterface is een cruciaal onderdeel van elk project. Leer hoe u AEM Touch dialoogvensters kunt aanpassen in AEM 6.1. Het aanpassen van de gebruikersinterface is een cruciaal onderdeel van elk project, en AEM 6.1 biedt hiervoor veel uitbreidingspunten. Deze blogpost beschrijft hoe u Touch UI-dialoogvensters kunt aanpassen in AEM 6.1. Er zijn veel kant-en-klare eigenschappen beschikbaar voor het toevoegen van Touch UI-dialoogvensters, maar soms is dat niet voldoende. Er zijn veel artikelen over hoe u Classic UI-dialoogvensters kunt aanpassen, maar Touch UI vereist een andere personalisatie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ik zal u door het proces leiden van het aanpassen van een Touch UI-dialoogvenster, met behulp van het voorbeeld van het dialoogvenster voor kleurselectie (Color Picker).<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecae854b9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae854b9\" 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:\/\/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\">Om dit dialoogvenster te bouwen, maakt u een nieuw aangepast veld (ik heb het &#8216;colorpicker&#8217; genoemd) en erft u het van &#8216;granite\/ui\/components\/foundation\/form\/field&#8217;. Maak vervolgens een lokale clientlib en overschrijf &#8216;render.jsp&#8217;.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecae85be8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae85be8\" 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:\/\/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\">Definieer in het render.jsp-script de benodigde eigenschappen om de dialoogvensters te configureren en te koppelen aan de clientlib.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecae862c8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae862c8\" 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:\/\/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\">Maak vervolgens een nieuw component en stel de resourceType van het veld &#8216;color&#8217; in op &#8217;training\/components\/colorpicker&#8217;.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecae869d2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae869d2\" 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:\/\/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\">Maak vervolgens een .html-bestand om de kleurwaarde weer te geven. We kunnen ten slotte een kleur selecteren met onze aangepaste kleurenkiezer en het resultaat visualiseren.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecae870a1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae870a1\" 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:\/\/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;6a5aecae876da&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae876da\" 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:\/\/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\">Maar wat als u andere veldwaarden moet synchroniseren met het aangepaste veld dat u heeft gemaakt (bijv. afdwingen dat het veld &#8216;color value&#8217; dezelfde waarde heeft als &#8216;color&#8217;)?<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecae87df1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae87df1\" 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:\/\/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\">Om dit te bereiken, maakt u een nieuw veld genaamd &#8216;color value&#8217;, erft u het van textfield (granite\/ui\/components\/foundation\/form\/textfield) en configureert u de waarde van &#8216;granite:class&#8217; in zowel de velden &#8216;colorvalue&#8217; als &#8216;color&#8217;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Configureer in het veld &#8216;color&#8217; de waarde van &#8216;granite:class&#8217; voor de koppeling.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecae8854b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae8854b\" 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:\/\/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;6a5aecae88b99&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae88b99\" 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:\/\/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\">En koppel ze door een &#8216;granite:data&#8217;-knooppunt aan te maken onder het veld &#8216;color&#8217;.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecae89265&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecae89265\" 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:\/\/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\">U kunt de waarden in de eigenschappen granite:data en &#8216;granite:class&#8217; vergelijken om te begrijpen welke waarden en eigenschapsnamen daar moeten staan.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>AEM Touch dialoogvensters aanpassen AEM Touch dialoogvensters aanpassen Het aanpassen van de gebruikersinterface is een cruciaal onderdeel van [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":5015,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[158],"tags":[],"class_list":["post-23927","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Zadzwo\u0144 do nas","phone":"+1 (438) 383-6878","meta-description":"Hoe u AEM Touch dialoogvensters kunt aanpassen in AEM 6.1, als de ingebouwde eigenschappen niet aan al uw behoeften voldoen, bijvoorbeeld door een nieuw aangepast veld aan te maken en dit te synchroniseren met de waarden van andere velden."},"_links":{"self":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/comments?post=23927"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23927\/revisions"}],"predecessor-version":[{"id":23929,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23927\/revisions\/23929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/media?parent=23927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/categories?post=23927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/tags?post=23927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}