Exemple de personnalisation simple

Découvrez comment intégrer ces personnalisations dans notre application AEM Guides.

Par exemple, nous voulons ajouter ce bouton dans une vue existante de l’application.
Pour cela, nous avons besoin de 3 éléments de base :

Supposons que nous souhaitions ajouter un bouton à la boîte à outils d’annotation utilisée dans la révision, qui ouvre le fichier dans 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])
    },
  },
}

Dans l’exemple ci-dessus, nous avons :

JSON de la "boîte à outils d’annotation" .src/jsons/review_app/annotation_toolbox.json

Avant la personnalisation, la boîte à outils d’annotation ressemblait à ceci :

Après la personnalisation, la boîte à outils d’annotation se présente comme suit :

Ajout de CSS

Pour assurer la cohérence, nous fournissons le composant déjà stylisé. Les styles inhérents au fichier JSON inséré lui sont appliqués.
La principale méthode de gestion des CSS consiste à utiliser la clé extraClass dans les extensions.

{
    "view":{
        items:[
            {
                compoenent:"button",
                extraClass:"underline bg-red",
            }
        ]
    }
}

Vous pouvez ajouter des styles personnalisés avec des classes CSS en ajoutant un fichier CSS aux bibliothèques clientes. Au cours du build, nous créons également une sortie Tailwind pour les classes d’utilitaires en vent arrière. La configuration pour la même opération se trouve à l’emplacement tailwind.config.js de l’extension sur ./tailwind.config.js.