List Component (v1)

El componente Lista de componentes principales permite crear fácilmente listas dinámicas y estáticas.

Uso

El componente Lista se puede utilizar para crear, por ejemplo, una lista dinámica de páginas secundarias o una lista estática de elementos definidos arbitrariamente.

El autor de la plantilla puede definir el tipo de listas disponibles y las opciones de formato en el cuadro de diálogo de diseño. El editor de contenido puede seleccionar entre los tipos de lista disponibles y cómo dar formato a los elementos de la lista en el cuadro de diálogo deedición.

Versión y compatibilidad

Este documento describe la versión 1 del componente Lista, introducida originalmente con la versión 1.0.0 de los componentes principales con AEM 6.3.

La siguiente tabla muestra la compatibilidad de v1 del componente Lista.

Versión de AEM Componente de lista v1
6.3 Compatible
6.4 Compatible
PRECAUCIÓN

Este documento describe la versión 1 del componente Lista.

Para obtener más información sobre la versión actual del componente de lista, consulte el documento Componente de lista.

Ejemplo de salida de componente

El siguiente es un ejemplo tomado de We.Retail.

Captura de pantalla

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

La exportación de JSON desde los componentes principales requiere la versión 1.1.0 de los componentes principales. Consulte la información de compatibilidad de los componentes principales v1 para obtener más información.

Edit Dialog

El cuadro de diálogo de edición permite al autor del contenido configurar la lista y los elementos de la lista.

Ajustes de la lista

La lista se puede crear de diferentes maneras.

Independientemente de cómo se cree la lista, hay opciones de ordenación que siempre se pueden configurar.

Según el modo en que el autor elija crear la lista, cambiarán las opciones de configuración adicionales.

Páginas secundarias

La lista se puede crear con las páginas secundarias de la página actual u otra página.

  • Página principal
    • La página cuyas páginas secundarias deben incluirse en la lista
    • Deje en blanco para utilizar la página actual
  • Profundidad secundaria: cuántos niveles inferiores de la jerarquía se deben utilizar

Fixed List

La lista se puede crear con una lista fija de elementos.

Toque o haga clic en el botón Agregar para insertar un nuevo elemento en la lista.

  • Introduzca texto para el elemento en la lista o utilice el cuadro de diálogo ​Selección para elegir un elemento de AEM.
  • Utilice el controlador de arrastre para reorganizar los elementos de la lista.
  • Utilice el icono de la papelera para eliminar elementos de la lista.

Buscar

La lista se puede crear con los resultados de una búsqueda de contenido de AEM.

  • Consulta de búsqueda: la cadena para la que se ejecutará una búsqueda de texto completo para generar los elementos de lista
  • Buscar en : donde se debe ejecutar la búsqueda
    • Utilice el cuadro de diálogo ​Selección para elegir la ubicación en AEM
    • Usar la página actual si se deja en blanco

Etiquetas

La lista se puede crear con páginas que coincidan con determinadas etiquetas en una ubicación determinada.

  • Página principal: donde debe comenzar la coincidencia de etiquetas
    • Utilice el cuadro de diálogo ​Selección para elegir la ubicación en AEM
    • Usar la página actual si se deja en blanco
  • Etiquetas : qué etiquetas deben coincidir
    • Utilice el cuadro de diálogo Examinar para seleccionar las etiquetas
  • Coincidencia : defina qué tipo de coincidencia debe calificar una página para incluirla en la lista
    • cualquier etiqueta
    • todas las etiquetas

Opciones de ordenación

Independientemente de cómo elija crear la lista, hay ciertas opciones de ordenación que siempre se pueden definir.

  • Orden por : cómo se deben ordenar los elementos
    • Título
    • Fecha de la última modificación
  • Orden : orden en el que se deben ordenar los artículos
    • ascendente
    • descendente
  • Máximo de elementos : número máximo de elementos mostrados en la lista.
    • Deje vacío para devolver todos los elementos.

Ajustes del elemento

Mediante la ficha Configuración de elemento, se puede configurar el formato de los elementos de la lista.

  • Vincular elementos Vincular elementos a la página correspondiente
  • Mostrar descripción Mostrar descripciones del elemento de vínculo
  • Mostrar fecha Mostrar fecha de modificación del elemento de vínculo

Cuadro de diálogo Diseño

El cuadro de diálogo de diseño permite al autor de la plantilla definir los tipos de listas que deben permitirse a los autores de contenido, así como la configuración del elemento disponible.

Ajustes de la lista

En la ficha Configuración de lista, se puede definir el formato de fecha, así como el tipo de listas que deben estar disponibles en el componente para los autores de contenido.

  • Formato de fecha: formato que se usará para mostrar la fecha de la última modificación
  • Deshabilitar elementos secundarios : desactive el tipo de lista de elementos secundarios en el componente
  • Deshabilitar estático : Deshabilitar el tipo de lista estática en el componente
  • Deshabilitar la búsqueda : Deshabilitar el tipo de lista de búsqueda en el componente
  • Deshabilitar etiquetas : deshabilitar el tipo de lista de etiquetas en el componente

Ajustes del elemento

En la ficha Configuración de elemento, se pueden definir las opciones de formato para los elementos de lista individuales que deben estar disponibles en el componente para los autores de contenido.

  • Elementos de vínculo: opción Activar elementos de vínculo en el cuadro de diálogo Editar
  • Mostrar descripciones : activar la opción Mostrar descripciones en el cuadro de diálogo Editar
  • Mostrar fecha : opción Activar la opción Mostrar fecha en el cuadro de diálogo Editar

Detalles técnicos

La documentación técnica más reciente sobre el componente Lista puede encontrarse en GitHub.

Todo el proyecto de componentes principales se puede descargar desde GitHub.

Encontrará más detalles sobre el desarrollo de los componentes principales en la documentación para desarrolladores de los componentesprincipales.

En esta página