Affichage sous forme de fiche

Bonjour à tous,

Il est possible en standard d’afficher les objets sous forme de fiches et non sous forme de liste

En utilisant le bouton suivant :

Est-ce qu’il est possible aisément de modifier ce qui est affiché sur les fiches (choix des rubriques, mise en forme (taille de police, couleurs…) ?

Merci d’avance pour votre retour.
Abed.

Les miniatures summary sont définies par un template qui positionne les zones (titre, icon…).
On peut le changer globalement ou par objet (changer le structure DOM).

Pour changer les styles, il faut faire du CSS pour surcharger les classes sous .obj-summary.

Ensuite la mode “tuile” peut être affiché en masonry (en colonne et insérés de droite à gauche) ou en articles/columns (en colonne empilées de haut en bas), ou encore en inlined ou float left simple.

Pour changer toutes les listes, il faut agir dès l’ouverture de session dans le ui.ready de la ressource SCRIPT de la disposition responsive :

$(document).on("ui.ready", function() {
  $ui.options.list.minified = true;
}

Mais, il est plutôt conseillé de le faire qu’au niveau du script de chargement d’un objet en particulier (hook front) pour spécifier plus de choses, par exemple :

(function(ui) {
    var app = ui.getAjax();
    Simplicite.UI.hooks.myObject = function(o, cbk) {
        try {
            if (o.isMainInstance()) {
                var p = o.locals.ui; // copy of Globals
                p.list.minified = true; // minified by default
                p.list.minifiable = false; // no toggle list/mini
                p.list.layout =  p.summary.layout = "article"; // masonry, inline or float
                p.summary.maxFields = 5; // only the 5 first fields
                p.summary.fields = [ field1, field2... ]; // or exactly thoses fields...
                p.summary.template = // to draw something else with the same classes to fill
		'<div class="obj-summary">' +
			'<div class="obj-body">' + // open => openObject
				'<div class="title">' +
					'<span class="obj-icon"></span>' + // object icon
					'<div>' +
						'<h4 class="obj-title"></h4>' + // object label
						'<h5 class="obj-label"></h5>' +  // userkey label
					'</div>' +
				'</div>' +
				'<div class="image">' +
					'<img class="obj-image"/>' + // optional image
				'</div>' +
				'<div class="obj-fields"></div>' + // optional fields
				'<div class="obj-addons"></div>' + // optional addons
			'</div>' +
			'<div class="obj-actions"></div>' + // row actions
		'</div>';
            }
        }
        catch(e) {
            app.error("Error in Simplicite.UI.hooks.myObject: "+e.message);
        }
        finally {
            cbk && cbk();
        }
    };
})(window.$ui);

Si vous retirez une zone du template par défaut, il ne sera plus affiché, vous pouvez également forcer des boutons (par défaut ce sont ceux du formulaire de l’objet) , etc.

Tous les paramètres globaux (par défaut) sont donnés dans la JSDoc Simplicite.UI.Globals ou dans la doc responsive :

https://docs.simplicite.io/4.0/jsdoc/Simplicite.UI.Globals.html
https://docs.simplicite.io/4.0/jsdoc/Simplicite.UI.Globals.list.html
https://docs.simplicite.io/4.0/jsdoc/Simplicite.UI.Globals.summary.html

Et toujours

https://docs.simplicite.io/documentation/04-ui/responsive.md

qu’il est recommandé de (re)lire.