Skip to content
GeoViewer 5

ActionButton

ActionButton

Nom fonctionnel: Bouton d’action

1. Introduction

ActionButton, c’est le raccourci “propre”: un bouton, une intention, zéro surprise.

Imaginez-le comme un bouton “simple”, mais utile:

  • OPEN_URL: un portail vers une page externe (documentation, portail métier, formulaire…).
  • EMIT_EVENT: une sonnette pour votre application (vous décidez quoi faire au clic).

Cerise sur la carte: en OPEN_URL, il peut ajouter #SHARE=<token> à l’URL pour transporter l’état courant.

Petit détail volontairement amusant: l’URL par défaut du schéma pointe vers une vidéo bien connue. En production, remplacez-la.

Quand l’utiliser

  • Quand vous voulez un appel à l’action clair (aide, formulaire, signalement, portail métier).
  • Quand vous avez besoin d’un bouton “très visible” sans ouvrir un widget complet.
  • Quand vous préférez déclencher une action côté application (via événement) plutôt que d’embarquer une logique dans le viewer.

En clair

  • Côté utilisateur: une action accessible en un clic, au bon endroit.
  • Côté intégration: un point de branchement simple (lien ou événement) sans coupler toute l’application à un widget complexe.

2. Premiers pas

Accéder à l’outil

  • Par défaut, ActionButton est pensé pour être intégré dans la toolbar (icône seule, tooltip).
  • Vous pouvez en ajouter plusieurs si vous avez plusieurs appels à l’action (attention à la surcharge).

Configurer le widget

  1. Donnez-lui un title explicite (c’est le tooltip en mode integrated).
  2. Choisissez une icon compréhensible sans explication.
  3. Définissez l’action: OPEN_URL ou EMIT_EVENT.

Choisir le bon mode (raccourci)

Vous voulez…ChoisissezPourquoi
Ouvrir un site / une page d’aideOPEN_URLSimple, direct.
Déclencher un workflow dans votre applicationEMIT_EVENTLe viewer publie, votre application pilote.
Ouvrir une page externe en gardant le contexte de carteOPEN_URL + includeShare: trueLa page cible peut relire #SHARE=....

Les principaux éléments du widget

  • Un bouton (icône) en toolbar.
  • Un tooltip (le titre) pour lever l’ambiguïté.
  • Une action: lien ou événement.

3. Utilisation

  • Si vous ouvrez une URL: testez l’URL finale (avec ou sans #SHARE) dans un onglet privé.
  • Si vous émettez un événement: adoptez une convention de nom (wom.help.open, metier.signalement, etc.).
  • Gardez une règle simple: un bouton = une action (évitez les boutons “couteau suisse”).

4. Exemples et scénarios

  • “Aide”: ouvrir une page d’aide en gardant le contexte de la carte via #SHARE.
  • “Signaler”: publier un événement que votre application interprète (ouvrir un formulaire, lancer une modale, etc.).
  • “Portail métier”: ouvrir un outil externe à côté du viewer (nouvel onglet).

5. Configuration de base

| Option | Type | Défaut | Description | | ---------------------------- | ----------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------------------- | | widgetId | string | - | Identifiant unique de l’instance. | | active | boolean | true | Active le widget (et son bouton) au démarrage. | | inToolbar | objet | { type: "integrated" } | Mode recommandé: bouton “icône seule” dans la toolbar. | | container | string | hidden | Par défaut, aucun panneau: le widget vit dans la toolbar. (Si vous voulez un vrai bouton avec libellé, définissez un container visible.) | | title | i18n | - | Sert notamment de tooltip en mode integrated. | | config.icon | icon | { lucide: "ExternalLink" } | Icône du bouton. | | config.tooltipSide | "left" | "right" | "top" | "bottom" | "left" | Position du tooltip. | | config.label | i18n | - | Libellé affiché si vous n’êtes pas en mode integrated. | | config.buttonVariant | string | - | Variante shadcn du bouton (utile hors mode integrated). | | config.action.type | "OPEN_URL" | "EMIT_EVENT" | - | Le comportement déclenché au clic. | | config.action.url | string | (voir schéma) | URL ouverte dans un nouvel onglet (si OPEN_URL). | | config.action.includeShare | boolean | true | Ajoute #SHARE=<token> à l’URL (si OPEN_URL). | | config.action.event.name | string | - | Nom de l’événement publié sur le topic (si EMIT_EVENT). |

6. Avancé

Astuce: si votre URL cible doit reconstruire une carte, préférez includeShare: true et laissez la page cible lire #SHARE=....

Exemple minimal (copier-coller)

{
    "widgetId": "action-button-help",
    "widgetClass": "ActionButton",
    "active": true,
    "inToolbar": { "type": "integrated" },
    "title": { "fr": "Aide" },
    "config": {
        "icon": { "lucide": "HelpCircle" },
        "tooltipSide": "left",
        "action": {
            "type": "OPEN_URL",
            "url": "https://exemple.wallonie.be/aide",
            "includeShare": true
        }
    }
}

Exemple avancé

{
    "widgetId": "action-button-signalement",
    "widgetClass": "ActionButton",
    "active": true,
    "inToolbar": { "type": "integrated" },
    "title": { "fr": "Signaler un problème" },
    "config": {
        "icon": { "lucide": "Flag" },
        "tooltipSide": "left",
        "action": {
            "type": "EMIT_EVENT",
            "event": { "name": "metier.signalement.ouvrir" }
        }
    }
}

Points d’attention

  • includeShare: true concatène #SHARE=... à la fin de l’URL: évitez les URLs qui ont déjà un fragment #....
  • En mode integrated, vous n’avez pas de libellé visible: choisissez une icône vraiment explicite et un tooltip clair.
  • Si vous consommez l’événement côté application, souvenez-vous que l’événement publié est de la forme { "name": "..." } (sans champ type).

7. Dépannage

SymptômeVérification rapide
Le bouton n’apparaît pas.Vérifiez inToolbar et la toolbar cible.
Le clic n’ouvre rien.Vérifiez config.action et l’URL (et la console navigateur).
Le #SHARE ne “marche pas”.Vérifiez que le service de partage est configuré et que la page cible lit bien #SHARE=....

8. FAQ

Peut-on ouvrir un lien sans partager l’état de la carte ?

Oui: mettez includeShare: false.

Comment récupérer le clic côté application ?

Utilisez EMIT_EVENT et écoutez les événements topic du Web Component (voir guide “Premier viewer”).

Peut-on afficher un libellé (pas juste une icône) ?

Oui, mais pas en mode integrated. Dans ce cas:

  • donnez un config.label,
  • et prévoyez un container visible pour afficher le bouton (sinon il n’a nulle part où se rendre).

9. Captures à ajouter

  • (Capture à ajouter) /assets/screenshots/TODO/action-button-01.png: bouton en toolbar (tooltip visible).
  • (Capture à ajouter) /assets/screenshots/TODO/action-button-02.png: exemple de résultat côté application après EMIT_EVENT.

Liens PDF source

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

Aller plus loin