Sie sehen sich Hilfeinhalte der folgenden Version an:

Vorsicht:

In diesem Dokument wird beschrieben, wie Sie Konsolen in der modernen, Touch-optimierten Benutzeroberfläche anpassen. Die Hinweise gelten nicht für die klassische Benutzeroberfläche.

AEM bietet verschiedene Methoden zum Anpassen von Konsolen (und der Seitenbearbeitungsfunktionen) Ihrer Autoreninstanz.

  • Clientbibliotheken
    Mit Clientbibliotheken können Sie die Standardimplementierung um neue Funktionen erweitern und gleichzeitig Standardfunktionen, -objekte und -methoden weiterhin verwenden. Beim Anpassen können Sie unter /apps eine eigene Clientbibliothek erstellen. Darin kann beispielsweise der Code für Ihre benutzerdefinierte Komponente gespeichert sein.
  • Überlagerungen
    Überlagerungen basieren auf Knotendefinitionen und ermöglichen es Ihnen, Standardfunktionen (in /libs) mit Ihren eigenen benutzerdefinierten Funktionen (in /apps) zu überlagern. Wenn Sie eine Überlagerung erstellen, ist keine 1:1-Kopie des Originals erforderlich, da die Sling-Ressourcenzusammenführung das Vererben zulässt.

Überlagerungen können vielseitig zum Erweitern von AEM-Konsolen verwendet werden. Einige davon sind nachstehend (allgemein) beschrieben.

Hinweis:

Weitere Informationen finden Sie unter:

Dieses Thema wird auch in der AEM Gems-Sitzung Anpassung der Benutzeroberfläche für AEM 6.0 behandelt.

Vorsicht:

Sie dürfen keinerlei Änderungen im Pfad /libs vornehmen.

Denn der Inhalt von /libs wird überschrieben, wenn Sie die Instanz das nächste Mal aktualisieren. (Außerdem kann der Inhalt auch durch Anwenden von Hotfixes oder Feature Packs überschrieben werden.)

Die empfohlene Methode zur Konfiguration und für andere Änderungen sieht wie folgt aus:

  1. Erstellen Sie das erforderliche Element neu (d. h. wie es in /libs aussieht) unter /apps
    .
  2. Nehmen Sie die gewünschten Änderungen in /apps vor.

Die folgenden Speicherorte innerhalb der /libs-Struktur können überlagert werden:

  • Konsolen (alle Konsolen basierend auf Seiten der Granite-Benutzeroberfläche); zum Beispiel:
    • /libs/wcm/core/content
  • Sekundäre (innere) Leisten; zum Beispiel:
    • /libs/wcm/core/content/search
  • Symbolleisten (abhängig von der Konsole; zum Beispiel Sites):
    • Standard
      /libs/wcm/core/content/sites/jcr:content/body/content/header/items/default
    • Auswahlmodus
      /libs/wcm/core/content/sites/jcr:content/body/content/header/items/selection
  • Optionen im Hilfemenü (abhängig von der Konsole; zum Beispiel Sites):
    • /libs/wcm/core/content/sites/jcr:content/body/help
  • In der Kartenansicht angezeigte Informationen (abhängig von der Konsole; zum Beispiel Sites):
    • /libs/wcm/core/content/sites/jcr:content/body/content/content/items/childpages

Hinweis:

Weitere Tipps und Informationen zu Tools finden Sie im Knowledge-Base-Artikel Beheben von Fehlern in der Touch-optimierten AEM-Benutzeroberfläche.

Codebeispiele

Auf GitHub sind verschiedene Pakete verfügbar, die Codebeispiele für die auf dieser Seite beschriebenen Aufgaben enthalten.

aem-admin-extension-new-console

aem-admin-extension-new-console ist ein Beispielpaket, das zeigt, wie Sie eine neue AEM 6-Konsole erstellen. Dieses Paket stellt eine Oberfläche zum Verwalten von Launches bereit und fügt einen Link in der Navigation hinzu:

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

aem-admin-extension-customize-sites

