Structure : Création du composant de page de liste dynamique

Cet organigramme explique comment créer le composant de page de liste dynamique de la conception à partir d'un composant HTML. Le composant de page de liste dynamique est utilisé sur la page Accueil, Produit et Evénements.

Qui doit utiliser cette feuille de route ?

Vous êtes un développeur de l'équipe technique chargée de créer des modèles de page d'accueil et de page d'arrivée que les créateurs de contenu utiliseront sur le site. Vous êtes uniquement chargé de créer les composants de page et les modèles de conception. Les autres développeurs sont chargés de développer d'autres éléments de la conception. Apprenez les bases du développement du composant de page de liste dynamique.

Ressource de documentation : Structure : Determining the design requirements from an HTML prototype.

Création de votre composant de page de liste dynamique

Avant de commencer

Ensure that your design library exists, for example, Greenwheels Design. Si cette bibliothèque n'existe pas, accédez à Création d'une bibliothèque de conception

Procédure

Click the Applications menu icon. Then, click Content > Web Content Authoring.
Accédez à votre bibliothèque de conception
Cliquez sur Nouveau > Composant > Menu pour créer un composant de menu.
1. Entrez un nom pour votre menu.
  Par exemple, tapez Liste.
2. Assurez-vous que votre emplacement est your_design_library > your_dyn_list_page_component.
  Par exemple, vérifiez que l'emplacement est Greenwheels > Liste. Si l'emplacement n'est pas défini, cliquez sur Sélectionner l'emplacement.
3. Cochez la case Chaîne de requête dans la section Autres options, puis entrez le nom de paramètre pour la chaîne de requête.
  Par exemple, tapez chemin_liste.
4. Dans la section Propriétés de conception de menu, vous pouvez également définir les paramètres suivants pour personnaliser votre composant de page de liste dynamique :
  - Ordre d'affichage
  - Trier les résultats par
  - Formatage
5. Entrez les informations suivantes dans la zone de texte Conception de résultats de la section Répertorier le marquage de présentation :
```
[Content context="autofill" renderMode="summary"]
```
  Ce texte affiche le modèle de présentation récapitulative pour chaque élément de la liste.
6. Cliquez sur Enregistrer et fermer.
Click Generate > Page Component.
1. Sélectionnez Annonce comme type de modèle.
2. Entrez un nom de composant de page pour votre annonce.
  For example, type List.
3. Assurez-vous que votre bibliothèque de conception est sélectionnée.
4. Cliquez sur OK.
Cliquez sur le lien suivant dans la boîte de dialogue Information afin de personnaliser le composant de page :
your_design_library > Authoring Templates > your_page_component. Par exemple, cliquez sur Greenwheels Design > Modèles de création > Liste.
Remarque : If you close the Information dialog box, you can follow the path in your design library.
Cliquez sur Editer.
Click Manage Elements.
Supprimez tous les éléments par défaut répertoriés avant de créer un élément personnalisé pour le composant de page.
Créez un élément de liste :
1. Sélectionnez Lien comme type d'élément.
2. Entrez un nom pour votre élément.
  For example, type list_path.
3. Cliquez sur Ajouter.
4. Cliquez sur OK.
Cliquez sur l'onglet Contenu par défaut.
1. Cliquez sur l'icône de propriété de la zone Element_type.
  Par exemple, sélectionnez l'icône de propriété de la zone Lien.
2. Cliquez sur Sélectionner dans la section Restreindre les types de lien.
3. Sélectionnez la case Page de portail pour limiter le type de lien aux pages de portail.
4. Cliquez sur OK.
Cliquez sur les icônes suivantes, cochez la case Masquer la zone, puis cliquez sur Masquer :
- Afficher le lien en tant que
- Propriétés de la zone Texte du lien
- Gestion des références dans la section Attributs de lien
- Description de lien
- Chaîne de requête du lien
- Cible de lien
- Attributs supplémentaires du lien
Click the drop-down menu on the Save and Close button. Ensuite, sélectionnez Sauvegarder et lire.
Cliquez sur Appliquer le modèle de création pour mettre à jour le contenu associé à ce modèle de création.
Cochez les cases Ajouter de nouveaux éléments et Retirer des éléments existants.
Cliquez sur OK.
Click Close to close the authoring template.
Click the following link in the Information dialog box to customize the page component:
your_design_library > Presentation Templates > your_page_component. Par exemple, cliquez sur Greenwheels Design > Modèles de présentation > Liste.
Remarque : If you close the Information dialog box, you can follow the path in your design library.
Cliquez sur Editer.
Supprimez le texte par défaut dans la zone de texte Options de modèle de présentation. Ensuite, entrez les informations suivantes :
```
[IfEditMode]
<p><strong>Configure this list to show items in the path:</strong>
[EditableElement:list_path placeholder="Select context" format="span" callback="location.reload();"]
[Element:list_path format='titlepath']
[/EditableElement:list_path]</p>
[/IfEditMode]

[RequestAttribute key="list_path" value="[Element:list_path format='namepath']"]
[Component name="Greenwheels Design/list/list"]
```
Ce texte permet à Krista de sélectionner le chemin d'où sont issus les éléments de liste. Cette sélection s'affiche uniquement en mode édition. Elle transmet ensuite ce chemin dans le composant de menu en tant que paramètre de requête à l'aide de la balise RequestAttribute. Enfin, elle affiche le composant de menu.
Cliquez sur Enregistrer et fermer.

Résultats

Le créateur de contenu peut à présent passer en mode Edition et ajouter le composant de page de liste dynamique au modèle de page d'arrivée. Le créateur de contenu définir le chemin de liste en sélectionnant la page de contenu qui comporte des articles ou des événements. La liste est ensuite affichée sur le modèle de page d'arrivée.