Éditeur visuel des Vues Utilisateur

L’éditeur visuel permet de composer une vue en faisant glisser des widgets sur un canvas. Les modifications sont sauvegardées dans la brouillon et l’état de sauvegarde est affiché dans la barre supérieure.

Barre d'outils

Les actions principales sont :

• Annuler et Rétablir ;
• Page, pour ajouter une nouvelle page ;
• Données, pour gérer les sources ;
• Widget vue, pour trouver et contrôler les widgets déjà insérés ;
• Prévisualisation ;
• sélection et comparaison des Versions ;
• Publier.

Avant de fermer l’éditeur, attendre que l’état confirme le sauvegarde.

Pages

Une vue peut contenir plusieurs pages. Les onglets au-dessus du canvas permettent de :

• sélectionner la page courante ;
• ajouter une page ;
• la renommer ;
• la réorganiser ;
• la supprimer quand elle n’est plus nécessaire.

Le widget Navigateur pages rend disponible la même navigation dans la vue publiée.

Canvas et grille

Le canvas utilise une grille à 48 colonnes, pour rendre plus précis le positionnement. Les vues créées avec la précédente grille à 24 colonnes sont mises à jour automatiquement sans changer l’emprise visuelle des widgets. Faire glisser un widget de la palette et le relâcher à la position désirée.

Chaque widget peut être :

• déplacé ;
• redimensionné ;
• dupliqué ;
• supprimé ;
• configuré du panneau Propriétés.

Les commandes de zoom permettent de réduire ou d’agrandir le canvas, restaurer le 100% ou utiliser Adapter pour montrer toute la zone disponible.

Pour chaque page il est possible de configurer largeur, hauteur, adaptation automatique au viewport, arrière-plan, visibilité de la grille et politique d’actualisation des données.

La phrase Actualisation des données offre trois modes :

• Seulement au chargement initial de la vue, par défaut : à l’ouverture toutes les pages sont chargées et les données sont ensuite réutilisées pendant la navigation ;
• Même à chaque ouverture de la page : revenant sur la page, les widgets exécutent à nouveau les requêtes ;
• Automatique pendant que la page est affichée : la page active est mise à jour à l’intervalle configuré, qui ne peut pas être inférieur à 30 secondes.

Les filtres, les drill, les commandes d’actualisation et les mises à jour demandées par les actions Workflow continuent de recharger les données intéressées même dans le mode par défaut.

Palette des widgets

La palette est divisée par familles.

Famille	Exemples
Données	Graphiques à barres, lignes, zone, tarte et donut ; KPI ; jauge ; table ; détail enregistrement ; carte.
Contenu	Texte, titre de section, image, HTML sécurisé et, si activé, widget custom.
Mise en page	Séparateur, panneau, panneau repliable, barre latérale, onglets et tiroir.
Navigation	Lien Sybot et navigateur pages.
Contrôles	Actualisation, filtres, filtres actifs, réinitialiser et visibilité widget.
Workflow	Démarrer, actions sur enregistrement, actions multiples, état, log et console Workflow.
Diagnostic	État de la vue, des sources et des opérations disponibles.

Le champ Recherche widget filtre la palette par nom.

Catalogues réutilisables

Les boutons Widget custom et Images, au-dessus de la recherche, ouvrent les catalogues partagés. Il est possible de passer de la vue à aperçu à la liste détaillée, de rechercher les éléments et de sélectionner plusieurs éléments pour import ou export. Le panneau à droite montre propriétaire, utilisateurs autorisés et Vues où l’élément est déjà utilisé.

• un Visualiseur peut utiliser l’élément dans une Vue qui peut modifier ;
• un Éditeur peut également surcharger l’élément du catalogue avec une nouvelle version ;
• l’Owner gère partages et suppression.

L’élimination résume utilisateurs et Vues intéressés, mais ne supprime pas les copies déjà insérées : chaque Vue reste autonome. Pour le même motif, modifier une copie locale ne met pas à jour silencieusement le catalogue. L’owner gère les accès cherchant le seul utilisateur par nom, username ou email et lui attribuant le grant Visualiseur ou Éditeur ; le panneau ne charge pas l’ensemble de l’anagrafica utilisateurs.

Promotion dans le catalogue

La fonctionnalité Promouvoir dans le catalogue permet de réutiliser un Widget personnalisé. Les images locales peuvent être promues depuis la Vue Images ; en sélectionnant une image partagée, une copie locale est créée. Dans le catalogue d'images, il est possible de sélectionner ou de faire glisser plusieurs fichiers ensemble. La prévisualisation d'un Widget personnalisé dans le catalogue est statique lorsque le composant requiert JavaScript ou des données : l'exécution complète a lieu après l'insertion dans la Vue.

