Exempel på enkel anpassning
Låt oss nu se hur vi kan integrera dessa anpassningar i vår AEM Guides-app.
Vi vill lägga till den här knappen i en befintlig vy av appen.
Därför behöver vi tre grundläggande saker:
idför den vy-JSON som vi vill lägga till komponenten i.target, d.v.s. platsen i JSON som den nya komponenten ska läggas till i.targetdefinieras med enkeyochvalue. Nyckel-värde-paret kan vara vilket attribut som helst som används för att definiera komponenten som kan hjälpa till att identifiera den unikt.
Vi kan också använda index för att referera till målet.
Vi har tre viewState:APPEND,PREPEND,REPLACE.- JSON för den nyskapade komponenten och motsvarande metoder.
Säg att vi vill lägga till en knapp i anteckningsverktygslådan som används vid granskningen, som öppnar filen i AEM.
export default {
id: 'annotation_toolbox',
view: {
items: [
{
component: 'button',
icon: 'linkOut',
title: 'Open topic in Assets view',
'on-click': 'openTopicInAEM',
target: {
key: 'value',
value: 'addcomment',
viewState: VIEW_STATE.APPEND
},
},
],
},
controller: {
openTopicInAEM: function (args) {
const topicIndex = tcx.model.getValue(tcx.model.KEYS.REVIEW_CURR_TOPIC)
const {allTopics = {}} = tcx.model.getValue(tcx.model.KEYS.REVIEW_DATA) || {}
tcx.appGet('util').openInAEM(allTopics[topicIndex])
},
},
}
I exemplet ovan har vi:
idför den JSON som vi vill infoga vår komponent i, dvs.annotation_toolbox- målet är knappen
addcomment. Vi lägger till knappen efter knappenaddcommentmed viewStateappend. - Vi definierar händelsen on-click för knappen i kontrollenheten.
JSON för "annotation_toolbox" .src/jsons/review_app/annotation_toolbox.json
Före anpassning såg anteckningsverktygslådan ut så här:
Efter anpassningen ser anteckningsverktygslådan ut så här:
Lägga till CSS
För att uppnå enhetlighet tillhandahåller vi den komponent som redan är formaterad. Den infogade JSON-filen kommer att ha inbyggda format
Det primära sättet att hantera css är genom extraClass-nyckeln i tilläggen.
{
"view":{
items:[
{
compoenent:"button",
extraClass:"underline bg-red",
}
]
}
}
Du kan lägga till anpassade format med CSS-klasser genom att lägga till en CSS-fil i klientlibs. Under bygget skapar vi också Tailwind-utdata för verktygsklasserna i tailwind. Konfigurationen för samma sak finns på tilläggets tailwind.config.js vid ./tailwind.config.js