Written
In the 2nd tutorial, we are going to extend our list with extra more features, using the settings under the "Front list > Settings" tab.
Let's open our existing connection, go to the "Front list > Settings".
We are going to add 3 new columns to our list, the "created", "state" and "hits" columns, all from the same content table in Joomla.
Our articles list is not shown completely in one page, and so we are going to add the pagination links, so we should go under "Front list > List display > Table", at the "Header code" box, we should add this: "_PAGINATOR_NAV_", you can find other helpful short-codes under the HELP tab.
This is how our list looks now
We would like to sort my list by the "title" and "hits" columns, so I'm going to add them to the "sortables" box under "Front list > Settings".
We would also like to configure the "state" field to be toggable, switching between 0 and 1, which controls whether the article is published or unpublished, so I'm going to add "Article.state" in the "Binary" box.
However, this is not enough, we need to setup the permissions for the "toggle" action under the "Permissions" tab, I will set "Public" to "Allowed", but you may want to allow this action only for some authenticated users.
Here is how the listing looks like now:
Let's demonstrate the HTML feature, this feature controls the HTML of the column value for each row, so if I set "Article.field:TEST", then all rows under the "field" column are going to display "TEST", regardless of its value.
However, we can use it to display dynamic values based on the current field value, for this we need to use "array()", so, I'm going to disable the binary feature of the "state" column, and replace it by custom HTML, and since we have the "Front Awesome" library loaded, I'm going to use that, here is the code:
"Article.state:array(0 => "<i class='fa fa-times'></i>", 1 => "<i class='fa fa-check'></i>")"
So, in the line above, we display "<i class='fa fa-times'></i>" when the field has value = 0, and "<i class='fa fa-check'></i>" when the field has value = 1, please note that "*" is a wildcard in case you want to match any value unmatched.
The HTML, Links, Images and Fields boxes work the same way, just each of them does a different function as the title tells it.
