TOPICS×
Composant Liste (v1)
Le composant principal Liste permet de créer facilement des listes dynamiques et statiques.
Utilisation
Le composant Liste peut servir à créer, par exemple, une liste dynamique de pages enfants ou une liste statique d’éléments définis de manière arbitraire.
Le type de liste disponible et les options de mise en forme peuvent être définis par l’auteur du modèle dans la
boîte de dialogue de conception
. L’éditeur de contenu peut sélectionner les types de liste disponibles et mettre en forme les éléments de liste dans la
boîte de dialogue de modification
.
Version et compatibilité
Ce document décrit la version v1 du composant Liste, introduite à l’origine avec la version 1.0.0 des composants principaux avec AEM 6.3.
Le tableau suivant répertorie la compatibilité de la version v1 du composant Liste.
Version d’AEM
| Composant Liste v1
|
---|---|
6.3
| Compatible
|
6.4
| Compatible
|
Ce document décrit la version v1 du composant Liste.
Pour plus d’informations sur la version actuelle du composant Liste, voir
le document Composant Liste
.
Exemple de sortie de composant
Voici un exemple extrait de
We.Retail
.
Capture d’écran

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" }
L’exportation JSON à partir des composants principaux nécessite la version 1.1.0 des composants principaux. Pour plus d’informations, voir les
informations de compatibilité des composants principaux v1
.
Boîte de dialogue de modification
La boîte de dialogue de modification permet à l’auteur du contenu de configurer la liste et les éléments de la liste.
Paramètres de liste
La liste peut être générée de différentes manières.
Quelle que soit la création de la liste, il existe des
Options de tri
qui peuvent toujours être configurées.

Selon la manière dont l’auteur du contenu choisit de construire la liste, les options de configuration supplémentaires changent.
Pages enfants
La liste peut être créée à partir des pages enfants de la page active ou d’une autre page.

- Page parente
- Page dont les pages enfants doivent faire la liste.
- Laissez vide pour utiliser la page active.
- Profondeur -enfant- Nombre de niveaux vers le bas dans la hiérarchie.
Liste fixe
La liste peut être créée à l’aide d’une liste fixe d’éléments.

Appuyez ou cliquez sur le bouton
Ajouter
pour insérer un nouvel élément dans la liste.
- Entrez le texte de l’élément dans la liste ou utilisez laboîte de dialogue Sélectionpour choisir un élément dans AEM.
- Utilisez la poignée de glisser-déplacer pour réorganiser les éléments de la liste.
- Utilisez l’icône de corbeille pour supprimer les éléments de la liste.
Recherche
La liste peut être créée à l’aide des résultats d’une recherche de contenu AEM.

- Requête de recherche- Chaîne pour laquelle une recherche de texte intégral est exécutée pour générer les éléments de la liste.
- Rechercher dans- Emplacement où la recherche doit être exécutée.
- Utilisez laboîte de dialogue Sélectionpour choisir l’emplacement dans AEM.
- Utilisez la page active si laissée vide.
Balises
La liste peut être créée à l’aide de pages qui correspondent à certaines balises sous un emplacement particulier.

- Page parente- Emplacement où la correspondance des balises doit commencer.
- Utilisez lala boîte de dialogue Sélectionpour choisir l’emplacement dans AEM.
- Utilisez la page active si laissée vide.
- Balises- Quelles balises doivent correspondre.
- Utilisez la boîte de dialogueParcourirpour sélectionner les balises.
- Correspondance- Définissez le type de correspondance à associer à une page à inclure dans la liste.
- n’importe quelle balise
- toutes les balises
Options de tri
Quelle que soit la manière dont vous choisissez de créer la liste, certaines options de tri peuvent toujours être définies.

- Trier par- Comment les éléments doivent être triés.
- Titre
- Date de dernière modification
- Ordre de tri- Ordre dans lequel les éléments doivent être triés.
- croissant
- décroissant
- Nombre maximal d’éléments- Nombre maximal d’éléments affichés dans la liste.
- Laissez vide pour renvoyer tous les éléments.
Paramètres d’élément
À l’aide de l’onglet
Paramètres d’élément
, la mise en forme des éléments de liste peut être configurée.

- Lier des élémentsLiez des éléments à la page correspondante.
- Afficher la descriptionAffichez les descriptions de l’élément de lien.
- Afficher la datePermet d’afficher la date de modification de l’élément de lien.
Boîte de dialogue de conception
La boîte de dialogue de conception permet à l’auteur du modèle de définir les types de listes à autoriser aux auteurs de contenu ainsi que les paramètres d’éléments disponibles.
Paramètres de liste
Dans l’onglet
Paramètres de liste
, le format de date peut être défini et le type de liste doit être disponible dans le composant pour les auteurs de contenu.

- Format de date- Format à utiliser pour l’affichage de la date de la dernière modification.
- Désactiver les enfants- Désactivez le type de liste enfants dans le composant.
- Désactiver statique- Désactivez le type de liste statique dans le composant.
- Désactiver la recherche- Désactivez le type de liste de recherche dans le composant.
- Désactiver les balises- Désactivez le type de liste des balises dans le composant.
Paramètres d’élément
Dans l’onglet
Paramètres d’élément
, les options de formatage des éléments de liste individuels qui doivent être disponibles dans le composant pour les auteurs de contenu peuvent être définies.

- Éléments de lien- Activez l’option Éléments de lien dans la boîte de dialogue de modification .
- Afficher les descriptions- Activez l’option Afficher les descriptions dans la boîte de dialogue de modification .
- Afficher la date- Activez l’option Afficher la date dans la boîte de dialogue de modification .
Détails techniques
La documentation technique la plus récente sur le composant de liste
se trouve sur GitHub
.
Le projet sur les composants principaux peut être téléchargé depuis GitHub.
Vous trouverez plus d’informations sur le développement des composants principaux dans la
documentation destinée aux développeurs de composants principaux
.