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.

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

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.

• Pages enfants
• Liste fixe
• Rechercher
• Balises

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 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 pour générer les éléments de la liste.
• Rechercher dans - 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 - Emplacement 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 - Quelles balises doivent correspondre.
  • Utilisez la boîte de dialogue Parcourir pour 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.

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

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.

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.

• Lier les éléments - Activez l’option Éléments de lien 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.

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.

Ressources Business.Adobe.com