Lier les données

Une fois que vous avez connecté une source de données, vous affichez ses données dans vos éléments. Sélectionnez un élément, ouvrez les réglages de l'élément (icône engrenage en haut du panneau de droite), et remplissez un champ avec une expression au lieu d'une valeur fixe. Le canevas affiche les vraies données de votre API.

Servez-vous-en pour afficher le titre d'un article dans un texte, la photo d'un article dans une image, ou un lien vers l'article.

Où lier des données

Sélectionnez un élément et ouvrez les réglages de l'élément (icône engrenage). Trois sections acceptent des expressions :

• Properties : HTML content (le texte dans l'élément), Visibility Condition (voir Conditions) et Loop Data (voir Boucles et listes)
• Attributes : les attributs HTML de l'élément, comme href, src ou alt
• States : des valeurs que vous nommez vous-même, pour les partager avec les éléments qu'il contient

Chaque champ a deux boutons : Fixed pour une valeur que vous tapez, Expression pour construire la valeur à partir de vos données. Les changements s'appliquent tout de suite.

Construire une expression

Une expression est une suite de jetons que vous choisissez l'un après l'autre dans un menu. Par exemple, pour obtenir le titre de votre premier article :

1. Cliquez sur Expression à côté du champ, par exemple HTML content, puis sur +. Le menu liste ce que propose votre source de données, par exemple posts
2. Choisissez posts. Si votre API enveloppe la liste, cliquez de nouveau sur + et choisissez le champ qui la contient, comme nodes ou data
3. Cliquez de nouveau sur +. Après une liste, le menu propose les filtres qui s'y appliquent, comme first, last ou slice. Choisissez first pour obtenir un seul article
4. Cliquez de nouveau sur + et choisissez title

L'expression est maintenant posts → first → title (ou posts → nodes → first → title). Sous le champ, Silex affiche la valeur qu'elle donne avec vos données.

Dans le menu, chaque champ affiche son type entre parenthèses, par exemple title (string). {} signifie un objet avec ses propres champs, [] une liste.

Pour changer un jeton, cliquez dessus et choisissez-en un autre dans son menu. Pour tout recommencer, cliquez sur le × à côté du nom du champ.

Afficher des données dans un texte

Pour afficher le titre d'un article :

1. Depuis le panneau Blocs, glissez un Text sur la page
2. Ouvrez les réglages de l'élément (icône engrenage)
3. Dans Properties, cliquez sur Expression à côté de HTML content
4. Construisez posts → first → title, comme ci-dessus

Le texte sur le canevas affiche le vrai titre venant de votre API.

Lier des attributs HTML

Un attribut fixe (sans données) :

1. Sélectionnez l'élément
2. Dans les réglages de l'élément (icône engrenage), trouvez Attributes et cliquez sur +
3. Tapez le nom de l'attribut, par exemple aria-label, et validez
4. Tapez sa valeur, par exemple Navigation principale

C'est utile pour les attributs d'accessibilité. Voir Attributs et rôles ARIA pour les cas courants.

Un attribut tiré de vos données :

1. Sélectionnez l'élément
2. Dans les réglages de l'élément (icône engrenage), trouvez Attributes et cliquez sur +
3. Tapez le nom de l'attribut, par exemple src, et validez
4. Cliquez sur Expression et construisez la valeur, par exemple posts → first → featured_image → url

Les états (States)

Un état est une valeur que vous nommez vous-même. Les éléments qu'il contient peuvent l'utiliser dans leurs expressions. Servez-vous-en pour construire une valeur une fois, par exemple posts → first, et la réutiliser dans plusieurs éléments à l'intérieur.

1. Sélectionnez l'élément qui contient les autres, par exemple un Container. Donnez-lui un nom dans le panneau Calques : double-cliquez sur son nom et tapez, par exemple, Latest post
2. Dans les réglages de l'élément (icône engrenage), trouvez States et cliquez sur +
3. Tapez un nom, par exemple post, et validez
4. Cliquez sur Expression et construisez posts → first

Dans les éléments à l'intérieur de Latest post, cliquez sur + dans une expression : le menu a un groupe qui porte le nom du conteneur, Latest post's states. Choisissez-y post, puis title.

Exemple pratique : le dernier article

Scénario : sur votre page d'accueil, vous voulez afficher le titre, l'extrait et la photo de votre dernier article.

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 Text sur la page pour le titre. Ouvrez les réglages de l'élément (icône engrenage) et passez son Tag name en H2
2. Dans Properties, cliquez sur Expression à côté de HTML content. Cliquez sur + et choisissez posts, puis le champ qui contient la liste si votre API l'enveloppe (comme nodes ou data), puis first, puis title
3. Glissez un second Text en dessous pour l'extrait. Faites comme à l'étape 2, en choisissant excerpt à la fin
4. Glissez une Image en dessous. Dans les réglages de l'élément, trouvez Attributes et cliquez sur +. Tapez src et validez. Cliquez sur Expression, puis construisez posts (et nodes ou data si besoin), first, featured_image, url
5. Toujours sur l'image, ajoutez un second attribut de la même façon : tapez alt, et construisez posts (et nodes ou data si besoin), first, title

Les trois éléments affichent le premier article de la liste. Pour afficher le dernier article publié, la liste doit être triée du plus récent au plus ancien : vérifiez-le dans votre CMS, ou voyez Filtres.

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

Pour afficher une liste d'articles plutôt qu'un seul, voir Boucles et listes.

Aperçu des données

Le canevas affiche vos données tant que l'aperçu des données est actif : icône tableau dans la barre du haut (Enable / Disable data source preview, Ctrl+Alt+V). 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). Les deux boutons sont décrits dans Aperçu des données.

En savoir plus

• Expressions — comprendre les jetons et les chaînes
• Boucles et listes — répéter un élément pour chaque entrée d'une liste
• Conditions — afficher ou masquer un élément selon vos données
• Filtres — référence de tous les filtres de transformation de données

---

Quiz

Q1 : Vous voulez afficher le titre d'un article dans un Text. Quel champ des réglages de l'élément remplissez-vous ?

• A) Un nouvel état nommé title
• B) HTML content
• C) Un nouvel attribut nommé content

