Composant Liste list-component
Le composant Liste des composants principaux permet de créer facilement des listes dynamiques et statiques.
Utilisation usage
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é version-and-compatibility
La version actuelle du composant Liste est la version v4, qui a été introduite avec la version 2.22.0 des composants principaux en février 2023. Elle est décrite dans ce document.
Le tableau ci-après présente en détail toutes les versions prises en charge du composant, les versions AEM avec lesquelles les versions du composant sont compatibles et les liens vers la documentation pour les versions précédentes.
Pour plus d’informations sur les versions et les publications des composants principaux, voir le document sur les versions des composants principaux.
Redirections dans les listes redirects
Lorsqu’une page a une cible de redirection (et ce, qu’elle pointe vers une URL externe ou vers une autre page AEM), une liste contenant des liens vers cette cible pointe directement vers l’URL de la cible de redirection.
Exemple redirect-example
- Créez une page A qui redirige vers la page B.
- Créez une page C qui redirige vers
https://aemcomponents.dev - Sur une page D, insérez un composant de liste contenant les pages A et C
- Les liens respectifs générés pointent alors directement vers la page B et
https://aemcomponents.dev
Exemple de sortie de composant sample-component-output
Pour tester le composant de liste et obtenir des exemples d’options de configuration, ainsi que des sorties HTML et JSON, consultez la bibliothèque de composants.
Détails techniques technical-details
La documentation technique la plus récente sur le composant de liste se trouve sur GitHub.
Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux.
Boîte de dialogue de modification edit-dialog
La boîte de dialogue de modification permet à l’auteur du contenu de configurer la liste et les éléments de la liste.
Onglet Paramètres de liste list-settings-tab
La liste peut être générée de différentes manières.
Quelle que soit la façon dont la liste est créée, il existe des options de tri et d’ID 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 child-pages
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
Combien de niveaux dans la hiérarchie doivent être utilisés.
Liste fixe fixed-list
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.
-
Dans le champ Lien, saisissez soit :
- Une URL complète
- Une URL relative au contenu AEM existant
- Vous pouvez utiliser la Boîte de dialogue de sélection pour sélectionner un élément dans AEM.
-
Dans le champ Texte, saisissez le texte qui s’affichera pour le lien dans la liste.
-
Cochez la case si le lien doit s’ouvrir dans un nouvel onglet du navigateur.
Une fois que plusieurs éléments sont créés pour la liste, vous pouvez les classer.
- 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.
Rechercher search-options
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 afin de générer les éléments de la liste. -
Recherche dans
L’emplacement où la recherche doit être exécutée.- Utilisez la boîte de dialogue Sélection pour choisir l’emplacement dans AEM.
- Utilisez la page active si laissée vide.
Balises tags
La liste peut être créée à l’aide de pages qui correspondent à certaines balises sous un emplacement particulier.
-
Page parente
Où la correspondance des balises doit commencer.- Utilisez la boîte de dialogue Sélection pour choisir l’emplacement dans AEM.
- Utilisez la page active si laissée vide.
-
Balises
Les balises qui doivent correspondre.- Utilisez la boîte de dialogue Parcourir pour sélectionner les balises.
-
Correspondance
Définit quel type de correspondance doit qualifier une page à inclure dans la liste.- n’importe quelle balise
- toutes les balises
Options de tri sort-options
Quelle que soit la manière dont vous choisissez de créer la liste, certaines options de tri peuvent toujours être définies.
-
Classer 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.
-
ID : cette option permet de contrôler l’identifiant unique du composant dans le code HTML ainsi que dans la couche de données.
- Si rien n’est indiqué, un ID unique est généré automatiquement et peut être trouvé en examinant la page obtenue.
- Si un ID est spécifié, il incombe à l’auteur de s’assurer qu’il est unique.
- La modification de l’ID peut avoir un impact sur le suivi CSS, JS et de couche de données.
Onglet Paramètres d’élément item-settings-tab
À 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éments : liez des éléments à la page correspondante.
- Afficher la description : affichez les descriptions de l’élément de lien.
- Afficher la date : permet d’afficher la date de modification de l’élément de lien.
- Afficher en tant que teaser : lorsque cette option est cochée, l’élément est affiché comme un teaser.
Onglet Styles styles-tab-edit
Le composant Liste prend en charge le système de style AEM.
Utilisez la liste déroulante pour sélectionner les styles à appliquer au composant. Les sélections effectuées dans la boîte de dialogue de modification ou dans la barre d’outils du composant ont le même effet.
Pour que le menu déroulant soit disponible, les styles doivent être configurés pour ce composant dans la boîte de dialogue de conception.
Boîte de dialogue de conception design-dialog
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 list-settings
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 la date
Format à utiliser pour l’affichage de la date de la dernière modification. - Désactiver les enfants
Désactive le type de liste enfant dans le composant. - Désactiver statique
Désactive le type de liste statique dans le composant. - Désactiver la recherche
Désactive le type de liste de recherche dans le composant. - Désactiver les balises
Désactive le type de liste de balises dans le composant.
Paramètres d’élément item-settings
Dans l’onglet Paramètres d’élément, les options de mise en forme des éléments de liste individuels qui doivent être disponibles dans le composant pour les auteurs de contenu peuvent être définies.
- Lier des éléments
Activez l’option Lier des éléments dans la boîte de dialogue de modification. - Afficher la description
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.
Onglet Styles styles-tab
Le composant d’image prend en charge le système de style AEM.
Couche de données client Adobe data-layer
Le composant Liste prend en charge la couche de données client Adobe.