Ajouter du contenu au Répéteur

Quand un Répéteur est ajouté , ce dernier contient une mise en page prédéfinie avec les sections En-tête, Disposition, Pied de page et Aucune correspondance. Seule la section Disposition est obligatoire et visible par défaut.

Un Répéteur est comme une toile blanche dans laquelle les composants de Mise en page et Contenu peuvent être ajoutés.

 

Ajouter des éléments de la mise en page

La première étape consiste à ajouter les lignes, avec ou sans contenu. Cela signifie qu'au sein d'un Répéteur, vous pouvez ajouter des blocs de mise en page ayant jusqu'à 4 colonnes.  

Exemple : Nous souhaitons une image avec en dessous le prix et un bouton pour plus de détails. Pour cela, ajoutons dans la section Disposition une ligne d'une colonne pour l'image et en dessous une ligne de deux colonnes pour le texte et le bouton. Comme nous n'utilisons pas d'en-tête ni de pied de page, nous allons masquer ces sections (dans la fenêtre des propriétés du Répéteur).

Exemple :

Remarque : le Répéteur ci-dessus n'aura qu'une seule colonne d'éléments. Ainsi, chaque élément suivant s'affiche en dessous du précédent. Si vous définissez le Répéteur sur trois colonnes d'éléments, le contenu Élément ci-dessus sera répété trois fois, l'une après l'autre, comme ceci :

Pour les 2e et 3e éléments dans le Répéteur à trois colonnes, l'Espace réservé s'affiche, mais vous ne pouvez pas effectuer de changements. Toute configuration de l'élément s'effectue dans la première. Les deux autres héritent de la première.

 

Ajouter du contenu

L'étape suivante consiste à définir le type d'informations que vous souhaitez afficher pour chaque élément. Pour ce faire, cliquez sur le composant pour ajouter du contenu.

Exemple: Ajoutez une image à la première ligne et un texte et un bouton à la seconde. Le résultat se présente comme suit :

 

Définir la source de contenu

La dernière étape consiste à indiquer ce qui doit être utilisé comme source de contenu pour chacun de ces composants de contenu. Étant donné que nous souhaitons afficher ici des informations issues de la sélection de données définie pour ce Répéteur, nous devons utiliser des champs de personnalisation de la sélection de données.

Exemple: Pour une image, à lieu d'utiliser une image de la bibliothèque, nous pointons vers le champ de la sélection de données contenant l'image de l'élément. Sélectionnons d'abord la section Contenu de l'image pour accéder aux propriétés. Cliquons ensuite sur le champ SRC puis sur l'icône de personnalisation.
La boîte de dialogue Personnalisation s'affiche.
Étant donné qu'une sélection de données est liée au Répéteur, vous avez accès à tous les champs de la sélection de données. Sélectionnez celui qui contient l'image. Tout comme pour les composants Image, vous pouvez définir un autre texte et ajouter un lien (exemple : page Produits).

Exemple: l'image utilisée dans le Répéteur pointe vers l'URL de l'élément. Le lien peut ne pas exister et doit être créé, et dans ce cas pointer vers l'URL de l'élément.
.
Cliquez sur le bouton + pour créer un nouveau lien :

La page de dialogue Ajouter un lien s'affiche. Dans le champ Cible, cliquez sur l'icône Personnalisation pour accéder à la boîte de dialogue Personnalisation, puis sélectionnez le champ contenant l'URL du produit.
La valeur suivante est renvoyée dans le champ Cible


 

Exemple: Pour le composant Texte, dans la barre d'outils du composant, allez à la boîte de dialogue Personnalisation, développez le dossier de la sélection des données et sélectionnez la description de l'élément ou le nom. Comme pour tout texte, vous pouvez définir le style ici.

 

Exemple: Vous pouvez procéder de même pour le bouton et afficher le contenu de l'élément comme texte dans le bouton ou simplement définir du texte. Vous pouvez également ajouter du style.
Le lien du bouton peut également être personnalisé, avec par exemple un URL d'élément stocké dans la source de données.