Boucles et listes

Les boucles vous permettent de répéter un élément pour chaque entrée d'une liste. Sélectionnez l'élément et, dans son champ Loop Data, choisissez une liste de votre source de données avec une expression. Silex répète l'élément une fois par entrée, et chaque copie affiche les données de sa propre entrée.

C'est ainsi que vous affichez une liste d'articles de blog, un catalogue de produits ou des cartes de membres d'équipe : vous designez un élément, et il se répète pour chaque entrée.

Comment fonctionne une boucle

Loop Data est un champ des réglages de l'élément (icône engrenage en haut du panneau de droite), dans la section Properties. Quand il contient une liste, par exemple posts :

1. Silex récupère la liste depuis votre source de données
2. Il répète l'élément une fois par entrée, avec tout ce qu'il contient
3. Dans chaque copie, le Loop item est l'entrée courante : l'article que cette copie affiche
4. Les éléments à l'intérieur de la copie utilisent le Loop item pour afficher son titre, son image, etc.

Exemple : votre source de données contient 5 articles. Réglez Loop Data sur posts, et l'élément apparaît 5 fois, une fois pour chaque article.

Configurer une boucle

Étape 1 : Créer l'élément — Ajoutez un Container à votre page. C'est l'élément qui se répète. Donnez-lui un nom que vous reconnaîtrez : ouvrez le panneau Calques, double-cliquez sur le nom de l'élément et tapez, par exemple, Post card.

Étape 2 : Le designer — Ajoutez des enfants à l'intérieur (texte pour le titre, image pour l'image mise en avant, lien, etc.). C'est ce qui se répète.

