Componente elenco (v1)

Il componente Elenco componenti core consente di creare facilmente elenchi dinamici e statici.

Utilizzo

Il componente Elenco può essere utilizzato per creare, ad esempio, un elenco dinamico di pagine figlie o un elenco statico di elementi definiti arbitrariamente.

Il tipo di elenchi disponibili e le opzioni di formattazione possono essere definite dall'autore del modello nella finestra di dialogo progettazione. L'editor di contenuti può selezionare tra i tipi di elenco disponibili e come formattare gli elementi dell'elenco nella finestra di dialogo di modifica.

Versione e compatibilità

Questo documento descrive la v1 del componente Elenco, introdotto originariamente con la release 1.0.0 dei componenti core con AEM 6.3.

La tabella seguente elenca la compatibilità di v1 del componente Elenco.

Versione di AEM Componente elenco v1
6.3 Compatibile
6.4 Compatibile
ATTENZIONE

Questo documento descrive la versione 1 del componente Elenco.

Per informazioni dettagliate sulla versione corrente del componente Elenco, vedere il documento Componente elenco.

Esempio di output del componente

Esempio tratto da We.Retail.

Schermata

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

L’esportazione JSON dai componenti core richiede la release 1.1.0 dei componenti core. Per ulteriori informazioni, vedere le informazioni sulla compatibilità per i componenti core v1.

Finestra di dialogo Modifica

La finestra di dialogo di modifica consente all’autore del contenuto di configurare l’elenco e gli elementi dell’elenco.

Impostazioni elenco

L'elenco può essere creato in diversi modi.

Indipendentemente dalla modalità di creazione dell'elenco, è sempre possibile configurare Opzioni di ordinamento.

A seconda di come l’autore del contenuto sceglie di generare l’elenco, le opzioni di configurazione aggiuntive cambieranno.

Pagine figlie

È possibile creare l'elenco delle pagine figlie della pagina corrente o di un'altra pagina.

  • Pagina padre
    • La pagina di cui devono essere elencate le pagine figlie
    • Lascia vuoto per utilizzare la pagina corrente
  • Profondità figlio - Quanti livelli della gerarchia devono essere utilizzati

Elenco fisso

L'elenco può essere creato utilizzando un elenco fisso di elementi.

Toccate o fate clic sul pulsante Aggiungi per inserire un nuovo elemento nell'elenco.

  • Immettere il testo per l'elemento nell'elenco oppure utilizzare la finestra di dialogo Selezione per scegliere un elemento dal AEM.
  • Usate la maniglia di trascinamento per ridisporre gli elementi nell’elenco.
  • Utilizzate l'icona del cestino per eliminare gli elementi nell'elenco.

Ricerca

L'elenco può essere creato utilizzando i risultati di una ricerca di AEM contenuto.

  • Query di ricerca - Stringa per la quale verrà eseguita una ricerca full-text per generare gli elementi dell'elenco
  • Cerca in - Dove deve essere eseguita la ricerca
    • Utilizzare la finestra di dialogo Selezione per scegliere la posizione in AEM
    • Usa pagina corrente se lasciata vuota

Tag

L'elenco può essere creato utilizzando pagine che corrispondono a determinati tag presenti in una determinata posizione.

  • Pagina padre - Punto di inizio della corrispondenza del tag
    • Utilizzare la finestra di dialogo Selezione per scegliere la posizione in AEM
    • Usa pagina corrente se lasciata vuota
  • Tag - Quali tag devono corrispondere
    • Utilizzare la finestra di dialogo Sfoglia per selezionare i tag
  • Corrispondenza : consente di definire il tipo di corrispondenza da applicare a una pagina da includere nell'elenco.
    • qualsiasi tag
    • tutti i tag

Opzioni ordinamento

Indipendentemente dalla modalità di creazione dell’elenco, è sempre possibile definire alcune opzioni di ordinamento.

  • Ordina per - Modalità di ordinamento degli elementi
    • Titolo
    • Data ultima modifica
  • Ordina ordine : l'ordine in cui gli articoli devono essere ordinati
    • crescente
    • decrescente
  • Numero massimo elementi - Numero massimo di elementi visualizzati nell'elenco.
    • Lasciate vuoto per restituire tutti gli elementi.

Impostazioni elemento

Utilizzando la scheda Impostazioni elemento, è possibile configurare la formattazione degli elementi dell'elenco.

  • Collega
    elementiCollega elementi alla pagina corrispondente
  • Mostra
    descrizioneMostra le descrizioni dell’elemento di collegamento
  • Mostra
    dataMostra la data di modifica dell’elemento del collegamento

Finestra di dialogo Progettazione

La finestra di dialogo di progettazione consente all’autore del modello di definire i tipi di elenchi da consentire agli autori dei contenuti e le impostazioni degli elementi disponibili.

Impostazioni elenco

Nella scheda Impostazioni elenco è possibile definire il formato della data e il tipo di elenchi da rendere disponibili nel componente per gli autori del contenuto.

  • Formato data - Formato da utilizzare per la visualizzazione dell'ultima data di modifica
  • Disabilita elementi figlio - Disattiva il tipo di elenco degli elementi figlio nel componente
  • Disabilita statica - Disattiva il tipo di elenco statico nel componente
  • Disabilita ricerca - Disattiva il tipo di elenco di ricerca nel componente
  • Disabilita tag - Disattiva il tipo di elenco dei tag nel componente

Impostazioni elemento

Nella scheda Impostazioni elemento è possibile definire le opzioni di formattazione per i singoli elementi dell'elenco che dovrebbero essere disponibili nel componente per gli autori del contenuto.

  • Collega elementi - Opzione Attiva collegamenti elementi nella finestra di dialogo di modifica
  • Mostra descrizioni - Opzione Mostra descrizioni nella finestra di dialogo di modifica
  • Mostra data - Abilita opzione Mostra data nella finestra di dialogo di modifica

Dettagli tecnici

La documentazione tecnica più recente sul componente Elenco è disponibile su GitHub.

L’intero progetto dei componenti core può essere scaricato da GitHub.

Ulteriori dettagli sullo sviluppo di componenti core sono disponibili nella documentazione per lo sviluppo di componenti core.

In questa pagina