Eenvoudige aanpassing, voorbeeld
Laat ons nu hoe te om deze aanpassingen in onze app van de Gidsen van de AEM te integreren.
We willen deze knop bijvoorbeeld toevoegen aan een bestaande weergave van de app.
Hiervoor moeten drie fundamentele dingen worden gedaan:
- De
idIn de weergave willen we onze component toevoegen. - De
target, dat wil zeggen de locatie in de JSON waaraan we de nieuwe component willen toevoegen. Detargetwordt gedefinieerd met eenkeyenvalue. Het sleutelwaardepaar kan om het even welk attribuut zijn dat wordt gebruikt om de component te bepalen die in unieke identificatie van het kan helpen.
We kunnen indexen ook gebruiken om naar het doel te verwijzen.
We hebben drie visies:APPEND,PREPEND,REPLACE. - De JSON van de nieuw gemaakte component en de bijbehorende methoden.
Stel dat u een knop wilt toevoegen aan de gereedschapset voor annotaties die wordt gebruikt in de revisie, waarmee het bestand in AEM wordt geopend.
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])
},
},
}
In het bovenstaande voorbeeld hebben we:
- de
idvan de JSON waarin we onze component willen invoegen, dat wil zeggenannotation_toolbox - het doel is
addcommentknop. We voegen onze knop toe na deaddcommentknop met de viewStateappend. - De gebeurtenis on-click van de knop in de controller wordt gedefinieerd.
De JSON voor de "annotation_toolbox" .src/jsons/review_app/annotation_toolbox.json
Voordat de annotatietoolbox werd aangepast, zag deze er als volgt uit:
Na de aanpassing ziet de gereedschapset voor annotaties er als volgt uit:
CSS toevoegen
Voor de consistentie bieden we de component die al is opgemaakt. Op de ingevoegde JSON worden inherente stijlen toegepast. De primaire manier om CSS te beheren is via de toets extraClass in de extensies.
{
"view":{
items:[
{
compoenent:"button",
extraClass:"underline bg-red",
}
]
}
}
U kunt aangepaste stijlen met CSS-klassen plaatsen door een CSS-bestand toe te voegen aan clientlibs. Tijdens de bouw creëren wij ook Tailwind output voor de nutsklassen in staarwind. De config voor het zelfde kan bij de uitbreiding worden gevonden tailwind.config.js om ./tailwind.config.js