Étape 3 : Remplir Loop Data 1. Sélectionnez l'élément 2. Ouvrez les réglages de l'élément (icône engrenage) 3. Dans Properties, trouvez Loop Data et cliquez sur Expression 4. Cliquez sur + et choisissez la liste dans votre source de données (par exemple posts, puis le champ qui contient la liste si votre API l'enveloppe, comme nodes ou data)

Il n'y a pas de bouton Enregistrer : l'élément se répète dès que l'expression renvoie une liste. Sur le canevas, vous voyez plusieurs clones empilés verticalement (ou arrangés selon votre CSS).

Accéder à l'élément courant dans une boucle

À l'intérieur d'une boucle, « élément courant » désigne les données de ce clone spécifique.

Pour afficher le titre de chaque article dans la boucle :

1. Dans l'élément qui se répète, ajoutez un Text
2. Dans Properties, cliquez sur Expression à côté de HTML content
3. Cliquez sur +, trouvez le groupe qui porte le nom de votre élément (Post card), choisissez Loop item, puis title

Chaque clone affiche son propre titre. Avec des boucles imbriquées, chaque élément en boucle a son propre groupe : c'est pour cela qu'il vaut mieux les nommer.

Exemple pratique : liste d'articles de blog

Scénario : vous voulez afficher une liste d'articles de blog, chacun avec un titre, un extrait et une image.

Les noms de champs ci-dessous (title, excerpt, featured_image) sont des exemples. Votre CMS a les siens : quand vous cliquez sur + dans une expression, le menu liste les vrais champs, choisissez les plus proches.

1. Depuis le panneau Blocs, glissez un Container sur la page. C'est la liste.
2. Stylisez-le avec Flexbox : Display Flex, Flex-wrap wrap, Column-gap 20px (optionnel, juste pour la mise en page).
3. Glissez un second Container dans le premier. C'est une carte d'article. Ouvrez le panneau Calques, double-cliquez sur le nom de la carte et tapez Post card.
4. Glissez dans la carte :
5. un Text pour le titre. Ouvrez les réglages de l'élément (icône engrenage) et passez son Tag name en H2
6. un Text pour l'extrait
7. une Image pour la photo
8. Sélectionnez la carte : le Container Post card lui-même, pas l'un de ses enfants (cliquez dessus dans le panneau Calques pour en être sûr). Ouvrez les réglages de l'élément (icône engrenage). Dans Properties, trouvez Loop Data et cliquez sur Expression. Cliquez sur +, choisissez posts, puis le champ qui contient la liste si votre API l'enveloppe (comme nodes ou data).
9. La carte apparaît maintenant une fois par article.
10. Sélectionnez le titre. Dans les réglages de l'élément, sous Properties, cliquez sur Expression à côté de HTML content. Cliquez sur +, trouvez le groupe Post card, choisissez Loop item, puis title.
11. Sélectionnez l'extrait et faites comme à l'étape 7, en choisissant excerpt à la fin.
12. Sélectionnez l'image. Dans les réglages de l'élément, trouvez Attributes et cliquez sur +. Tapez src et validez. Cliquez sur Expression, puis sur +, et choisissez Post card, Loop item, featured_image, url.
13. Toujours sur l'image, ajoutez un second attribut de la même façon : tapez alt, et choisissez Post card, Loop item, title.
14. Vérifiez le canevas : chaque carte affiche un titre, un extrait et une image différents.

Les noms de champs dépendent de votre CMS : dans WordPress, par exemple, la liste est posts → nodes et l'image featuredImage → node → sourceUrl.

Ajouter des éléments à une carte plus tard

Déposez les nouveaux blocs dans la première carte, ou dans Post card dans le panneau Calques. Ils apparaissent dans toutes les cartes. Un bloc déposé sur une autre copie peut atterrir en dehors de la carte.

Boucles imbriquées

Vous pouvez mettre une boucle dans une autre boucle. Par exemple, afficher chaque article avec la liste de ses commentaires. Cette section repart de la Post card de l'exemple ci-dessus.

Étape 1 : Ajouter l'élément commentaire 1. Glissez un Container dans la première Post card. Il apparaît dans toutes les cartes. Si la liste est vide, par exemple quand vous maquettez avant d'avoir des articles, désactivez d'abord l'aperçu des données (icône tableau dans la barre du haut, Ctrl+Alt+V). 2. Ouvrez le panneau Calques, double-cliquez sur le nom du nouvel élément et tapez Comment.

Étape 2 : Remplir son Loop Data 1. Sélectionnez Comment 2. Ouvrez les réglages de l'élément (icône engrenage) 3. Dans Properties, trouvez Loop Data et cliquez sur Expression 4. Cliquez sur +, trouvez le groupe Post card, choisissez Loop item, puis comments. Si votre API enveloppe la liste, choisissez aussi le champ qui la contient, comme nodes ou data.

Étape 3 : Afficher le texte du commentaire 1. Glissez un Text dans le premier Comment 2. Dans les réglages de l'élément, sous Properties, cliquez sur Expression à côté de HTML content 3. Cliquez sur +. Le menu a maintenant deux groupes : Comment pour le commentaire courant, et Post card pour l'article auquel il appartient 4. Choisissez Comment, Loop item, puis le champ du texte du commentaire (par exemple body)

Pour afficher quelque chose de l'article dans un commentaire, par exemple son titre, choisissez plutôt Post card, Loop item, title. Dans le menu +, chaque Loop item est rangé sous le nom de l'élément qui boucle : c'est pour cela qu'on nomme chaque élément en boucle dans le panneau Calques.

Comme dans l'exemple ci-dessus, les noms de champs comme comments et body dépendent de votre CMS : choisissez les vrais dans le menu +.

Limiter les résultats de boucle avec des filtres

Au lieu de répéter tous les articles, vous pouvez n'afficher que les 3 premiers. Cela se fait avec un filtre à la fin de l'expression Loop Data de Post card.

1. Sélectionnez Post card (cliquez dessus dans le panneau Calques pour en être sûr)
2. Ouvrez les réglages de l'élément (icône engrenage)
3. Dans Properties, trouvez Loop Data. Son expression contient déjà votre liste, par exemple posts, puis nodes
4. Cliquez sur le + à la fin de l'expression, après la liste, et choisissez slice
5. Laissez Fixed sur les deux champs. Dans Start index, tapez 0 (le premier article). Dans le second champ, tapez 3 : le nombre d'articles à afficher. Cliquez sur Apply

La carte se répète maintenant 3 fois, sur le canevas et sur le site publié.

Après une liste, le menu + propose aussi d'autres filtres, comme reverse (la liste à l'envers), sort ou where (garder seulement les éléments dont un champ a une valeur donnée). Ils ne sont pas encore décrits sur cette page.

