Skip to content
GeoViewer 5

HtmlContent

HtmlContent

Nom fonctionnel: Contenu HTML

À quoi sert ce widget ?

Insère un panneau de contenu HTML pour diffuser des consignes, notices ou messages d’information.

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

  • Zone de contenu HTML injectée par configuration.
  • Support de messages métier, tutoriels courts et consignes d’usage.
  • Compatibilité avec des blocs simples de mise en forme.

Parcours utilisateur (le plus courant)

  • Ajoutez un contenu clair et court orienté action utilisateur.
  • Vérifiez le rendu mobile pour éviter les débordements visuels.
  • Utilisez ce widget pour cadrer l’usage d’une carte thématique.

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 HtmlContent.
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": "html-content",
    "widgetClass": "HtmlContent",
    "active": false,
    "inToolbar": true,
    "config": {}
}

Exemple avancé

{
    "widgetId": "html-content-advanced",
    "widgetClass": "HtmlContent",
    "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/html-content-01.png: widget ouvert avec configuration standard.
  • (Capture à ajouter) /assets/screenshots/TODO/html-content-02.png: interaction principale et résultat attendu.

Liens PDF source

  • Aucun PDF de référence détecté automatiquement pour ce widget.

Aller plus loin