Propriétés de la vue

La section Vue contrôle :

• la description ;
• le thème clair, sombre ou système ;
• la police ;
• la densité ;
• l'espacement ;
• la disponibilité des filtres avancés au runtime.

Les propriétés du widget sélectionné dépendent de son type et incluent le contenu, la source de données, les formats, le style, le comportement et les interactions.

Pour Filtre catégories, il est possible de choisir séparément le mode d'entrée et la sélection simple ou multiple. Pour les widgets qui lancent des Workflow, la section Interactions présente les paramètres non-fichier du Workflow sélectionné : chaque paramètre peut utiliser la valeur par défaut du Workflow, une valeur par défaut enregistrée dans le widget ou une formule fx. L'option dédiée détermine si le panneau des paramètres doit apparaître avant le démarrage et dans la Prévisualisation.

Pour les graphiques à lignes et à aires, Données et visualisation inclut également le groupe dédié à l'apparence de la ligne. Il est possible de choisir l'épaisseur, la taille et la forme de l'indicateur des points — aucun, rond, losange, triangle, ligne verticale ou X — et d'utiliser une ligne Brisée ou une Courbe lissée. Les paramètres s'appliquent à toutes les séries du widget, tandis que la couleur reste configurable pour chaque série.

Conteneurs

Les panneaux, les barres latérales, les onglets et les tiroirs peuvent contenir d'autres widgets.

• Panneau: regroupe des éléments avec une grille interne.
• Panneau repliable: peut être ouvert ou fermé par l'utilisateur et utilise toute la hauteur attribuée au widget, laissant aux contenus l'espace disponible sous l'en-tête.
• Barre latérale: s'ancrage à gauche ou à droite et peut démarrer fermé.
• Onglets: divisent les widgets en vues locales au même conteneur.
• Tiroir: affiche des informations dans un panneau superposé, souvent en réponse à une sélection.

Le panneau Vue widget aide à identifier les widgets imbriqués et à contrôler leur visibilité en conception et au runtime sans les supprimer. Chaque élément utilise la même icône avec laquelle le type de widget est identifié dans la palette ; les décalages et les lignes montrent en revanche la relation entre les conteneurs et leurs enfants.

Style et formatage

Chaque widget peut hériter du style de la vue ou utiliser des paramètres spécifiques pour :

• les couleurs et la typographie ;
• l'arrière-plan et la bordure ;
• l'espacement et l'alignement ;
• l'ombre et le rayon des angles ;
• l'en-tête et l'icône ;
• le format des nombres, des dates et de la devise ; la langue et la devise sont choisies dans des listes de valeurs supportées et utilisent respectivement it-IT et EUR comme valeurs par défaut.

La formatage conditionnel applique un style lorsque une règle sur les données est vraie. Les conditions sont évaluées dans l'ordre indiqué et la première satisfaite prévaut.

La visibilité dynamique affiche un widget uniquement lorsque la formule configurée renvoie vrai. La règle appliquée à un conteneur implique également ses enfants.

HTML et widgets personnalisés

Le widget HTML sécurisé accepte du contenu HTML contrôlé ; les éléments non autorisés sont supprimés.

Le Widget personnalisé, lorsqu'il est activé par l'administrateur, utilise un éditeur séparé pour HTML, CSS, JavaScript, PDF de secours et Prévisualisation isolée. Le code est exécuté dans une zone isolée et peut interagir avec la vue uniquement à travers les fonctions mises à disposition par l'éditeur.

Lorsque le widget utilise une Source de données, le contexte initial passé au code contient déjà le premier jeu de résultats, que ce soit dans la Prévisualisation ou dans la Vue publiée. Les variations successives sont communiquées comme des mises à jour du contexte.

Ne pas insérer de crédentiels ou d'informations sensibles dans le code : le contenu publié peut être consulté par le navigateur.

Import et export des catalogues

Meilleures pratiques

• concevoir d'abord la hiérarchie de l'information ;
• limiter le nombre de graphiques simultanés ;
• utiliser des titres et des messages sans données compréhensibles ;
• vérifier toujours le thème clair et sombre ;
• tester les mises en page, les filtres et les conteneurs dans la Prévisualisation ;
• utiliser le widget de Diagnostic dans une zone dédiée lorsque la vue combine de nombreuses sources ou Workflows.