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

Ouvrez la liste des Devis, puis : bouton Affiner → Composer la fiche.

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 servie par le produit. Vous allez la reprendre.

1. Ouvrez un devis, puis carte utilisateur → Modifier le site.
2. La barre du haut vous dit : « Cet écran est servi par le produit. » Cliquez sur Reprendre cet écran.
3. La page s'ouvre, découpée en un bloc par section de votre grille. Elle est en brouillon : vos collègues voient toujours l'écran actuel.
4. Survolez le haut de la page, cliquez le « + », et insérez un bloc Texte avec un rappel interne (« Vérifier le SIRET avant envoi »).
5. Réordonnez les blocs à la souris, ou depuis le panneau Structure.
6. Publier.

L'essai ne coûte rien

Supprimer la page rend l'écran d'origine, exactement tel qu'il était.

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.

Dans l'éditeur de la page de fiche : menu ⋯ → Réglages de la page → Mode d'ouverture → Panneau latéral, à droite.

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

C'est la page VISÉE qui décide

Jamais le lien. Sans cela, la même fiche s'ouvrirait en fenêtre depuis un bouton et en pleine page depuis un autre.

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 liste filtrée, dans le menu

Vous voulez que toute l'équipe ait « les devis à relancer » sous la main.

1. Sur la liste des devis, Affiner → pastille Filtre : champ Statut, condition est, valeur Envoyé, Appliquer. Triez par Date décroissante en cliquant sur l'en-tête.
2. L'adresse de votre navigateur porte maintenant ce réglage : vous pouvez déjà l'envoyer à un collègue.
3. Pour en faire une entrée de menu, passez en mode édition et cliquez Ajouter une page : titre À relancer, nature contenu.
4. Posez un bloc Vue d'objet (widget) : objet Devis, et dans ses réglages un filtre Statut est Envoyé.
5. Publier.

✅ Point de contrôle

« À relancer » figure dans le menu de gauche. Cliquer dessus ouvre la liste filtrée, pour tout le monde.

Pourquoi une page, et plus une « vue enregistrée » ?

Le produit avait deux façons de mettre une liste filtrée sous les yeux de quelqu'un, une vue épinglée et une page composée, et le menu était nourri par les deux. Les vues enregistrées ont été retirées en septembre 2026 : il ne reste qu'un seul endroit où décider de ce que le menu contient.

À 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é

Ouvrez la liste des devis, passez en mode édition, et cliquez Reprendre cet écran. Insérez un bloc Indicateur (KPI) au-dessus de la vue d'objet : objet Devis, calcul Nombre, et un filtre Statut est Accepté. Donnez-lui une fenêtre de 30 jours pour qu'il affiche aussi sa variation. Publiez.

Exercice 3 — Les champs d'un formulaire

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

Corrigé

C'est possible depuis septembre 2026. Reprenez la page Ajout, sélectionnez le bloc Formulaire de saisie, et réglez ses champs, ses colonnes et ses étapes : il cesse alors de suivre la grille globale. C'est ce qui permet d'avoir un formulaire public court et un formulaire interne long pour le même objet.

Sans ces réglages, la grille reprend la main, et le bouton Composer la grille reste présent dans le panneau du bloc.

Trois garde-fous : un champ ne figure que dans une étape ; un champ obligatoire absent de toutes les étapes est refusé à l'enregistrement, pas à la dernière étape ; et huit étapes au plus.

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.
• Un écran servi par le produit se reprend, en brouillon, et se rend en supprimant la page.
• 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é.
• Les réglages d'une liste vivent dans l'adresse : un rechargement ne les perd pas, et le lien se partage.
• Une liste filtrée destinée à toute l'équipe devient une page, rangée dans le menu comme les autres.

Atelier suivant : Le portail client.