How to customize the Bootstrap admin Data tables?
(READ lists)

When you create a Data Table from the CRUD Generator several files are generated:

/admin/class/crud/Table.php

The main PHP class

/admin/templates/table.html

The HTML TWIG template

/admin/crud-data/table-filter-data.json

The filters used to filter your records if any

/admin/crud-data/table-select-data.json

Select dropdowns configuration if any

where table is the table that you want to customize.

The two JSON files are used by the internal PHPCG engine to build your datalist filters or select data.
Consider them as private CORE files and don't modify them.

The files we are interested in here are the PHP Class and the TWIG HTML Template.

The Main PHP Class

The Main PHP Class performs the SQL query to your database and retrieves the records from your table.

It will also retrieve the records from the relational tables if they are to be displayed in your data table.

Fields and values are recorded as attributes of the object, in a loop that goes through your records:

if (!empty($this->records_count)) {
    while ($row = $db->fetch()) {
        $this->pk[] = $row->$primary_key;
        $this->my_field[]= $row->my_field;
        // ...
    }
}

Each $row-> is the value which will be displayed in the Data table.

You can apply any function if you want to change them, for instance:

$this->my_field[]= strtolower($row->my_field); // to lowercase
if (!empty($row->my_field)) {
    $this->my_field[]= 'Yes';
} else {
    $this->my_field[]= 'No';
}

The TWIG HTML Template

The TWIG HTML Template retrives the values from the Main PHP Class and builds the HTML data table.

You can easily edit any template part, especially the table <th></th> and <td></td> elements.

Values with HTML code

It often happens that HTML content is stored, which will be edited for example with an RTE (TinyMce).

The TWIG template will by default display HTML tags, while you want to display HTML content.

To do this, we will modify the TWIG template and use the TWIG "raw" filter:

<td>{{ object.last_name[ loop.index0 ]|raw }}</td>

Example of customization with linking to the public website

In the Generator, activate the Open URL button when you build your READ list.
This will add a link icon to each record of your list in the admin panel.

The link is pointing to the domain root, we want to change this link so that it leads to the respective pages of each of the recordings on the public website. Here's how to achieve this.

Let's take the actor table as an example, let's say that each record must open a page https://www.my-website.com/actor-x.php, where x is the index.

1. Open admin/templates/actor.html in your code editor.
2. Find the open url link in the template, that should look like this:

   <td>
       <a href="{{ constant('BASE_URL') }}" rel="noindex" data-delay="500" data-tooltip="{{ constant('OPEN_URL') }}" target="_blank"><span class="{{ constant('ICON_NEW_TAB') }} text-center"></span></a>
   </td>

3. This link will take you to the home page for the moment. To make it point to the actor's page, you have to modify the URL (href) and add the index of the current record:

   <td>
       <a href="{{ constant('BASE_URL') }}/actor-{{ object.pk[loop.index0] }}.php" rel="noindex" data-delay="500" data-tooltip="{{ constant('OPEN_URL') }}" target="_blank"><span class="{{ constant('ICON_NEW_TAB') }} text-center"></span></a>
   </td>

   Here we use the primary key: {{ object.pk[loop.index0] }}.

   It comes from the Actor object in admin/class/crud/Actor.php, which has been passed to the TWIG template.

How to keep your changes if you rebuild your Data Tables?

After making changes in the administration files generated by PHPGC, if you regenerate your READ List, these changes will be overwritten.

Automatic Backup of the Admin files

To avoid data loss:

When you generate the admin panel files, the existing files are saved in the generator backup folder: /generator/backup-files/

File comparison tool

The generator comparison tool allows you to:

• compare the saved versions with the new versions generated
• merge the two available versions by selecting in the two left/right panes the code parts you want to keep.