Le dev-panel

Le dev-panel est l'éditeur intégré au navigateur. Deux choses distinguent celui de la V21 de ce que décrivent les notes plus anciennes : ses champs sont générés à partir des schémas, et il vit dans un shadow root.

Des champs qui ne sont plus codés à la main

DevPanelRenderer résout le schéma du bloc et affiche un champ par propriété déclarée :

• control choisit le widget ;
• section choisit l'accordéon ;
• visibleWhen décide si le champ s'affiche ;
• dependents dit ce qui est réaffiché quand il change.

Conséquence pratique : pour ajouter un réglage à un bloc, on modifie son schéma, pas le panneau. Un dependents oublié est la cause habituelle d'un champ qui continue d'afficher une valeur périmée après qu'un autre a changé.

Une seule entrée pour l'écriture

Toute modification passe par un point d'entrée unique, WebFormController.setBlockPropertyV21 :

{ uuidKey, property, value, … }

Il résout le schéma, valide la valeur, l'envoie au bon endroit (properties, le cube CSS, un événement, un préréglage de style) et répond avec les actions à rejouer. Texte riche, Monaco et événements compris : plus rien ne lui échappe.

Il écrit dans ds[GG_EDIT_CONTEXT], c'est-à-dire la table en cours d'édition.

Savoir sur quel écran on se trouve

Trois variables process portent le contexte d'édition :

Piège : n'identifiez jamais l'écran à partir de WEB_vt_Url. Toutes les actions du panneau arrivent sur /bweb/call-action, quel que soit l'écran : l'URL ne dit rien, et la découper en segments de chemin lève une erreur d'index.

Le shadow root change les règles

Le panneau est monté dans un shadow root. Trois habitudes ne fonctionnent plus :

• les variables globales implicites sont mortes — une fonction déclarée dans un script du panneau est invisible depuis un autre, sauf si elle est exportée ;
• les attributs event-onClick du balisage ne se déclenchent jamais — attachez les écouteurs à l'intérieur du shadow root ;
• document.querySelector n'atteint pas les nœuds du panneau, et jQuery n'y fonctionne pas non plus.

Et le piège inverse : le panneau porte lui-même des attributs data-uuid pour les blocs qu'il liste. Un sélecteur [data-uuid=…] non restreint, visant la page, trouvera aussi des nœuds du panneau — ce qui a déjà détruit le mauvais élément lors d'une suppression. Restreignez le sélecteur à la zone voulue, et mettez la valeur entre guillemets en l'échappant.

Styler dans le shadow root

output.css repeint tous les label et input du panneau. Une règle écrite #devPannel .x a une spécificité plus faible et perd sur background, border et color (la géométrie, elle, s'applique). Préfixez avec l'identifiant de l'onglet et utilisez !important pour les fonds.

Les éditeurs empaquetés par webpack (texte riche, Monaco) se montent mais sortent sans style quand style-loader injecte dans document.head au lieu du shadow root. Une option webpack insert règle ce cas : revérifiez-la après chaque rebuild, elle a régressé plus d'une fois.

Accès

Le panneau est servi à un utilisateur autorisé à modifier la page. Après un redémarrage de 4D, la session web est perdue et le panneau disparaît : reconnectez-vous plutôt que de chercher un bug.

Voir aussi

• Le contrat properties — ce que le panneau modifie
• Recharger ou redémarrer — quoi recharger après une modification de schéma