xForms Display Records+css

**jisse03** · 11/03/2012, 08h56

Re : xForms Display Records+css

Bonjour,

xForms Display Records est conçu par la même équipe que celle ayant développé Breezing Forms et Content Builder (sans compter Looking Glass).
Tous ces outils ont en commun une très grande souplesse de formatage.

Pour xForms Display Records, il y a plusieurs éléments pouvant être stylés.

Après avoir construit une vue sur une table (mettons la table des résultats de formulaires Breezing Forms), on obtient par défaut une vue brute, sans formatage particulier.

A ce niveau, Pour chaque champ, on a une zone Item wrap code, qui permet de personnaliser l'affichage de ce champ. Supposons que dans notre template de site on ait une classe CSS .enhance (qui serait d'une couleur contrastée par rapport au reste du texte, en gras, et italique...)

Pour un champ qui est un lien vers le résultat du formulaire (mettons le champ "first_name", on peut styler le lien avec:

Code HTML:

<a href="{value}" class="enhance">{value}</a>

Quasiment tout format CSS est autorisé au niveau du champ.

Pour avoir un formatage global, Aller en onglet Détails.
Par défaut, on a du vide absolu dans l'éditeur. Cocher la case "Créer un exemple" (Create sample si la version n'est pas francisée), puis appliquer.

On aura un tableau dans l'éditeur. Ce tableau peut être mis en forme exactement comme on le ferait pour tout tableau, lui assigner une classe visuelle, déplacer et reformater les colonnes, y appliquer de manière sélective des styles, etc.

Bien que semblant complexe, le tout es finalement très simple

**jmmd** · 11/03/2012, 09h10

Re : xForms Display Records+css

Si j'ai bien compris je dois dans un premier temps écrire ma feuille CSS et l'intégrer entre mes balises <head></head>. Dans un deuxième temps j'appelle les classes css dans la zone Item wrap code?

**jisse03** · 11/03/2012, 09h12

Re : xForms Display Records+css

Pour aller encore plus loin et de manière plus complexe. xForms Display Records (dans ses versions récentes), possède on onglet "Préparation des détails" (details prepare) en paramètres de la vue. Cette option va permettre de modifier la vue d'une fiche détaillée lorsqu'on clique sur un élément de la liste.

Cet onglet permet de caser du code PHP pour modifier de manière encore plus fine la vue créée, par exemple pour changer les titres des colonnes, les champs sont dans un tableau PHP qui est nommé $items avec en structure:

Code PHP:


<?php
$items["Nom_du_Champ"]['label'] = "Le nouveau titre affiché pour le champ" ; // Tiitre du champ
$items["Nom_du_Champ"]['value'] = ucfirst( $items["Nom_du_Champ"]['value'] ) ; // Valeur modifiable par expression
?>

Exemple concret, on va supposer que notre vue détaillée possède un champ price, qui contient la valeur d'un produit quelconque, exprimée hors taxes. On veut, en présentation afficher à la fois le HT et TTC. (ici on ne se préocuppe pas du labelk du champ...)

Code PHP:


<?php
$items['price']['value'] = 'H.T. : ' . $items['price']['value'] . '<br />TTC : ' . round( $items['price']['value'], 2 ) ;
?>

Avec un peu d'imagination, on peut carrément reformater complètement un formulaire pour sa présentation frontale.

**jisse03** · 11/03/2012, 09h18

Re : xForms Display Records+css

Envoyé par jmmd Voir le message

Si j'ai bien compris je dois dans un premier temps écrire ma feuille CSS et l'intégrer entre mes balises <head></head>. Dans un deuxième temps j'appelle les classes css dans la zone Item wrap code?

Exactement. Mais en utilisant la syntaxe donnée, tu peux aussi utiliser du formatage inline des items warp code

Code HTML:

<a href="{value}" style="color:red;font-weight:bold">{value]</a>

**jmmd** · 11/03/2012, 11h19

Re : xForms Display Records+css

Merci pour ton aide jisse je commence à y voir plus claire

xForms Display Records+css

xForms Display Records+css

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association