Build a basic listing

Part 1

• From the ChronoConnectivity 6 admin home page, open the "Connections manager"
• Click "new"
• Enter your connection title.
• Go to the "Events" tab, events are like pages, a connection has 3 events by default but you can add more, an event page will do nothing unless you add some content to it, you can either add HTML code or some Connectivity 6 instructions, you can find a list of the supported instructions at the end of this tutorial.
• Since we need to display a list of items, we need to read this data from a database table, the "Functions" section can help us on this task.
• Go to the "Functions" tab and click "Database" then select "Read data".
• There are plenty of options to configure here, but for a basic listing just fill the "Model name" with "Article" and select the Joomla content table, it's name is #__content, where #__ is your database prefix.
• Please take a note of the "function name", its "read_data1" by default, we can change that to "read_articles", and it's strongly advised that you don't use spaces or special characters except - and _ in any "name" field in your app because this may cause conflicts, also names should be UNIQUE, this means that no 2 functions or views should have the same name.
• Now if we go to the "Events" tab and call our new database read function, the connection will retrieve articles in our Joomla database, we can run the new function by writing this code in the "Index" event box: {function:read_articles}, or for simplicity we can use {fn:read_articles}
• By writing the command above, the function will be executed when the event page is accessed, but the data is stored into a variable and need to be displayed somehow, so we will need to use a "View" to accomplish this.
• Let's go to the "Views" section, Connectivity 6 has a "Table" view which can receive the data list of our database read function and display it nicely, to create a new "Table" view, click the "List views" item then select "Table".
• Our new table is called "table1", and we will leave it as its, then we need to provide this table view with the data to be displayed, to do this we need to call the var which holds the data retrieved from the database by the read function, so we should write {var:read_articles} in the "Data provider" setting of our new "table1" view.
• When any function is called (we called our function in the "index" event), the returned data of this function can be used by calling {var:FUNCTION_NAME} and since our database read function was called "read_articles", we had to use {var:read_articles} in the table data provider setting.
• Now we need to set a list of columns for our table to display from the data set provided by the database.
• The data returned by the database has this stucture: [0 => [Model => [field1, field2]], 1 => [Model => [field1, field2]], 2 => [Model => [field1, field2]]], what the table does is that it loops on the data set, one by one, and so we will need to add the columns list in this format: Article.field:Header
• So let's use the following list of fields:
  Article.id:ID
  Article.title:Title
  Article.state:Published
• Now let's go to the "Index" event and make sure that our new view is actually processed, we had a single line here before {fn:read_articles}, now we will add another line to call the table view: {view:table1}
• Save the connection and click the "Open" link in the connections manager!!

Part 2

In Part 2 we will get the list to be auto sorted by the article id and provide a sorting link for the "Title" field, you must read Part1 first.

1. Open the "articles" connection and go to "Functions" > "read_articles".
2. Scroll down to "Sorting settings" > "Order fields", write "Article.id/desc".
3. Save and check the list, we could use "Article.id/asc" for an incresing order.
4. Now to make the title field "sortable", go to "Functions" > "read_articles" > "Sorting settings" > "Sortable fields" and enter "Article.title".
5. Our function is ready to sort by this table field now, but we need to add the sorting link "view", so we go under "Views", click "List elements" and select "sorter".
6. We change the name to "title_sorter", write "Article.title" in the "Field" setting, and write "Title" in the "Content" setting.
7. Now open our table1 view by clicking the link on the left side, and in the "Columns list", we replace "Article.title:Title" with "Article.title:{view:title_sorter}".
8. What we did here is that we used our view instead of the default text header.
9. Let's save the connection and test.
10. Our connection is now sortable by the Article title, in Connectivity v6, you can have more than 1 active sorting field.
11. v6 is very flexible, you can use this sorting view link anywhere in your event to sort the data, for example, we can head to the "Index" event and add {view:title_sorter} BEFORE the {view:table1}, and that would display a sorting link outside the table.