Now we move onto the Datacard display mechanism. The textual content of an Administration is not an excellent candidate for a Datacard display but we wanted to test and show how it works, so we chose Models for that purpose. The Datacard display is an excellent choice for facilities such as the Gallery and in the future for small collections of stock items and other ideas where the card contains an image or graphic.


Unlike the Datagrid, the Datacard depends for its structure and layout upon HTML that is formatted by the Bootstrap 4 style sheet and is coded into the component template - datacard.tpl.


The Datacard component template for use in the Admin system will be found in /admin/components/. The content of the component template starts with an ordered list (<ol />) which contains the Breadcrumb bar and top buttons.


The template then creates a container and within that container a row, according to the standard administrative template. There is no out card or card block. Each card that is displayed appears as a separate card against the page background. This gives each item a sense of separation and individuality. Each Card is a standard Bootstrap 4 conformant Card and Card-block, styled with the Bootstrap 4 CSS.


There is an outer Div with the ID of datacard, which will be used by the Vue repeater to provide replicable content for cards. The display can either have a static first Card in which buttons such as as Add Record can be displayed, or an Add and other buttons, can be added to the Topbuttons array configuration. The existence of a static card is determined by the existence of text in the configuration variable, entitled admfooter - leave blank for no static card.


The standard and repeatable Card is controlled by a Vue repeater. The current template displays "c_reference" as a header and "c_common" as a sub-header. Below this text block are the opportunities for four links offering facilities to List, View, Edit and Delete the record identified by the Card.


Unlike the phrases we used at this point in the description of the Datatable, this template demonstrates a different approach to how a template may be used. It does not publish variables that have been transformed by the template engine, in this template, the same positions are occupied by callable methods directly.


<!-- List -->

<a href="#" role="button" class="btn btn-link btn-sm pad5 m0 hint--top" aria-label="@(Q::cStr('111:Display records'))" v-on:click="listButton($event, card, key)">@(Q::cStr('101:List'))</a>

Card Configuration

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

Service record

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


[options]

       viewwidth = 760

       viewheight = 600


; Top buttons

[topbuttons]

[topbuttons:reportbutton]

       class = 'primary'

       icon = 'flag-o'

       title = '287:Report'

       order = 'b'


[topbuttons:resetbutton]

       class = 'warning'

       icon = 'refresh'

       title = '122:Reset'

       order = 'c'


[topbuttons:helpbutton]

       class = 'info'

       icon = 'info'

       title = '85:Help'

       order = 'x'


In practice, we only have two sections - the first relating to the size of a popup and the second relating to Topbuttons.

Collection Record

In the Collection record we see only a dummy URL to display an individual record in a view.


[datacard]

       ; Settings needed by the Datatable display and process routine but not as Dt options

       [datacard:xtra]

               viewurl = '/ajax/{common.lcd}/getview/dbcollection/'


Model Record

Finally in our example Model record, we find the following:


[datacard]

       [datacard:options]

               viewwidth = 760 ; Used by view

               viewheight = 600

               title = '9999:Models'


       [datacard:columns]

               c_reference = '5:Reference'

               c_category = ''

               c_parent = ''

               c_document = ''


       ; Top buttons

       [datacard:topbuttons]

       [datacard:topbuttons:resetbutton]

               class = 'warning'

               icon = 'refresh'

               title = '122:Reset'

               order = 'a'

       

       [datacard:topbuttons:helpbutton]

               class = 'info'

               icon = 'info'

               title = '85:Help'

               order = 'x'


The template for the individual Datacard does not use labels but if it did, these would be provided in the sub-array, entitled "columns". In the dispaly Method, there is an array ordering function which as part of its activities, creates a temporary array with order as its key. Thus, if two buttons have the same order characters, the second one will overwrite the first. In addition the configuration for the Resetbutton in the Service record is overwritten by the configuration in the Model record.


Created with the Personal Edition of HelpNDoc: Create help files for the Qt Help Framework