Simple customisation example

Let us now how to integrate these customisations in our AEM Guides app.

Say, we want to add this button in an exisiting view of the app.
For this we need to 3 basic things:

Say we want to add a button to the annotation toolbox used in review, that opens the file in 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])
    },
  },
}

In the above example we have:

The JSON for the “annotation_toolbox” .src/jsons/review_app/annotation_toolbox.json

Before customisation, the annotation toolbox looked like this:

After the customisation, the annotation toolbox looks like this:

Adding CSS

For the consistency we provide the component already styled. The inserted JSON will have inherent styles applied to it
The primary way to manage css is through the extraClass key in the extensions.

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

You can put custom styles with CSS classes by adding a css file to clientlibs. During the build we also create Tailwind output for the utility classes in tailwind. The config for the same can be found at the extension’s tailwind.config.js at ./tailwind.config.js