Réponse

B) HTML content : il contient le texte dans l'élément. Un état n'affiche quelque chose que si une autre expression l'utilise.

Q2 : Vous voulez afficher la photo d'un article dans une Image, avec une alternative textuelle. Combien d'attributs ajoutez-vous ?

• A) Un : src
• B) Deux : src pour la photo et alt pour l'alternative textuelle
• C) Trois : src, alt et title

Réponse

B) Deux : src avec l'URL de la photo, et alt avec un texte qui la décrit.

Q3 : Vous avez construit une expression dans HTML content, mais le canevas n'affiche pas vos données. Que vérifiez-vous d'abord ?

• A) Que l'aperçu des données est actif (icône tableau dans la barre du haut, Ctrl+Alt+V)
• B) Que l'élément a un nom dans le panneau Calques
• C) Que la page est publiée

Réponse

A) : le canevas n'affiche vos données que tant que l'aperçu des données est actif.

Q4 : Trois éléments dans un Container commencent tous leur expression par posts → first. Comment construire cette valeur une seule fois ?

• A) Ajouter un état (State) au Container, avec l'expression posts → first, et l'utiliser dans les trois éléments
• B) Mettre posts → first dans le HTML content du Container
• C) Mettre posts → first dans le Loop Data du Container

Réponse

A) : un état est partagé avec les éléments qu'il contient. Dans leur menu +, vous le trouvez dans le groupe qui porte le nom du Container. Loop Data répéterait le Container, ce que vous ne voulez pas ici.

Q5 : Dans le menu +, vous voyez author après posts → first, avec {} dans son type. Qu'obtenez-vous si vous vous arrêtez là ?

• A) Un texte (le nom de l'auteur)
• B) Un objet (l'auteur, avec ses propres champs comme name)
• C) Une liste d'auteurs

Réponse

B) Un objet : {} signifie un objet avec ses propres champs. Pour obtenir le nom de l'auteur, cliquez de nouveau sur + et choisissez name : posts → first → author → name.