Skip to content
GeoViewer 5

Toolbar

Toolbar

Nom fonctionnel: Barre d’outils

À quoi sert ce widget ?

Organise les outils du viewer en barres d’actions cohérentes pour fluidifier les parcours utilisateur.

Conseil: un viewer “trop outillé” devient vite bruyant. Activez ce widget uniquement s’il sert un parcours utilisateur clair.

Quand l’activer

  • Quand vous devez simplifier le parcours utilisateur.
  • Quand vous voulez adapter le viewer à plusieurs profils (langue, thème, action).
  • Quand la lisibilité des commandes est un enjeu métier.

En clair

  • Côté utilisateur: Une interface claire réduit les erreurs de manipulation et accélère la prise en main.
  • Côté intégration: Contrôlez les conteneurs, les libellés i18n et la cohérence visuelle globale.

Prise en main

Accéder au widget

  • Ouvrez le widget depuis la toolbar ou le conteneur dédié.
  • Vérifiez sa position dans l’interface pour éviter les conflits de lisibilité.

Le configurer sans se tromper

  • Configurez titre, icône, langue ou apparence selon le contexte.
  • Validez le comportement attendu en desktop et mobile.

Ce que l’utilisateur voit

  • Organisation des widgets en groupes d’actions.
  • Gestion de l’ordre, des icônes et de la visibilité des commandes.
  • Point d’entrée principal du parcours utilisateur.

Parcours utilisateur (le plus courant)

  • Positionnez en premier les actions les plus fréquentes.
  • Limitez le nombre de boutons visibles pour garder une interface claire.
  • Utilisez plusieurs toolbars si les usages sont très différents.

Exemples concrets

  • Ajouter un bouton d’action métier dans une toolbar existante.
  • Basculer de langue pour un public multilingue.
  • Adapter l’habillage visuel via un thème dédié.

Configuration (aperçu)

OptionTypeDéfautDescription
widgetIdstring-Identifiant unique de l’instance Toolbar.
activebooleanfalseActive l’ouverture du widget au démarrage.
inToolbarboolean ou objet ou stringselon widgetDéfinit si le widget est visible dans une toolbar, et sous quelle forme.
containerstring ou objetselon widgetChoisit le conteneur de rendu (drawer, dialog, floating, toolbar-tabs, hidden).

Pour le détail complet (et toujours à jour), utilisez la référence technique et le schéma ci-dessous.

Liens techniques et code

Exemple minimal (copier-coller)

{
    "widgetId": "toolbar",
    "widgetClass": "Toolbar",
    "active": false,
    "inToolbar": true,
    "config": {}
}

Exemple avancé

{
    "widgetId": "toolbar-advanced",
    "widgetClass": "Toolbar",
    "active": true,
    "handleOpenAtStartup": false,
    "inToolbar": {
        "type": "button",
        "toolbarId": "default-toolbar",
        "order": 10
    },
    "onActivate": {
        "deactivate": {
            "classes": []
        }
    },
    "config": {}
}

Points d’attention

  • Un widget UI mal positionné peut devenir invisible pour l’utilisateur.
  • Des libellés non traduits dégradent fortement l’expérience.
  • L’ordre des actions en toolbar influence la compréhension du parcours.

Dépannage

SymptômeVérification rapide
Le widget n’apparaît pas au bon endroit.Vérifiez inToolbar, container et viewer.containers.
Le texte affiché n’est pas traduit.Vérifiez les clés i18n et la langue active.

FAQ

Peut-on personnaliser les icônes et titres ?

Oui, via icon, title et les clés i18n quand le widget le permet.

Comment éviter une toolbar surchargée ?

Priorisez les actions clés et regroupez par famille.

Captures à ajouter

  • (Capture à ajouter) /assets/screenshots/TODO/toolbar-01.png: widget ouvert avec configuration standard.
  • (Capture à ajouter) /assets/screenshots/TODO/toolbar-02.png: interaction principale et résultat attendu.

Liens PDF source

  • US028 - Barre d'outils_e2a75bfed3ec495aa3a93efa9a446ee2-120226-0858-128.pdf

Aller plus loin