Composant Liste (v3)

Le composant principal « Liste » (v3) permet de créer facilement des listes dynamiques et statiques.

Utilisation

Le composant « Liste » (v3) 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 v3 du composant « Liste », qui a été introduite avec la version 2.18.0 des composants principaux en février 2022.

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

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

• 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

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

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

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

La liste peut être générée de différentes manières.

• Pages enfants
• Liste fixe
• Rechercher
• Balises

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

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

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 la boîte de dialogue Sélection pour 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.

Rechercher

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

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

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

À 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

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

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

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

Le composant d’image prend en charge le système de style AEM.

Couche de données client Adobe

Le composant Liste prend en charge la couche de données client Adobe.

Ressources Business.Adobe.com