Affichage étendu des vues

Paramétrage

Exemple de format :

{
    parameters: [
    [
        {
            "type": "string",
            "title": "Selection",
            "sortable": false,
            "expression": null,
            "identifier": "_select"
        },
        {
            "type": "string",
            "title": "Date de création",
            "view": {
                "style": [
                    "fontColorGrey"
                ],
                "icon": "fa-solid fa-calendar-day",
                "format": {
                    "id": "date",
                    "value": "dd\/MM\/YYYY HH:mm"
                }
            },
            "sortable": true,
            "expression": "createdAt",
            "identifier": "createdAt"
        },
        {
            "type": "string",
            "title": "Date de modification",
            "view": {
                "style": [
                    "fontColorGrey",
                    "alignRight"
                ],
                "icon": "fa-solid fa-calendar-check",
                "format": {
                    "id": "date",
                    "value": "dd\/MM\/YYYY HH:mm"
                }
            },
            "sortable": true,
            "expression": "updatedAt",
            "identifier": "updatedAt"
        }
    ],
    [
        {
            "type": "string",
            "title": "Intitulé",
            "sortable": true,
            "view": {
                "style": [
                    "fontSizeBig"
                ]
            },
            "expression": "displayName",
            "identifier": "displayName"
        }
    ],
    [
        {
            "type": "string",
            "title": "Quantité",
            "sortable": true,
            "view": {
                "style": [
                    "autoSize",
                    "fontColorGrey"
                ]
            },
            "expression": "attributes.PurchaseOrder.achat.quantite",
            "identifier": "quantity"
        },
        {
            "type": "string",
            "title": "Description",
            "sortable": true,
            "view": {
                "nbLineToShow": 3,
                "showTitle": true,
                "style": [
                    "fontColorGrey"
                ]
            },
            "expression": "attributes.PurchaseOrder.achat.description",
            "identifier": "description"
        },
        {
            "identifier": "price",
            "title": "Prix",
            "type": "string",
            "sortable": true,
            "view": {
                "icon": "fa-solid fa-euro-sign",
                "style": [
                    "fontColorGrey reverse alignRight fontColorGreen"
                ]
            },
            "expression": "attributes.PurchaseOrder.commande.montantht"
        },
        {
            "identifier": "status",
            "title": "Statut",
            "type": "string",
            "sortable": false,
            "view": {
                "style": [
                    "fontColorPrimary",
                    "autoSize"
                ]
            },
            "expression": "lifecycleV2.status"
        },
        {
            "type": "string",
            "title": "Etat",
            "sortable": false,
            "view": {
                "style": [
                    "alignRight",
                    "fontColorGrey",
                    "autoSize",
                    "fontSizeSmall"
                ]
            },
            "expression": "lifecycleV2.subStatus.displayName",
            "identifier": "currentStatus"
        }
    ]
]
}

Styliser le contenu

Les 3 attributs contenu dans view: {} pour styliser le contenu :

attribute	description
format	Formate le contenu d'une certaine manière (ex pour une date bdd plus lisible)
class	Décore le contenu affiché (couleur, taille, alignement, etc...
icon	Ajoute une icone au début du contenu (permet d'identifier plus facilement certains éléments)
showTitle	Affiche le title avant la valeur dans la liste (ex: Description: "ma valeur")
nbLineToShow	Permet de gérer le nombre maximal de lignes affichées dans la liste (utile pour des données de textarea)

Fonctionnement

Un tableau correspond à une ligne dans le template et un objet correspond un "block" :

Liste des classes

https://labs.maarch.org/maarch/mdf-front-full/-/blob/main/src/app/entity/core/sub-set/sub-set-list/templates/block/custom-style-template.scss