Exemplo de personalização simples

Saiba como integrar essas personalizações no nosso aplicativo AEM Guides.

Queremos adicionar este botão em uma visualização existente do aplicativo.
Para isso, precisamos de 3 coisas básicas:

Digamos que queiramos adicionar um botão à caixa de ferramentas de anotação usada na revisão, que abre o arquivo no 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])
    },
  },
}

No exemplo acima, temos:

O JSON para a "annotation_toolbox" .src/jsons/review_app/annotation_toolbox.json

Antes da personalização, a caixa de ferramentas de anotação tinha esta aparência:

Após a personalização, a caixa de ferramentas de anotação fica assim:

Adição de CSS

Para manter a consistência, fornecemos o componente já estilizado. O JSON inserido terá estilos inerentes aplicados a ele
A principal maneira de gerenciar o css é por meio da chave extraClass nas extensões.

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

Você pode colocar estilos personalizados com classes CSS adicionando um arquivo css às clientlibs. Durante a compilação, também criamos saída Tailwind para as classes de utilitários em tailwind. A configuração para o mesmo pode ser encontrada no tailwind.config.js da extensão em ./tailwind.config.js