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

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

コンテンツ・リストをレンダリングする際、セクション・レイアウトを選択して、返されたすべてのコンテンツ・アイテムをレンダリングするオプションがあります。これにより、表、スライダ、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オプションが表示されます。