Create a Section Layout That Supports Lazy Load

The content list can call the section layout with additional components as they get queried.

When you render a content list, you have the option of selecting a section layout to render all the content items that are returned. This enables you to create various different layouts for the content items, such as a table, a slider, or an eight-column layout. These custom section layouts can also take part in the more advanced pagination features.

Content lists support the following pagination:

Pagination
Load on scroll
Load on click

For the standard pagination feature, the section layout doesn't need to do anything. It will be re-rendered with the next set of items when the user clicks the next page. However, for Load on scroll and Load on click, rather than having the section layout re-render, additional components are added to the section layout. This is used mostly for the infinite scrolling model, where you load the first n items and, as the user scrolls down the page, you fetch and render the next set of items. To support Load on scroll and Load on click, the custom section layout needs to do

render.js: Implement the addComponent() API. This will be called with each new component that is to be added to the section layout.

// 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: Include the following to let the content list know that the section layout supports the addComponent() api.
```
"contentListData": {  
  "addComponent": true
},
```

Once the appInfo.json is updated, when the user selects this section layout in the settings panel and goes to the pagination screen, they will see the Load on click and Load on scroll options.