{"id":23883,"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:30","modified_gmt":"2026-07-01T10:01:30","slug":"adobe-experience-manager-handige-tips-voor-het-personaliseren-van-aem-dialoogvenstervelden","status":"publish","type":"post","link":"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/adobe-experience-manager-handige-tips-voor-het-personaliseren-van-aem-dialoogvenstervelden\/","title":{"rendered":"Adobe Experience Manager: Handige tips voor het personaliseren van AEM dialoogvenstervelden"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#customizing-touch-aem-dialog-fields\">Personalisatie van AEM Touch UI-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\">Personalisatie van AEM Touch UI-dialoogvelden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">UI-personalisatie is een essentieel onderdeel van elk project. Ontdek hoe u AEM Touch UI-dialoogvelden personaliseert in AEM 6.1. UI-personalisatie is een essentieel onderdeel van elk project, en AEM 6.1 biedt hiervoor tal van uitbreidingspunten. Deze blogpost beschrijft hoe u de dialoogvelden van de Touch UI in AEM 6.1 kunt personaliseren. Er zijn verschillende kant-en-klare eigenschappen beschikbaar voor het toevoegen van Touch UI-dialogen, maar dit is soms niet voldoende. Er bestaan veel artikelen over het personaliseren van Classic UI-dialogen, maar de Touch UI vereist een andere aanpak voor personalisatie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ik begeleid u door het proces van het personaliseren van het Touch UI-dialoogvenster aan de hand van een voorbeeld van een kleurenkiezer-dialoogvenster.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecac883c3&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac883c3\" 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, cre\u00ebert u een nieuw aangepast veld (ik heb het &#8216;colorpicker&#8217; genoemd) en laat u het erven van &#8216;granite\/ui\/components\/foundation\/form\/field&#8217;. Vervolgens cre\u00ebert u een lokale clientlib en overschrijft u &#8216;render.jsp&#8217;.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecac88af8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac88af8\" 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\">In het render.jsp-script definieert u de benodigde eigenschappen om de dialoogvensters te configureren en deze te koppelen aan de clientlib.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecac891aa&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac891aa\" 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\">Daarna cre\u00ebert u een nieuw component en stelt u het resourceType van het veld &#8216;color&#8217; in als &#8217;training\/components\/colorpicker&#8217;.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecac8987f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac8987f\" 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\">Vervolgens cre\u00ebert u een .html-bestand om de kleurwaarde weer te geven. We kunnen dan eindelijk een kleur kiezen met onze gepersonaliseerde kleurenkiezer en het resultaat bekijken.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecac89f2f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac89f2f\" 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;6a5aecac8a549&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac8a549\" 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 (bijvoorbeeld, 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;6a5aecac8ac21&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac8ac21\" 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 doen, maakt u een nieuw veld aan 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 de velden &#8216;colorvalue&#8217; en &#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 de binding.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5aecac8b48d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac8b48d\" 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;6a5aecac8bc8c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac8bc8c\" 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;6a5aecac8c372&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5aecac8c372\" 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 daarin moeten voorkomen.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Personalisatie van AEM Touch UI-dialoogvelden Personalisatie van AEM Touch UI-dialoogvelden UI-personalisatie is een essentieel onderdeel van elk project. [&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-23883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Appelez-nous","phone":"+1 (438) 383-6878","meta-description":"Hoe u Touch AEM-dialoogvelden kunt aanpassen in AEM 6.1 als de standaardfunctionaliteiten niet al uw behoeften dekken, bijvoorbeeld een nieuw aangepast veld maken en dit synchroniseren met andere veldwaarden."},"_links":{"self":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23883","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=23883"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23883\/revisions"}],"predecessor-version":[{"id":23885,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23883\/revisions\/23885"}],"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=23883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/categories?post=23883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/tags?post=23883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}