List Component (v1)

Med Core Component List Component kan du enkelt skapa både dynamiska och statiska listor.

Användning

List-komponenten kan användas för att skapa t.ex. en dynamisk lista med underordnade sidor eller en statisk lista med godtyckligt definierade objekt.

Vilka typer av listor som är tillgängliga och formateringsalternativen kan definieras av mallförfattaren i designdialogruta. Innehållsredigeraren kan välja bland tillgängliga listtyper och hur listelementen ska formateras i redigeringsdialogruta.

Version och kompatibilitet

I det här dokumentet beskrivs v1 i List Component, som ursprungligen introducerades i version 1.0.0 av Core Components med AEM 6.3.

I följande tabell visas kompatibiliteten för v1 för List-komponenten.

Exempel på komponentutdata

Följande prov tas från Vi.butik.

Skärmbild

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">
            <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">
            <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">
            <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">
            <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">
            <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">
            <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"
            }

Dialogrutan Redigera

I redigeringsdialogrutan kan innehållsförfattaren konfigurera listan och listelementen.

Listinställningar

Listan kan byggas på olika sätt.

• Underordnade sidor
• Fast lista
• Sökning
• Taggar

Oavsett hur listan byggs finns det Sorteringsalternativ som alltid kan konfigureras.

Beroende på hur innehållsförfattaren väljer att skapa listan ändras de ytterligare konfigurationsalternativen.

Underordnade sidor

Listan kan byggas av de underordnade sidorna för den aktuella sidan eller en annan sida.

• Överordnad sida
  • Den sida vars underordnade sidor ska skapa listan
  • Lämna tomt om du vill använda den aktuella sidan
• Underordnat djup - Hur många nivåer i hierarkin som ska användas

Fast lista

Listan kan skapas med en fast lista med objekt.

Tryck eller klicka på Lägg till om du vill dra in ett nytt objekt i listan.

• Ange text för objektet i listan eller använd Dialogrutan Markering om du vill välja ett objekt från AEM.
• Använd draghandtaget för att ordna om objekten i listan.
• Använd papperskorgsikonen för att ta bort objekt i listan.

Sökning

Listan kan skapas med hjälp av resultatet av en sökning AEM innehåll.

• Sökfråga - Den sträng som en textsökning ska köras för att generera listelementen
• Sök i - Var sökningen ska göras
  • Använd Dialogrutan Markering för att välja plats i AEM
  • Använd aktuell sida om inget anges

Taggar

Listan kan byggas med sidor som matchar vissa taggar under en viss plats.

• Överordnad sida - Där taggmatchningen ska börja
  • Använd Dialogrutan Markering för att välja plats i AEM
  • Använd aktuell sida om inget anges
• Taggar - Vilka taggar som ska matchas
  • Använd Bläddra för att markera taggarna
• Matcha - Definiera vilken typ av matchning som ska kvalificera en sida som ska tas med i listan
  • valfri tagg
  • alla taggar

Sorteringsalternativ

Oavsett hur du väljer att skapa listan finns det vissa sorteringsalternativ som alltid kan definieras.

• Beställ av - Ordna elementen
  • Titel
  • Senast ändrat den
• Sorteringsordning - Den ordning i vilken artiklarna ska ordnas
  • stigande
  • fallande
• Max. objekt - Maximalt antal objekt som visas i listan.
  • Lämna tomt om du vill returnera alla objekt.

Objektinställningar

Använda Objektinställningar kan formateringen av listelementen konfigureras.

• Länka objekt
  Länka objekt till motsvarande sida
• Visa beskrivning
  Visa beskrivningar av länkelementet
• Visa datum
  Visa ändringsdatum för länkobjektet

Designdialogruta

I designdialogrutan kan mallskaparen definiera vilka typer av listor som ska tillåtas för innehållsförfattarna samt de tillgängliga objektinställningarna.

Listinställningar

På Listinställningar kan datumformatet definieras liksom vilken typ av listor som ska vara tillgängliga i komponenten för innehållsförfattarna.

• Datumformat - Format som ska användas för att visa det senaste ändringsdatumet
• Inaktivera underordnade - Inaktivera listtypen för underordnade i komponenten
• Inaktivera statisk - Inaktivera den statiska listtypen i komponenten
• Inaktivera sökning - Inaktivera typen av söklista i komponenten
• Inaktivera taggar - Inaktivera tagglisttyp i komponenten

Objektinställningar

På Objektinställningar kan du definiera formateringsalternativen för de enskilda listelementen som ska vara tillgängliga i komponenten för innehållsförfattarna.

• Länka objekt - Aktivera alternativet Länkobjekt i redigeringsdialogruta
• Visa beskrivningar - Aktivera alternativet Visa beskrivningar i dialogrutan redigeringsdialogruta
• Visa datum - Aktivera alternativet Visa datum i redigeringsdialogruta

Teknisk information

Den senaste tekniska dokumentationen om List Component finns på GitHub.

Hela kärnkomponentprojektet kan laddas ned från GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.