Comment personnaliser les tableaux de données de Bootstrap admin ?
(READ lists)

Les tableaux de données Bootstrap Admin peuvent être personnalisés à l'aide de leur classe PHP principale et de leur modèle TWIG disponible dans le dossier admin.


Organisation des dossiers relatifs aux tableaux de données administratives

Lorsque vous créez une table de données à partir du générateur CRUD, plusieurs fichiers sont générés :

/admin/class/crud/Table.php
La classe principale de PHP
/admin/templates/table.html
Le modèle HTML TWIG
/admin/crud-data/table-filter-data.json
Les filtres utilisés pour filtrer vos enregistrements, le cas échéant
/admin/crud-data/table-select-data.json
Configuration des listes déroulantes, le cas échéant

table est la table que vous souhaitez personnaliser.

Les deux fichiers JSON sont utilisés par le moteur interne de PHPCG pour construire vos filtres de liste de données ou sélectionner des données.
Considérez-les comme des fichiers CORE privés et ne les modifiez pas.

Les fichiers qui nous intéressent ici sont la classe PHP et le modèle HTML TWIG.

La classe principale de PHP

La classe PHP principale exécute la requête SQL vers votre base de données et récupère les enregistrements de votre table.

Il récupère également les enregistrements des tables relationnelles s'ils doivent être affichés dans votre tableau de données.

Les champs et les valeurs sont enregistrés en tant qu'attributs de l'objet, dans une boucle qui parcourt vos enregistrements :

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

Chaque $row-> est la valeur qui sera affichée dans le tableau de données.

Vous pouvez appliquer n'importe quelle fonction si vous souhaitez les modifier, par exemple :

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

Le modèle HTML TWIG

Le modèle HTML TWIG récupère les valeurs de la classe PHP principale et construit le tableau de données HTML.

Vous pouvez facilement modifier n'importe quelle partie du modèle, en particulier les éléments <th></th> et <td></td> du tableau.

Valeurs avec code HTML

Il arrive souvent qu'un contenu HTML soit stocké, qui sera édité par exemple avec un RTE (TinyMce).

Le modèle TWIG affiche par défaut les balises HTML, alors que vous souhaitez afficher le contenu HTML.

Pour ce faire, nous allons modifier le modèle TWIG et utiliser le filtre TWIG "raw":

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

Exemple de personnalisation avec lien vers le site web public

Dans le générateur, activez le bouton Ouvrir l'URL lorsque vous créez votre liste READ.
Cela ajoutera une icône de lien à chaque enregistrement de votre liste dans le panneau d'administration.

Le lien pointe vers la racine du domaine, nous voulons modifier ce lien pour qu'il mène aux pages respectives de chacun des enregistrements sur le site web public. Voici comment y parvenir.

Prenons l'exemple du tableau des acteurs, disons que chaque enregistrement doit ouvrir une page https://www.my-website.com/actor-x.php,x est l'index.

  1. Ouvrez admin/templates/actor.html dans votre éditeur de code.
  2. Trouvez le lien " open url" dans le modèle, qui devrait ressembler à ceci :
    <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. Ce lien vous amènera à la page d'accueil pour le moment. Pour le faire pointer vers la page de l'acteur, vous devez modifier l'URL (href) et ajouter l'index de l'enregistrement courant
    :<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>

    Nous utilisons ici la clé primaire : {{ object.pk[loop.index0] }}.

    Elle provient de l'objet Actor dans admin/class/crud/Actor.php, qui a été transmis au modèle TWIG.

Comment conserver vos modifications si vous reconstruisez vos tables de données ?

Après avoir apporté des modifications aux fichiers d'administration générés par le CGSP, si vous régénérez votre liste READ, ces modifications seront écrasées.

Sauvegarde automatique des fichiers d'administration

Pour éviter la perte de données :

Lorsque vous générez les fichiers du panneau d'administration, les fichiers existants sont sauvegardés dans le dossier de sauvegarde du générateur : /generator/backup-files/

Outil de comparaison de fichiers

L'outil de comparaison des générateurs vous permet de

  • comparer les versions enregistrées avec les nouvelles versions générées
  • fusionner les deux versions disponibles en sélectionnant dans les deux volets gauche/droit les parties du code que vous souhaitez conserver.

Conditions préalables

Pour personnaliser les tableaux de données Bootstrap Admin avec PHPCG, vous devez au préalable :

Page principale du tutoriel CRUD PHP