Listenkomponente (v1)

Die Kernkomponente „Listenkomponente“ ermöglicht die einfache Erstellung dynamischer sowie statischer Listen.

Nutzung

Die Listenkomponente kann beispielsweise zum Erstellen einer dynamischen Liste von untergeordneten Seiten oder einer statischen Liste von willkürlich definierten Elementen verwendet werden.

Der Typ der verfügbaren Listen und Formatierungsoptionen kann vom Vorlagenautor im Dialogfeld „Design“ definiert werden. Der Inhaltseditor kann aus verfügbaren Listentypen und Elementen zum Formatieren der Listen im Dialogfeld „Bearbeiten“ auswählen.

Version und Kompatibilität

In diesem Dokument wird die v1 der Listenkomponente beschrieben, die ursprünglich mit Version 1.0.0 der Kernkomponenten mit AEM 6.3 eingeführt wurde.

In der folgenden Tabelle ist die Kompatibilität von v1 der Listenkomponente aufgeführt.

Musterkomponentenausgabe

Im Folgenden finden Sie ein Beispiel von We.Retail.

Screenshot

HTML

<div class="cmp cmp-list aem-GridColumn aem-GridColumn--default--12">

<ul>
    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html?lang=de">
            <span class="cmp-list--item-title">Arctic Surfing In Lofoten</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/summit-success-in-the-himalayas.html?lang=de">
            <span class="cmp-list--item-title">Summit Success in the Himalayas</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/climbing-on-kalymnos-island--greece.html?lang=de">
            <span class="cmp-list--item-title">Climbing on Kalymnos Island, Greece</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/running-at-the-great-wall-marathon.html?lang=de">
            <span class="cmp-list--item-title">Running at the Great Wall Marathon</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/skiing-deep-powder-in-siberia.html?lang=de">
            <span class="cmp-list--item-title">Skiing deep powder in Siberia</span>
            
        </a>
        
    </article>
</li>

    <li>
    <article>
        <a href="/content/we-retail/us/en/experience/climbing-in-the-massif-du-mont-blanc.html?lang=de">
            <span class="cmp-list--item-title">Climbing in the Massif du Mont Blanc</span>
            
        </a>
        
    </article>
</li>
</ul>

</div>

JSON

"articles_list": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/articleslist",
              "tagsMatch": "any",
              "displayAs": "teaser",
              "feedEnabled": "true",
              "listFrom": "children",
              "limit": "0",
              "orderBy": "cq:lastModified",
              "pageMax": "0"
            }

Dialogfeld „Bearbeiten“

Das Dialogfeld „Bearbeiten“ ermöglicht dem Inhaltsautor die Konfiguration der Liste und der Listenelemente.

Listen-Einstellungen

Die Liste kann auf verschiedene Weise erstellt werden.

• Untergeordnete Seiten
• Liste fester Werte
• Suchen
• Tags

Unabhängig davon, wie die Liste erstellt wurde, gibt es Sortieroptionen, die immer konfiguriert werden können.

Je nachdem, wie der Inhaltsautor die Liste erstellt, werden die zusätzlichen Konfigurationsoptionen geändert.

Untergeordnete Seiten

Die Liste kann aus den untergeordneten Seiten der aktuellen Seite oder einer anderen Seite bestehen.

• Übergeordnete Seite
  • Die Seite, deren untergeordnete Seiten in die Liste aufgenommen werden sollen
  • Frei lassen, um aktuelle Seite zu verwenden
• Untergeordnete Tiefe – Wie viele Ebenen in der Hierarchie verwendet werden sollten

Liste fester Werte

Die Liste kann mit einer Liste mit festen Elementen erstellt werden.

Tippen oder klicken Sie auf die Schaltfläche Hinzufügen, um ein neues Element in die Liste einzufügen.

• Geben Sie Text für das Element in der Liste ein oder wählen Sie im Dialogfeld „Auswahl“ ein Element aus AEM aus.
• Mit dem Ziehpunkt können Sie die Elemente in der Liste neu anordnen.
• Verwenden Sie das Papierkorbsymbol, um Elemente in der Liste zu löschen.

