Personalisatie van AEM Touch UI-dialoogvelden
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.
Ik begeleid u door het proces van het personaliseren van het Touch UI-dialoogvenster aan de hand van een voorbeeld van een kleurenkiezer-dialoogvenster.
Om dit dialoogvenster te bouwen, creëert u een nieuw aangepast veld (ik heb het ‘colorpicker’ genoemd) en laat u het erven van ‘granite/ui/components/foundation/form/field’. Vervolgens creëert u een lokale clientlib en overschrijft u ‘render.jsp’.
In het render.jsp-script definieert u de benodigde eigenschappen om de dialoogvensters te configureren en deze te koppelen aan de clientlib.
Daarna creëert u een nieuw component en stelt u het resourceType van het veld ‘color’ in als ’training/components/colorpicker’.
Vervolgens creëert 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.
Maar wat als u andere veldwaarden moet synchroniseren met het aangepaste veld dat u heeft gemaakt (bijvoorbeeld, het veld ‘color value’ dwingen om dezelfde waarde te hebben als ‘color’)?
Om dit te doen, maakt u een nieuw veld aan genaamd ‘color value’, erft u het van textfield (granite/ui/components/foundation/form/textfield) en configureert u de waarde ‘granite:class’ in de velden ‘colorvalue’ en ‘color’.
Configureer in het veld ‘color’ de waarde ‘granite:class’ voor de binding.
En koppel ze door een ‘granite:data’ knooppunt aan te maken onder het veld ‘color’.
U kunt de waarden in de eigenschappen granite:data en ‘granite:class’ vergelijken om te begrijpen welke waarden en eigenschapsnamen daarin moeten voorkomen.
