{"id":23895,"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:29","modified_gmt":"2026-07-01T10:01:29","slug":"adobe-experience-manager-handige-tips-voor-het-aanpassen-van-aem-dialoogvelden","status":"publish","type":"post","link":"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/adobe-experience-manager-handige-tips-voor-het-aanpassen-van-aem-dialoogvelden\/","title":{"rendered":"Adobe Experience Manager: Handige tips voor het aanpassen van AEM Dialoogvelden"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#customizing-touch-aem-dialog-fields\">Aanpassen van Touch AEM Dialoogvelden<\/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\">Aanpassen van Touch AEM Dialoogvelden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Het aanpassen van de gebruikersinterface is een essentieel onderdeel van elk project. Leer hoe u Touch AEM Dialoogvelden kunt aanpassen in AEM 6.1. Het aanpassen van de gebruikersinterface is een essentieel onderdeel van elk project, en AEM 6.1 biedt hiervoor vele uitbreidingspunten. Dit blogbericht beschrijft hoe u Touch UI Dialoogvelden kunt aanpassen in AEM 6.1. Meerdere standaard (out-of-the-box) eigenschappen zijn beschikbaar voor het toevoegen van Touch UI dialoogvensters, maar soms is dit niet voldoende. Er zijn veel artikelen over het aanpassen van Klassieke UI dialoogvensters, maar Touch UI vereist een andere aanpak voor aanpassing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ik zal u door het proces leiden van het aanpassen van het Touch UI dialoogvenster, aan de hand van een voorbeeld van een kleurenpicker-dialoogvenster.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecce0368c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce0368c\" 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 noemde het &#8216;colorpicker&#8217;) 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;6a5aecce03da0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce03da0\" 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;6a5aecce04483&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce04483\" 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 daarna een nieuw component en stel resourceType van het veld \u2018color\u2019 in als \u2018training\/components\/colorpicker\u2019.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecce04b3a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce04b3a\" 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 .html om de kleurwaarde weer te geven. We kunnen nu eindelijk een kleur kiezen met onze aangepaste kleurenpicker en het resultaat visualiseren.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecce0525d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce0525d\" 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;6a5aecce0589a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce0589a\" 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. het veld &#8216;color value&#8217; dwingen om dezelfde waarde te hebben als &#8216;color&#8217;)?<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecce05f8d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce05f8d\" 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 &#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 &#8216;granite:class&#8217; voor binding.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecce066e3&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce066e3\" 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;6a5aecce06d79&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce06d79\" 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 te maken onder het veld &#8216;color&#8217;.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecce07444&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecce07444\" 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 waarden in granite:data en &#8216;granite:class&#8217; eigenschappen vergelijken om te begrijpen welke waarden en eigenschapnamen daar moeten staan.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Aanpassen van Touch AEM Dialoogvelden Aanpassen van Touch AEM Dialoogvelden Het aanpassen van de gebruikersinterface is een essentieel [&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-23895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Bel ons","phone":"+1 (438) 383-6878","meta-description":"Hoe u Touch AEM Dialoogvelden kunt aanpassen in AEM 6.1 als de standaard functionaliteiten niet aan al uw behoeften voldoen, bijvoorbeeld een nieuw aangepast veld aanmaken en synchroniseren met andere veldwaarden."},"_links":{"self":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23895","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=23895"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23895\/revisions"}],"predecessor-version":[{"id":23897,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23895\/revisions\/23897"}],"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=23895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/categories?post=23895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/tags?post=23895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}