aem-admin-extension-customize-sites ist ein Beispielpaket, das zeigt, wie Sie eine vorhandene AEM 6-Admin-Konsole anpassen. Dieses Paket enthält Aktualisierungen der Site-Verwaltung:

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Erstellen einer benutzerdefinierten Konsole

  1. Sie können eine benutzerdefinierte Konsole mit entsprechenden Aktionen erstellen, z. B. Launches auf der obersten Ebene (unter Sites):

    Dieses beinhaltet folgende Schritte:

    • Erstellen einer Stammspeicherplatz-Definition der neuen Konsole; z. B.:
      • /apps/<IhrProjekt>/admin/ext/launches
    • Diese kann (je nach Anforderungen) Folgendes enthalten:
      • Die entsprechenden Clientbibliotheken für benutzerdefinierte Aktionen und less/css-Definitionen
        • /apps/<IhrProjekt>/admin/ext/launches/clientlibs
      • Komponenten, die neu definiert oder angepasst werden müssen; z. B. Breadcrumbs, Datenquellen und Launches
        • /apps/<IhrProjekt>/admin/ext/launches/components
      • Die Seitenressource der Granite-Benutzeroberfläche:
        • /apps/<IhrProjekt>/admin/ext/launches/content/jcr:content
          Eigenschaft: sling:resourceType
      • Die Seitendefinition der Konsole
        • /apps/<IhrProjekt>/admin/ext/launches/content/jcr:content/head
        • /apps/<IhrProjekt>/admin/ext/launches/content/jcr:content/body
    chlimage_1

    Zum Verwenden der neuen Konsole (z. B. in der Navigationsleiste) ist eine ID erforderlich, damit ein ausdrücklicher Verweis erfolgen kann. Die ID wird verwendet, um die Konsole und die zugehörige Navigationsdefinition zu verbinden. Die ID wird im Knoten rail der Seite definiert; z. B. für die Sites-Konsole: 

    • Der rail-Knoten ist:
      /libs/wcm/core/content/sites/jcr:content/body/rail
      • wobei die currentId-Eigenschaft definiert ist als:
        currentId = cq-sites

    Für das Launch-Konsolenbeispiel:

    • ist der Knoten:
      • /apps/<IhrProjekt>/admin/ext/launches/content/jcr:content/body/rail
    • mit den folgenden Eigenschaften:
      • currentId = cq-launches
      • sling:resourceType = granite/ui/components/endor/navcolumns
      • srcPath = cq/core/content/nav

Anpassen der Standardansicht für eine Konsole

Sie können die Standardansicht (Spalte, Karte, Liste) für eine Konsole anpassen:

  1. Sie können die Ansichten durch Überlagern des erforderlichen Eintrags unter folgendem Pfad neu anordnen:

    /libs/wcm/core/content/sites/jcr:content/views

    Der erste Eintrag ist die Standardeinstellung.

    Die verfügbaren Knoten korrelieren mit den Ansichtsoptionen in der Leiste:

    • column
    • card
    • list
  2. Beispiel: In einer Überlagerung für die Liste:

    /apps/wcm/core/content/sites/jcr:content/views/list

    Definieren Sie folgende Eigenschaften:

    • Name: sling:orderBefore
    • Typ: String
    • Wert: column

aem-admin-extension-customize-sites ist ein Beispielpaket, das zeigt, wie Sie eine vorhandene AEM 6-Admin-Konsole anpassen. Dieses Paket enthält Aktualisierungen der Site-Verwaltung:

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Hinzufügen einer neuen Navigationsoption zur Leiste

  1. Sie können einen Navigationseintrag zur Liste hinzufügen (z. B. eine benutzerdefinierte Konsole wie Launches). 

    Erstellen Sie dazu eine Überlagerung von:

    /libs/cq/core/content/nav

    in /apps:

    /apps/cq/core/content/nav

    Erstellen Sie die neuen Knoten und Eigenschaften:

    chlimage_1
    • Erweitern Sie die Navigation:
      • /apps/cq/core/content/nav/launches
    • Geben Sie einen Speicherort in der Struktur an:
      • Eigenschaft: sling:orderBefore
    • Zum Erstellen der Verbindung verweist die id-Eigenschaft auf die currentID-Eigenschaft für die entsprechende Konsole (und muss mit dieser identisch sein):
      • Eigenschaft: id
      • Wert: identisch mit dem Wert für die Konsole (z. B. cq-launches)
        Beispiel: derselbe Wert wie für die currentId-Eigenschaft auf:
        /apps/<IhrProjekt>/admin/ext/launches/content/jcr:content/body/rail

Hinzufügen neuer Aktionen zu Symbolleisten

  1. Sie können Ihre eigenen Komponenten einschließlich der entsprechenden Clientbibliotheken für benutzerdefinierte Aktionen erstellen. Beispielsweise eine Twitter-Werbeaktion unter:

    /apps/wcm/core/clientlibs/sites/js/twitter.js

    Diese kann mit einem Symbolleistenelement in Ihrer Konsole verbunden sein:

    /apps/<IhrProjekt>/admin/ext/launches

    Beispielsweise im Auswahlmodus:

    content/jcr:content/body/content/header/items/selection/items/twitter