Index et position dans une boucle

Pour numéroter les cartes (1, 2, 3…), utilisez la position de l'élément courant dans la boucle. Cette section repart de la Post card de l'exemple ci-dessus.

1. Dans Post card, ajoutez un Text
2. Ouvrez les réglages de l'élément (icône engrenage). Dans Properties, cliquez sur Expression à côté de HTML content
3. Cliquez sur + et trouvez le groupe Post card. Sous Loop item, il contient deux entrées pour la position, nommées d'après la carte, par exemple Post card's Post forloop.index et Post card's Post forloop.index0. Le mot du milieu dépend de vos données
4. Choisissez celle qui se termine par forloop.index : elle compte à partir de 1. Celle qui se termine par forloop.index0 compte à partir de 0

Vous pouvez aussi utiliser la position dans une Visibility Condition.

Comportement de l'aperçu dans les boucles

L'aperçu des données affiche votre boucle avec du vrai contenu sur le canevas, toutes les entrées de la liste : vous voyez ainsi le rendu de la mise en page, si les titres longs passent à la ligne ou débordent, et si les images s'affichent.

Désactivez-le (icône tableau dans la barre du haut, Disable data source preview, Ctrl+Alt+V) dans deux cas :

• la liste est vide, et vous voulez quand même designer l'élément
• la liste est longue, et les nombreuses copies rendent la page difficile à maquetter

Si vous avez modifié du contenu dans votre CMS et que le canevas ne le montre pas encore, cliquez sur Refresh data sources, juste à côté (Ctrl+Alt+R). C'est rarement nécessaire. Les deux boutons sont décrits dans Aperçu des données.

En savoir plus

• Lier les données — créer des états en général
• Expressions — comprendre comment chaîner les jetons
• Conditions — masquer/afficher des éléments dans une boucle en fonction des données
• Filtres — transformer les listes (slice, where, reverse, sort, etc.)

---

Quiz

Q1 : Vous voulez répéter un élément pour chaque article de votre blog. Quel champ des réglages de l'élément remplissez-vous ?

• A) HTML content
• B) Loop Data
• C) Visibility Condition

Réponse

B) Loop Data : quand il contient une liste, l'élément se répète une fois par entrée.

Q2 : Dans une boucle, vous voulez afficher le titre de chaque article. Que choisissez-vous dans le menu + ?

• A) posts, puis title
• B) Post card, Loop item, puis title
• C) title seul

Réponse

B) Post card, Loop item, title : le Loop item est l'article courant, celui que cette copie de la carte affiche. Il est rangé sous le nom de l'élément qui boucle.

Q3 : Votre Post card a posts dans son Loop Data, mais elle ne se répète pas sur le canevas. Que vérifiez-vous d'abord ?

• A) Que la liste n'est pas vide, et que vous avez choisi le champ qui la contient (comme nodes ou data)
• B) Que la carte a un nom dans le panneau Calques
• C) Que la page est publiée

Réponse

A) : la carte se répète une fois par entrée de la liste. Si la liste est vide, ou si vous avez choisi posts sans le champ qui contient la liste, il n'y a rien à répéter. Vérifiez aussi que l'aperçu des données est actif (Ctrl+Alt+V).

Q4 : Vous voulez n'afficher que les 3 premiers articles. Que mettez-vous dans le Loop Data de Post card ?

• A) posts, puis first, puis slice
• B) posts (et nodes ou data si besoin), puis slice avec 0 et 3
• C) posts, puis 3

Réponse

B) : dans slice, le premier nombre est le point de départ (0 est le premier article) et le second est le nombre d'articles à afficher.

Q5 : Dans chaque carte d'article, vous voulez afficher les commentaires de l'article. Comment faites-vous la boucle imbriquée ?

• A) Réglez le Loop Data de Post card sur comments
• B) Ajoutez un élément dans Post card, et réglez son Loop Data sur Post card, Loop item, comments
• C) On ne peut pas imbriquer des boucles dans Silex

Réponse

B) : l'élément intérieur se répète une fois par commentaire de l'article courant. Vous trouvez les commentaires sous le Loop item de Post card.