Système de gestion de contenu (CMS) : Afficher le contenu de la collection dans un tableau

Temps de lecture : 14 min
Affichez le contenu de votre collection du système de gestion de contenu (CMS) dans un tableau sur votre site.

Lorsque vous connectez le tableau à un dataset qui se rapporte à votre collection, les champs apparaissent en colonnes et les éléments apparaissent en lignes. Par défaut, les types de champs pris en charge qui sont définis comme visibles apparaissent automatiquement dans votre éditeur lorsque vous vous connectez au système de gestion de contenu (CMS). Vous pouvez ensuite gérer l'ordre des colonnes et choisir parmi plusieurs panneaux de paramètres pour personnaliser l'apparence et le comportement de la table.
Une capture d'écran montrant un exemple de tableau connecté au CMS.

Étape 1 | Créer une collection

Créez une collection d'éléments multiples que vous utiliserez pour stocker le contenu qui apparaît dans votre tableau. Vous pouvez ajouter manuellement les champs et les éléments ou les importer à partir d'un fichier CSV.

Pour créer une collection :

  1. Accéder au CMS dans le tableau de bord de votre site. Vous pouvez également cliquer sur CMS  dans votre Éditeur.
  2. Cliquez sur Créer une collection
  3. Saisissez un nom pour votre collection. 
  4. Laissez Plusieurs éléments (par défaut) sélectionné et cliquez sur Créer
  5. Ajoutez des champs à votre collection manuellement ou en important un fichier CSV :
  6. Configurez les autorisations pour la collection : 
    1. Cliquez sur Plus d'actions et sélectionnez Autorisations et confidentialité
    2. Cliquez sur le menu déroulant Que souhaitez-vous stocker dans cette collection ? et sélectionnez une option. Si nécessaire, vous pouvez cliquer sur les menus déroulants pour ajuster qui peut voir, ajouter, supprimer et mettre à jour du contenu. En savoir plus sur la configuration des autorisations de collection
    3. Cliquez sur Enregistrer
Une capture d'écran montrant les autorisations de la collection et les paramètres de confidentialité.

Étape 2 | Ajouter une table à votre page

Choisissez parmi plusieurs tableaux prédéfinis à ajouter à votre Éditeur. Vous connecterez et personnaliserez entièrement la table plus tard. 
Éditeur Wix
Éditeur Studio
  1. Accédez à votre Éditeur.
  2. Cliquez sur Ajouter des éléments  à gauche de l'éditeur.
  3. Cliquez sur Liste.
  4. Cliquez sur Tableaux.
  5. Cliquez et faites glisser le tableau que vous souhaitez utiliser sur la page. 
Une capture d'écran de l'ajout d'une table dans l'Éditeur Wix.

Étape 3 | Connecter le tableau à votre collection du CMS

Les types de champs de votre collection qui sont pris en charge apparaissent automatiquement dans le tableau une fois que vous connectez le tableau à un dataset qui se rapporte à votre collection. Vous pouvez ensuite ajouter des liens aux colonnes, tels que des liens vers les pages d'éléments dynamiques, afin que les visiteurs puissent naviguer vers les liens en cliquant sur des éléments dans les colonnes. 
Éditeur Wix
Éditeur Studio
  1. Cliquez sur l'élément du tableau sur votre page.
  2. Cliquez sur l'icône Connecter au Système de gestion de contenu (CMS ) .
  3. Cliquez sur le menu déroulant Choisir un dataset et sélectionnez un dataset qui se connecte à votre collection. Vous pouvez également cliquer sur Créer un nouveau dataset, puis choisissez la collection à laquelle vous souhaitez connecter, donnez-lui un nom et cliquez sur Créer.
  1. Cliquez sur les menus déroulants correspondants sous Connexions pour choisir les champs de collection qui se connectent à chaque colonne. 
  2. (Facultatif) Connectez les éléments de la colonne à leurs pages d'éléments dynamiques ou à d'autres emplacements :
    1. Cliquez sur le menu déroulant la colonne [Nom du champ] connecte à correspondant. 
    2. Sélectionnez la page d'élément dynamique répertoriée comme [Nom de la collection] (Élément) ou choisissez une autre option de lien.
    3. Répétez cette étape pour chaque élément de colonne que vous souhaitez connecter. 
  1. (Facultatif) Ajoutez une autre colonne au tableau : 
    1. Cliquez sur la colonne Ajouter une colonne en bas du panneau Connecter la table sur la droite. 
    2. Cliquez sur le menu déroulant Choisir une colonne et sélectionnez le champ de collection auquel vous souhaitez connecter. 
    3. Cliquez sur Ajouter une colonne

Étape 4 | Personnaliser votre tableau

Vous pouvez maintenant affiner le tableau pour qu'il ait l'aspect que vous souhaitez. Réorganisez, renommez ou supprimez des colonnes, puis choisissez parmi plusieurs options dans les panneaux Paramètres, Mise en page et Design. Vous pouvez ensuite faire glisser les bords de votre tableau pour ajuster sa taille et sa position. 
Éditeur Wix
Éditeur Studio
  1. Cliquez sur l'élément du tableau sur votre page.
  2. Cliquez sur Gérer le tableau et choisissez ce que vous souhaitez faire :
    • Réorganiser : Cliquez sur l'icône Réorganiser  à côté de la colonne concernée et faites-la glisser vers le haut ou vers le bas.
    • Modifier le nom de la colonne : Survolez la colonne concernée, cliquez sur l'icône Plus d'actions , et sélectionnez Modifier le libellé. Saisissez le nouveau nom et cliquez sur Terminer.
    • Supprimer la colonne : Survolez la colonne concernée, cliquez sur l'icône Plus d'actions , et sélectionnez Supprimer.
    • Gérer les connexions : Cliquez sur Gérer les connexions pour modifier les connexions du système de gestion de contenu (CMS). Cliquez ensuite sur les menus déroulants correspondants pour choisir les champs de collection qui se connectent à chaque colonne et définir des liens pour les éléments.
  1. Cliquez sur l'icône Paramètres  et choisissez parmi les options suivantes : 
    • Le clic sélectionne : Choisissez ce qui est sélectionné dans le tableau lorsque les visiteurs cliquent sur une cellule : Rien, Les rangées ou Les cellules.
    • Les liens s'ouvrent dans : Si vous avez connecté des éléments, choisissez s'ils s'ouvrent dans une nouvelle fenêtre ou dans la fenêtre actuelle. 
    • Format de date : Si vous avez connecté un type de champ Date, choisissez un format dans lequel les dates s'affichent. 
  2. Cliquez sur l'icône Mise en page  pour choisir la hauteur de la table, les options d'affichage de l'en-tête, la taille des lignes et des colonnes, l'alignement du contenu et la pagination. 
  3. Cliquez sur l'icône Design  pour sélectionner un design prédéfini, puis cliquez sur Personnaliser le design pour optimiser l'apparence de votre table. 
  4. Cliquez sur l'icône Étiré  si vous souhaitez que la table s'adapte à la largeur de votre site. 
  5. Cliquez et faites glisser les bords du tableau pour le redimensionner. 
Remarque :
Pour modifier un nom de champ de collection, activez le mode développeur dans votre éditeur. Accédez ensuite à votre collection et modifiez le champ concerné pour modifier son nom de champ. 

Étape 5 | Gérer les paramètres du dataset

Configurez le mode dataset, ajoutez des filtres qui empêchent certains éléments d'apparaître et ajoutez des options de tri pour contrôler l'ordre dans lequel les éléments s'affichent dans votre tableau. Votre tableau affiche tous les éléments de collection qu'il peut lire à partir du dataset, de sorte que le champ Nombre maximum d'éléments affichés ne s'applique pas aux tableaux.
Éditeur Wix
Éditeur Studio
  1. Cliquez sur le dataset puis sur Paramètres du dataset
  2. Cliquez sur le menu déroulant Mode Ensemble de données et sélectionnez une option :
Remarque :
Le champ Nombre maximum d'éléments affichés ne s'applique pas aux tables. Vous pouvez limiter le nombre d'éléments affichés en cliquant sur l'icône Mise en page  , puis en définissant une hauteur de table personnalisée et en activant la pagination. 
  1. (Facultatif) Cliquez sur + Ajouter un filtre pour afficher uniquement des éléments spécifiques dans le tableau. 
  2. (Facultatif) Cliquez sur + Ajouter le tri pour choisir l'ordre dans lequel les éléments de la collection apparaissent dans le tableau.

FAQ

Cliquez ci-dessous pour obtenir des réponses aux questions courantes sur l'affichage du contenu du système de gestion de contenu (CMS) dans des tableaux. 

Cela vous a-t-il aidé ?

|