Beschränken einer Symbolleisten-Aktion auf eine bestimmte Gruppe

  1. Sie können die Standardaktion mit einer benutzerdefinierten Render-Bedingung überlagern und bestimmte Bedingungen festlegen, die vor dem Rendern erfüllt sein müssen.

    Erstellen Sie beispielsweise eine Komponente zum Steuern der Render-Bedingungen nach Gruppe:

    /apps/myapp/components/renderconditions/group

  2. Um diese auf die Aktion „Site erstellen“ in der Site-Konsole anzuwenden:

    /libs/wcm/core/content/sites

    Erstellen Sie die Überlagerung:

    /apps/wcm/core/content/sites

  3. Fügen Sie dann die Render-Bedingung für die Aktion hinzu:

    jcr:content/body/content/header/items/default/items/create/items/createsite/rendercondition

    Mithilfe von Eigenschaften auf diesem Knoten können Sie die Gruppen definieren, die die spezifische Aktion ausführen können, beispielsweise Administratoren
    .

Entfernen des Zugriffs auf eine Navigationsoption in der Leiste

  1. Sie können einen Navigationseintrag in der Leiste umbenennen; verwenden Sie hierzu eine Überlagerung des erforderlichen Eintrags unter:

    /libs/cq/core/content/nav

    Die verfügbaren Knoten korrelieren mit den Navigationsoptionen in der Leiste:

    • projects
    • sites
    • assets
    • apps
    • forms
    • screens
    • personalization
    • commerce
    • tools
    • communities
  2. Beispiel: Auf einer Überlagerung unter:

    /apps/cq/core/content/nav/sites

    Definieren Sie folgende Eigenschaften:

    • Name: sling:hideResource
    • Typ: String
    • Wert: true

aem-admin-extension-customize-sites ist ein Beispielpaket, das zeigt, wie Sie eine vorhandene AEM 6-Admin-Konsole anpassen. Dieses Paket enthält Aktualisierungen der Site-Verwaltung:

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Beschränken des Zugriffs auf eine Navigationsoption in der Leiste

Sie können den Zugriff auf eine Navigationsoption anhand von ACLs beschränken:

  1. Öffnen Sie die Benutzer- oder Gruppenverwaltung und wählen Sie den Benutzer bzw. die Gruppe aus, für den/die Sie den Zugriff beschränken möchten.

    Hinweis:

    Vermeiden Sie es, Berechtigungen auf Benutzerbasis zuzuweisen oder zu beschränken. Es wird empfohlen, hierfür Gruppen zu verwenden.

  2. Entfernen Sie die Berechtigungen für den Zugriff auf die entsprechenden Knoten unter /libs/cq/core/content/nav/sites. Diese korrelieren mit den Navigationsoptionen in der Leiste:

    • projects
    • sites
    • assets
    • apps
    • forms
    • screens
    • personalization
    • commerce
    • tools
    • communities

Anpassen von Spalten in der Listenansicht

Hinweis:

Diese Funktion ist für Spalten mit Textfeldern optimiert. Für andere Datentypen können Sie cq/gui/components/siteadmin/admin/listview/columns/analyticscolumnrenderer in /apps überlagern.

CODE AUF GITHUB

Den Code dieser Seite finden Sie auf GitHub

Anpassen von Spalten in der Listenansicht:

  1. Überlagern Sie die Liste der verfügbaren Spalten.

    • Auf dem Knoten:
      /apps/wcm/core/content/common/availablecolumns
    • Fügen Sie die neuen Spalten hinzu oder entfernen Sie vorhandene.

    Weitere Informationen finden Sie unter Verwenden von Überlagerungen (und der Sling-Ressourcenzusammenführung).

  2. Optional:

    • Falls Sie zusätzliche Daten aufrufen möchten, müssen Sie einen PageInforProvider mit einer 
      pageInfoProviderType-Eigenschaft schreiben.

    Ein Beispiel sehen Sie im unten (aus GitHub) angehängten Class-Bundle.

  3. Sie können jetzt die Spalte im Spaltenkonfigurator der Listenansicht auswählen.

Filtern von Ressourcen

Ein häufiges Nutzungsszenario beim Verwenden der Konsole ist die Auswahl von Ressourcen (z. B. Seiten, Komponenten, Assets usw.) durch den Benutzer. Dabei kann beispielsweise eine Liste verwendet werden, aus der der Autor ein Element auswählen muss.

Um die Größe der Liste (auf die relevanten Einsatzszenarios) zu beschränken, kann ein Filter in Form eines benutzerdefinierten Prädikats implementiert werden. Weitere Informationen finden Sie in diesem Artikel.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie