Cliqon currently supports two heirarchical Trees. Both are Javascript based and both rely on the production of a virtually plain unordered list in HTML, with a minimum of presentational classes within the code.

The Javascript Trees then convert these lists into a tree display. The one that we use primarily, is jqTree but it does have some disadvantages related to drag, drop and reordering which the Gijgo tree is better at handling.

On this occasion, the admdatatree template located in /admin/components/, does not contain any special HTML layout related to the trees. The content of the component template starts with an ordered list (<ol />) which contains the Breadcrumb bar and top buttons. It then creates a container and within that container a row, according to the standard administrative template. There is no outer card or card block, instead there are two columns. The first will become the tree with a header and the second is a card and card-block displaying a column form or a results bloc.

Tree Configuration

The following paragraphs and code examples will explain how we configure and implement the Datatree. As we have previously explained, Datatree follows the standard configuration of having three component configurations to create a Tree.

Service record

Starting with the Service record for "datatree" in our ubiquitous TOML format.

treetype = 'jqtree'

leftcolwidth = 6

rightcolwidth = 6


       ; Id


               type = 'text'

               class = 'bold' ; span class


               type = 'text'

               class = '' ; span class



               type = 'text'

               class = '' ; span class



               tooltip = '112:View row'

               icon = 'eye'



               tooltip = '339:Add child record'

               icon = 'plus'

; Top buttons



               class = 'primary'

               icon = 'flag-o'

               title = '287:Report'

               tooltip = '287:Report'

               formtype = 'columnform'

               order = 'q'



               class = 'info'

               icon = 'info'

               title = '85:Help'

               tooltip = '85:Help'

               order = 'x'

The Service record commences with a few key value pairs that dictate which tree is being used. The default being jqtree. The width of the two columns is confirmed. The concept of a new value where the total of the two values is 12, relates to the fact that Cliqon uses a Bootstrap template stylesheet and that the configuration of CoreUI CSS for Cliqon, normally uses a grid of 12 units. Thus two values of 6 represents 50% per column of whatever width the Administration page is displaying.

We want an individual row or line in a Tree to be able to display its data in a semi structured format. In practice we want to represent a Tree Grid. To achieve this we use the modern CSS mechanism to emulate a table through the use of Divs or Spans with table-row and table-cell characteristics. To do this we need to be able to specify the "columns" of data which will be separated into individual Spans with a table-cell Class attribute.

The advantage of using this mechanism, is that modern browsers emulate the rest of the table structure from the existence of the table-cell Class attribute on a Span or Div.

Thus the second sub-array in the Service record names the columns and sets their display type, if special formatting is required.

To the right of each row, we have a series of icons which provide maintenance facilities for that line, including the ability to add a child to this row. The icon sub-array supports the following attributes:

the key is used as the action for the click event - edit record, view record or add child

a tooltip is provided to assist users understand what the icon provides. This is a standard language string reference which is transformed by the data retrieval mechanism into a meaningful label

the significant part of a Fontawesome icon should be specified (fa-plus or fa-trash)

The third and final sub-array, is the collection that creates the Top Buttons on the page including Add Root Level record, Help and print a list of records.

Collection record

For our example administrative left side menu, there is no meaningful configuration at Collection level

Model Record

Equally there are not many configuration entries in the Model record. Those that exist are:


dataurl = '/ajax/en/gettreedata/dbcollection/admleftsidemenu/'


class = 'success'

icon = 'plus'

title = '100:Add'

formtype = 'popupform'

order = 'a'

The important URL from which the content of the tree will be fetched is added at this level and an Add record button is added to the collection of page header buttons.

Created with the Personal Edition of HelpNDoc: What is a Help Authoring tool?