Suche

Die Liste kann mithilfe der Ergebnisse einer Suche aus AEM-Inhalten erstellt werden.

• Suchabfrage – Die Zeichenfolge, für die eine Volltextsuche ausgeführt wird, um die Listenelemente zu generieren
• Suchen in – Wo die Suche ausgeführt werden soll
  • Wählen Sie im Dialogfeld „Auswahl“ den Speicherort in AEM aus
  • Aktuelle Seite verwenden, wenn leer

Tags

Die Liste kann mithilfe von Seiten erstellt werden, die bestimmten Tags unter einem bestimmten Ort entsprechen.

• Übergeordnete Seite – Wo das Tag-Matching beginnen sollte
  • Wählen Sie im Dialogfeld „Auswahl“ den Speicherort in AEM aus
  • Aktuelle Seite verwenden, wenn leer
• Tags – Welche Tags sollten abgestimmt werden
  • Verwenden Sie das Dialogfeld Durchsuchen, um die Tags auszuwählen.
• Übereinstimmung – Definieren Sie, welche Art von Übereinstimmung eine Seite dazu qualifizieren soll, damit sie in die Liste aufgenommen wird.
  • beliebiges Tag
  • alle Tags

Sortieroptionen

Unabhängig davon, wie Sie die Liste erstellen, gibt es bestimmte Sortieroptionen, die immer definiert werden können.

• Sortieren nach – Gewünschte Reihenfolge der Elemente
  • Titel
  • Datum der letzten Änderung
• Sortierreihenfolge – Reihenfolge, in der die Elemente angeordnet werden sollen
  • Aufsteigend
  • Absteigend
• Maximale Elemente – die maximale Anzahl der in der Liste angezeigten Elementen.
  • Leer lassen, um alle Elemente zurückzugeben.

Element-Einstellungen

Auf der Registerkarte Elementeinstellungen kann die Formatierung der Listenelemente konfiguriert werden.

• Elemente verknüpfen
  Elemente mit der entsprechenden Seite verknüpfen
• Beschreibung anzeigen
  Beschreibung des Link-Elements anzeigen
• Datum anzeigen
  Änderungsdatum des Link-Elements anzeigen

Dialogfeld „Design“

Über das Dialogfeld „Design“ kann der Vorlagenautor festlegen, welche Listentypen für Inhaltsautoren erlaubt und welche Elementeinstellungen verfügbar sind.

Listen-Einstellungen

Auf der Registerkarte Listeneinstellungen kann das Datumsformat sowie der Listentyp definiert werden, der in der Komponente den Inhaltsautoren zur Verfügung stehen soll.

• Datumsformat – Format für die Anzeige des letzten Bearbeitungsdatums
• Untergeordnete deaktivieren – Deaktiviert den untergeordneten Listentyp in der Komponente.
• Statisch deaktivieren – Deaktiviert den statischen Listentyp in der Komponente
• Suche deaktivieren – Deaktiviert den Suchlistentyp in der Komponente.
• Tags deaktivieren – Deaktiviert den Tag-Listentyp in der Komponente

Element-Einstellungen

Auf der Registerkarte Elementeinstellungen können die Formatierungsoptionen für die einzelnen Listenelemente definiert werden, die in der Komponente für die Inhaltsautoren verfügbar sein sollten.

• Elemente verknüpfen – Aktivieren Sie die Option Verknüpfungselemente im Dialogfeld „Bearbeiten“
• Beschreibungen anzeigen – Aktivieren Sie die Option „Beschreibungen anzeigen“ im Dialogfeld „Bearbeiten“
• Datum anzeigen – Aktivieren Sie die Option „Datum anzeigen“ im Dialogfeld „Bearbeiten“

Technische Details

Die aktuelle technische Dokumentation zur Listenkomponente finden Sie auf GitHub.

Das gesamte Kernkomponentenprojekt kann von GitHub heruntergeladen werden.

Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler.