Création d'une présentation de section qui prend en charge le chargement lazy

La liste de contenu peut appeler la présentation de section avec des composants supplémentaires à mesure qu'ils sont interrogés.

Lorsque vous affichez une liste de contenu, vous pouvez sélectionner une présentation de section pour afficher tous les éléments de contenu renvoyés. Vous pouvez ainsi créer différentes présentations pour les éléments de contenu, telles qu'un tableau, un curseur ou une présentation à huit colonnes. Ces présentations de section personnalisées peuvent également faire partie des fonctionnalités avancées de pagination.

Les listes de contenu prennent en charge les options de pagination suivantes :

  • Pagination
  • Charger lors du défilement
  • Charger au clic

Pour la fonctionnalité de pagination standard, la présentation de section ne doit effectuer aucune action. Elle sera réaffichée avec l'ensemble d'éléments suivant lorsque l'utilisateur clique sur la page suivante. Toutefois, pour les options Charger lors du défilement et Charger au clic, plutôt que de réafficher la présentation de section, des composants supplémentaires sont ajoutés à cette dernière. Cette solution est principalement utilisée pour le modèle de défilement sans fin, qui charge d'abord les n premiers éléments, puis extrait et affiche les ensembles d'éléments suivants au fur et à mesure que l'utilisateur fait défiler la page. Pour prendre en charge les options Charger lors du défilement et Charger au clic, la présentation de section personnalisée doit effectuer certaines actions.

  1. render.js : implémentez l'API addComponent(). Elle sera appelée à chaque nouveau composant ajouté à la présentation de section.

    // dynamic API for adding additional components through "load more" when used in a Content List
               addComponent: function (parentObj, component) {     
                   // create the component div and add it to the parent object
                   $(parentObj).append(this.createComponentDiv(component)); 
               }
  2. appInfo.json : ajoutez le code suivant pour faire savoir à la liste de contenu que la présentation de section prend en charge l'API addComponent().

    "contentListData": {  
      "addComponent": true
    },

Une fois appInfo.json mis à jour, lorsque l'utilisateur sélectionne cette présentation de section dans le panneau des paramètres et accède à l'écran de pagination, il voit les options Charger au clic et Charger lors du défilement.