Atelier 3 : L'interface sur mesure

Niveau composer · Durée ~40 min · Prérequis Atelier 2

Une application se juge sur ses écrans. Vous allez ranger les champs, faire apparaître ce qui doit l'être quand il doit l'être, composer une page, et choisir comment une fiche s'ouvre.

Le principe à retenir tient en une phrase : la grille range les champs, les pages composent ce qu'il y a autour.

Étape 1 : La grille des champs

Sur l'objet Devis : Studio → Objets → Devis → onglet Pages → carte Grille des champs → Composer la grille.

Le panneau s'ouvre directement sur la composition, amorcée avec tous vos champs.

1. Renommer la première section En-tête, la passer à 3 colonnes, y laisser Référence, Client, Date.
2. + Ajouter une section : Conditions commerciales, 2 colonnes, avec Statut et Remise (%).
3. + Ajouter une section : Totaux, 2 colonnes, avec Total HT et Net à payer. Ces deux champs sont calculés : sur la fiche, ils affichent leur valeur, jamais leur formule. Tant qu'une donnée nécessaire manque, ils indiquent ce qu'ils attendent plutôt qu'un zéro trompeur.
4. Déposer le sous-objet « Ligne » depuis la palette, dans une section Détail en bas.
5. Enregistrer.

Poser un élément au bon endroit

Déposé sur la moitié gauche d'un élément, il s'insère avant lui ; sur la moitié droite, après. Un trait marque l'endroit du dépôt. Dans une section à une colonne, c'est la moitié haute ou basse.

✅ Point de contrôle

Ouvrez un devis : quatre sections, et les lignes éditables sous le reste. Le lien Tout replier apparaît en haut de la fiche.

Étape 2 : N'afficher que ce qui est utile

La remise n'a de sens que sur un devis envoyé ou accepté. Sur un brouillon, elle encombre.

1. Rouvrir Composer la grille.
2. Sur la section Conditions commerciales, cliquer sur le bouton ⚡.
3. Régler : Afficher cette section si → champ Statut, opérateur différent de, valeur Brouillon.
4. Enregistrer.

La condition se lit ensuite en clair sous l'en-tête de la section : ⚡ Affichée si Statut ≠ Brouillon.

✅ Point de contrôle

Créez un devis en statut Brouillon : la section n'apparaît pas. Passez-le en Envoyé sans enregistrer : elle apparaît immédiatement. La condition est réévaluée pendant la saisie.

Étape 3 : Replier ce qui est secondaire

Toujours dans la grille : cochez Repliée sur la section Détail. Sur la fiche, elle s'ouvre fermée, et le lecteur la déplie s'il en a besoin.

Deux replis à ne pas confondre :

Où	Quoi
La case Repliée	comment la section s'ouvre sur la fiche
Le chevron à gauche du titre	replie la zone dans l'éditeur, pour travailler ailleurs

Le bandeau au-dessus des sections porte les deux raccourcis d'un coup, chacun sous son intitulé.

Étape 4 : Une page de fiche composée

Jusqu'ici la fiche est générée. Vous allez la composer.

1. Onglet Pages de l'objet Devis → ligne Fiche → Personnaliser →.
2. La page s'ouvre dans l'éditeur, découpée en un bloc par section de votre grille : elles portent leurs noms dans l'arborescence de gauche.
3. Depuis la colonne Blocs, glissez un bloc Texte en haut et écrivez un rappel interne (« Vérifier le SIRET avant envoi »).
4. Réordonnez les blocs à la souris.
5. Publier.

La page suit la grille

Les blocs de fiche affichent les sections, les colonnes et les largeurs de votre grille : vous ne refaites pas la disposition, vous composez autour d'elle.

Étape 5 : Ouvrir la fiche en panneau

Consulter dix devis à la suite en perdant ses filtres à chaque fois est pénible.

1. Studio → Objets → Devis → onglet Pages.
2. Sur la ligne Fiche, Ouverture depuis la liste → Panneau latéral, puis à droite.

C'est tout : le choix s'applique aussitôt, il n'y a rien à enregistrer.

Retournez sur la liste et cliquez sur une ligne : la fiche s'ouvre par-dessus, la liste garde sa position et ses filtres.

Vous n'avez pas besoin de personnaliser la fiche pour ça

Le réglage est disponible même si la fiche est restée au gabarit par défaut. Il ne change que la façon dont elle s'ouvre, pas son contenu.

Choix	Quand le préférer
Page complète	la fiche est riche, ou l'adresse doit être partageable
Panneau latéral	enchaîner les consultations sans perdre le contexte
Fenêtre	un détail court, qu'on referme aussitôt

Étape 6 : Une vue, et un raccourci

1. Sur la liste des devis, pastille Filtre : choisir le champ Statut, condition est, valeur Envoyé, Appliquer. Vérifiez la pastille : Statut est Envoyé.
2. Trier par Date décroissante en cliquant sur l'en-tête de colonne.
3. Nouvelle vue → nom À relancer → Créer la vue.
4. Menu ⋯ de la vue → Épingler dans le menu.

La vue rejoint la section Épinglés de la barre latérale, avec son compteur.

✅ Point de contrôle

« À relancer » figure dans le menu de gauche avec le nombre de devis envoyés. Cliquer dessus rouvre la liste filtrée et triée.

À vous de jouer

Exercice 1 — Le motif d'un refus

Ajoutez un champ Motif du refus (Texte long) qui n'apparaît que sur les devis refusés.

Corrigé

Créez le champ, placez-le dans la grille (sinon il reste masqué), puis posez sur lui — pas sur sa section — une condition ⚡ : Statut est Refusé. La condition s'affiche ensuite sous son libellé dans l'éditeur.

Exercice 2 — Une page de liste avec un indicateur

Sur la page Liste des devis, ajoutez en haut un indicateur affichant le nombre de devis acceptés.

Corrigé

Onglet Pages → Liste → Éditer. Glissez un bloc Indicateur (KPI) au-dessus de la vue d'objet : objet Devis, calcul Nombre, et un filtre Statut est Accepté dans les réglages du bloc. Publiez.

Exercice 3 — Les champs d'un formulaire

Ouvrez la page Ajout d'un devis et rangez ses champs autrement que sur la fiche.

Ce qu'il faut découvrir

Ce n'est pas possible, et c'est délibéré : le formulaire suit la même grille que la fiche. Une seule disposition à maintenir. Ce que vous pouvez faire, c'est composer autour (titre, consignes, image) et régler l'ouverture. Le bouton Composer la grille est d'ailleurs présent dans les réglages du bloc formulaire.

Ce que vous avez appris

• La grille est la source unique de la disposition des champs : fiche et formulaires la suivent, même personnalisés.
• Une section ou un champ peut être conditionnel, et la condition se réévalue pendant la saisie.
• Une page de fiche est découpée en blocs par section : on compose autour sans refaire le rangement.
• Une fiche s'ouvre en page, panneau ou fenêtre, selon ce qu'on gagne : adresse partageable ou contexte conservé.
• Une vue enregistre filtres, tri et colonnes ; épinglée, elle devient une entrée de menu.

Atelier suivant : Le portail client.