遅延ロードをサポートするセクション・レイアウトの作成

コンテンツ・リストは、問合せを実行する際に、追加コンポーネントとともにセクション・レイアウトを呼び出すことができます。

コンテンツ・リストをレンダリングする際、セクション・レイアウトを選択して、返されたすべてのコンテンツ・アイテムをレンダリングするオプションがあります。これにより、表、スライダ、8列レイアウトなど、コンテンツ・アイテムに対して様々なレイアウトを作成できます。これらのカスタム・セクション・レイアウトは、さらに高度なページ区切り機能の一部を使用することもできます。

コンテンツ・リストでは、次のページ区切りがサポートされています:

ページ区切り
スクロール時にロード
クリック時にロード

標準のページ区切り機能では、セクション・レイアウトは何も実行する必要がありません。ユーザーが次のページをクリックすると、次のアイテム・セットで再度レンダリングされます。ただし、セクション・レイアウトを再度レンダリングするのではなく、「スクロール時にロード」および「クリック時にロード」については、セクション・レイアウトに追加のコンポーネントが追加されます。これは、ほとんどの場合、最初のnアイテムをロードし、ユーザーがページをスクロール・ダウンして次のアイテム・セットをフェッチおよびレンダリングする無限スクロール・モデルに使用されます。「スクロール時にロード」および「クリック時にロード」をサポートするには、カスタム・セクション・レイアウトの実行が必要です。

render.js: addComponent() APIを実装します。これは、セクション・レイアウトに追加される新規コンポーネントごとに呼び出されます。

// 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)); 
           }

appInfo.json: 次を含めて、コンテンツ・リストに、セクション・レイアウトが addComponent() apiをサポートしていることを知らせることができます。
```
"contentListData": {  
  "addComponent": true
},
```

appInfo.jsonを更新した後、ユーザーが設定パネルでこのセクション・レイアウトを選択し、ページ区切り画面に移動すると、Load on clickおよびLoad on scrollオプションが表示されます。