Creating a content list

Creating a content list view  is a very common development task, this article shows you how you can do that in Kooboo using the visual view designer. 

First Create a view, and add the data source and do view binding. 

Add Data Source

On the right corner of View editing screen,  click the "Data source" tab.  Click the + icon to add a new datasource to this view.  

In the popup window,  you can see the available Data source. select the data source as ContentList - ByFolder, change the Alias name to 'blog_list', then click 'Next'.

On the next screen, select the 'Blog Article' folder and click 'Save'.

Creating an item list

Switch back to the 'Data binding' tab, in the main screen of view editing screen, we assume that you already have a sample blog list on it.  This is the blog list, we need to build a repeater that render all the blogs.

You can either select the outermost frame on the preview window as below.

or just click the first <div> on the 'Code' window, that is the element we need to repeat. 

Make sure you pick the correct <div>, there will be a red outline shows up on your selected item. Click the 'Repeat' button to create a repeater.

Select the repeat item to 'blog_list'. Remember to check 'Repeat self' since we need to repeat the parent element of this DOM. Click 'Save'.

Data Binding

Now we need to bind data to each field. First we will bind the title. Select the title block on the screen as shown below and click 'Data' button under the data binding section.

Select 'blog_list_item.Title' since we want to display the title. Click 'Save' and bind data for the publish date and main content like this.

We will bind the 'Read more' link at next section. For now just click 'Save and Return' to save the view.