Einfaches Anpassungsbeispiel

Letzte Aktualisierung: 19. Dezember 2024

Erstellt für:

  • Benutzende
  • Admin

Wir zeigen Ihnen nun, wie Sie diese Anpassungen in unsere AEM Guides-App integrieren können.

Angenommen, wir möchten diese Schaltfläche in einer vorhandenen Ansicht der App hinzufügen.
Dazu müssen wir drei grundlegende Dinge tun:

  1. Die id der JSON-Ansicht, der wir unsere Komponente hinzufügen möchten.
  2. Die target, d. h. der Speicherort in der JSON, der die neue Komponente hinzugefügt werden soll. Die target wird mithilfe eines key und value definiert. Das Schlüssel-Wert-Paar kann ein beliebiges Attribut sein, mit dem die Komponente definiert wird, die bei der eindeutigen Identifizierung helfen kann.
    Wir können auch Indizes verwenden, um auf das Ziel zu verweisen.
    Wir haben 3 ViewStates: APPEND, PREPEND, REPLACE.
  3. Die JSON der neu erstellten Komponente und die entsprechenden Methoden.

Angenommen, wir möchten der in der Überprüfung verwendeten Anmerkungs-Toolbox eine Schaltfläche hinzufügen, mit der die Datei in AEM geöffnet wird.

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

Im obigen Beispiel haben wir Folgendes:

  1. die id der JSON-Datei, in die wir unsere Komponente einfügen möchten, d. h. annotation_toolbox
  2. Das Ziel ist die Schaltfläche addcomment . Wir fügen unsere Schaltfläche nach der Schaltfläche addcomment mithilfe der append viewState hinzu.
  3. Wir definieren das On-Click-Ereignis der Schaltfläche im Controller.

Die JSON-Datei für die .src/jsons/review_app/annotation_toolbox.json „annotation_toolbox“

Vor der Anpassung sah die Anmerkungs-Toolbox wie folgt aus:

annotation-toolbox

Nach der Anpassung sieht die Anmerkungs-Toolbox wie folgt aus:

customized-annotation-toolbox