DocumentaciónAEM GuidesDocumentación de AEM Guides

Ejemplo de personalización simple

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Usuario
  • Administrador

Descubra cómo integrar estas personalizaciones en nuestra aplicación de AEM Guides.

Supongamos que queremos añadir este botón en una vista existente de la aplicación.
Para esto necesitamos 3 cosas básicas:

  1. El id del JSON de vista al que queremos agregar nuestro componente.
  2. El target, es decir, la ubicación en el JSON al que queremos agregar el nuevo componente. target se ha definido con key y value. El par clave-valor puede ser cualquier atributo utilizado para definir el componente que pueda ayudar en la identificación única del mismo.
    También podemos usar índices para hacer referencia al objetivo.
    Tenemos 3 viewStates: APPEND, PREPEND, REPLACE.
  3. El JSON del componente recién creado y los métodos correspondientes.

AEM Supongamos que queremos añadir un botón al cuadro de herramientas de anotaciones utilizado en la revisión que abra el archivo en la vista de datos de.

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])
    },
  },
}

En el ejemplo anterior tenemos:

  1. el id del JSON en el que queremos insertar nuestro componente, por ejemplo: annotation_toolbox
  2. el destino es el botón addcomment. Agregamos nuestro botón después del botón addcomment usando viewState append.
  3. Definimos el evento en el que se hace clic del botón en el controlador.

El JSON para "annotation_toolbox" .src/jsons/review_app/annotation_toolbox.json

Antes de la personalización, el cuadro de herramientas de anotación tenía este aspecto:

cuadro de herramientas de anotaciones

Después de la personalización, el cuadro de herramientas de anotación tiene este aspecto:

cuadro de herramientas de anotaciones personalizado

Adición de CSS

Para mantener la coherencia, proporcionamos el componente ya diseñado. El JSON insertado tendrá estilos inherentes aplicados
La forma principal de administrar css es mediante la clave extraClass en las extensiones.

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

Puede colocar estilos personalizados con clases CSS agregando un archivo css a clientlibs. Durante la compilación también creamos la salida Tailwind para las clases de utilidades en tailwind. La configuración para lo mismo se puede encontrar en tailwind.config.js de la extensión en ./tailwind.config.js

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178