Constructeur de dialogue
L'onglet Dialogue du Concepteur d'écran ouvre le Constructeur visuel — un éditeur WYSIWYG pour le formulaire d'ajout/modification. Le modèle de données est la même structure ScreenDialog stockée dans screens.toml, mais au lieu d'éditer du TOML on glisse des champs sur des onglets et on règle les propriétés dans un inspecteur latéral.
Un écran sans dialogue fonctionne quand même comme un tableau en lecture seule ou en édition de grille. Construire un dialogue quand l'utilisateur a besoin d'un formulaire complet pour ajouter ou modifier des lignes.
Disposition à trois colonnes
| Région | Rôle |
|---|---|
| Palette (à gauche) | Source des nouveaux champs. Deux sous-onglets : Dictionnaire (chaque entrée disponible dans la portée du connecteur courant) et Colonnes (chaque colonne que retourne la requête de lecture). Une zone de recherche restreint la liste. Cliquer sur une entrée ajoute une carte de champ sur le canevas ; faire glisser une entrée pour la déposer à un emplacement précis. |
| Canevas (au centre) | La barre d'onglets du dialogue en haut + la grille de champs en dessous. Cliquer sur un onglet pour basculer ; ＋ Onglet en ajoute un. Chaque carte de champ affiche le nom du champ + un résumé sur une ligne de ses indicateurs clés. La carte sélectionnée a une bordure colorée ; l'inspecteur à droite la reflète. Un groupe MASQUÉ distinct en bas rassemble les champs avec hidden = true. |
| Inspecteur (à droite) | Les propriétés du champ sélectionné (ou un éditeur d'action par onglet quand une action d'onglet est sélectionnée — mutuellement exclusifs). Les propriétés sont rendues sous forme de formulaire générique ; les sections Liaisons de paramètres lookup et Règles conditionnelles se déploient en ligne. |
Construire de zéro
Étape 1 — Ouvrir l'onglet Dialogue
La première fois, le canevas est vide avec un bouton Créer le dialogue. Cliquer dessus pour amorcer dialog.tabs = [{id: 'general', label: 'Général', fields: []}] et révéler la disposition à trois colonnes.
Étape 2 — Ajouter les champs du premier onglet
Deux moyens :
| Méthode | Quand |
|---|---|
| Cliquer sur une entrée de Dictionnaire / colonne dans la Palette | Ajoute une carte de champ à la fin de la grille de l'onglet courant. |
| Glisser une entrée de Dictionnaire / colonne sur le Canevas | Dépose la carte de champ là où vous la relâchez — utile pour insérer en milieu de grille. |
Le champ ajouté devient la carte sélectionnée ; l'Inspecteur bascule sur ses propriétés. Mettre colspan pour l'élargir (la grille fait par défaut 2 colonnes ; un champ colspan = 2 remplit la ligne).
Étape 3 — Régler les propriétés du champ
Dans l'Inspecteur :
| Champ | Rôle |
|---|---|
dd | Entrée de dictionnaire dont le champ hérite. Par défaut le nom de la colonne à l'ajout. |
colspan | Combien de cellules de grille le champ occupe. Par défaut 1. |
required / hidden / disabled | Surcharges par dialogue — laisser vide pour hériter de l'indication de colonne (voir Colonnes). |
| Liaisons de paramètres lookup | Liaisons :placeholder supplémentaires pour un champ LOOKUP. Chaque liaison est {param: <placeholder sur la requête de recherche>, source: <champ sur ce dialogue>}. Le cas classique : un sélecteur de rôle restreint par l'identifiant d'application provenant d'un autre champ. |
| Règles conditionnelles | visible_when / required_when / disabled_when — voir Champs conditionnels. |
Étape 4 — Ajouter des onglets
Cliquer sur ＋ Onglet au-dessus du canevas. Le nouvel onglet est vide ; y glisser des champs depuis la Palette. Patrons d'onglets courants :
| Nom d'onglet | Contenu |
|---|---|
| Général | Identité + champs les plus utilisés. |
| Audit | Créé le, créé par, mis à jour le, mis à jour par — souvent hidden_on_add pour les masquer à l'insertion. |
| Notes | Champs en texte libre. |
| Adresse | Un groupe de champs liés (rue, ville, code postal, pays). |
Deux indicateurs sur chaque onglet contrôlent la visibilité par mode :
| Indicateur | Effet |
|---|---|
hide_on_add | L'onglet disparaît à l'ajout d'une nouvelle ligne. |
hide_on_edit | L'onglet disparaît à la modification d'une ligne existante. |
Étape 5 — Réorganiser les champs
Glisser une carte de champ dans le même onglet pour la réorganiser. Glisser vers un onglet différent pour la déplacer entre onglets. Le glisser est natif HTML5 — la cible de dépôt se met en évidence au survol.
Étape 6 — Masquer un champ
Deux moyens :
| Méthode | Effet |
|---|---|
Mettre hidden = true dans l'Inspecteur. | La carte passe dans le groupe MASQUÉ en bas du canevas. Le champ reste lié à l'enregistrement. |
| Supprimer le champ de l'onglet. | Le champ est retiré du dialogue entièrement. La colonne reste sur l'écran ; elle ne remonte simplement pas dans le formulaire. |
Le patron « masquer mais conserver » est utile pour les colonnes techniques que le dialogue doit soumettre (ex. un horodatage d'audit) mais que l'utilisateur ne doit pas voir.
Les trois types d'onglet
Les onglets ne sont pas tous identiques. Trois types résident sous dialog.tabs, discriminés par le champ type :
| Type | Finalité |
|---|---|
form (défaut) | Une grille de champs éditables — le cas décrit ci-dessus. |
nested_form | Un formulaire d'enregistrement enfant intégré dans l'onglet. La clé primaire du parent se lie à une requête de lecture distincte ; si une ligne revient, le formulaire imbriqué la modifie, sinon il insère. Voir Onglets imbriqués. |
nested_table | Une TableView de lignes liées intégrée dans l'onglet. Affiche la grille d'un autre écran restreinte à la clé primaire du parent. Voir Onglets imbriqués. |
Le constructeur visuel affiche la même barre d'onglets pour les trois — basculer sur un onglet nested_form remplace le canevas par l'éditeur de formulaire imbriqué de cet onglet ; nested_table affiche le sélecteur d'écran cible.
Actions par onglet
Chaque onglet peut porter sa propre liste d'actions — des boutons qui se déclenchent depuis le pied de l'onglet. Patrons courants :
| Patron | Pourquoi par onglet |
|---|---|
| Un bouton Recalculer sur un onglet de calculs. | Déclenche une procédure stockée uniquement quand l'utilisateur regarde ces champs. |
| Un bouton Tester le webhook sur un onglet de notification. | N'a de sens que dans ce contexte. |
| Un bouton Rafraîchir depuis la source sur un onglet de synchronisation. | Récupère à nouveau les données affichées par l'onglet. |
L'éditeur d'action s'ouvre dans l'Inspecteur quand on clique sur la ligne d'une action — l'Inspecteur ne montre qu'une chose à la fois (un champ OU une action). Sélectionner un champ efface la sélection d'action et inversement.
Voir Actions et cycle de vie pour les types d'actions complets.
Titre du dialogue
Le titre du dialogue figure en haut de la modale à son ouverture. Le définir une fois dans la section Dialogue de l'Inspecteur (sous les propriétés de champ quand aucun champ n'est sélectionné). Vide → retombe sur le label de l'écran, puis sur id.
Pièges courants
| Erreur | Symptôme | Correction |
|---|---|---|
| Champ sur un onglet référençant une colonne absente de la requête de lecture. | Le dialogue affiche le champ mais la valeur est toujours vide, et l'enregistrement n'envoie aucune valeur pour lui. | Ajouter la colonne à la requête de lecture ou retirer le champ de l'onglet. |
lookup_param_binds référence un champ qui n'est pas sur le même onglet. | La liaison se résout à NULL à la soumission. | Déplacer le champ source sur le même onglet ou utiliser une liaison entre onglets (le moteur lit l'état global du formulaire, mais la liste déroulante Param de l'inspecteur ne liste que les champs visibles sur l'onglet courant). |
colspan = 3 sur une grille à 2 colonnes. | Le champ déborde ; la mise en page casse. | Plafonner colspan à la valeur cols de l'onglet. |
Deux champs avec le même name sur le même onglet. | L'enregistrement envoie deux valeurs pour la même colonne ; la seconde gagne. | Le name de chaque champ doit être unique au sein du dialogue. |
hide_on_add = true ET hide_on_edit = true. | L'onglet n'apparaît jamais. | Désactiver l'un des deux ou supprimer l'onglet. |
Étapes suivantes
- Champs conditionnels — faire apparaître / rendre obligatoire / verrouiller un champ uniquement sous certaines conditions de formulaire.
- Actions et cycle de vie — câbler on_load / on_save / on_cancel pour étendre le comportement du dialogue.
- Onglets imbriqués — intégrer un formulaire d'enregistrement enfant ou une grille de lignes liées.