MessageView

Message, alerte ou confirmation, avec actions.

Description

Le composant MessageView affiche à l'utilisateur un message, une notification, une alerte ou une confirmation. Il prend en charge plusieurs niveaux de gravité (info, success, warning, error) et peut porter une action principale et une action secondaire. Les boutons disent tout : une boîte a toujours exactement une sortie, et lorsqu'aucune action déclarée ne ferme, l'utilisateur doit trancher — un tap maladroit hors du cadre ne peut pas escamoter la décision.

Cas d'usage courants :

Message de succès après l'envoi d'un formulaire
Notification d'erreur
Alerte d'information
Boîte de dialogue de confirmation
Message de bienvenue

Description des champs

idstringrequis

Identifiant unique de la vue message

typestringrequis

Toujours "Message"

contentMessageContentrequis

Objet de contenu du message

content.titlestringrequis

Nomme la fenêtre — le bandeau au-dessus de la boîte

content.introstringoptionnel

La première ligne de la boîte, sous le titre — un sous-titre

content.bodystringrequis

Ce que le message dit. Obligatoire : un message sans corps n'a rien à dire

content.severitystringoptionnel

Gravité du message : "info", "success", "warning", "error" (par défaut : "info")

content.actionsMessageAction[]optionnel

Les boutons, dans l'ordre. Deux au plus ; aucun est valide — le client dessine alors un unique bouton de fermeture, si bien qu'une boîte a toujours exactement une sortie

content.actions[].labelstringrequis

Texte du bouton

content.actions[].gostringoptionnel

Chemin ou URL de la vue que ce bouton charge. Absent, et sans back, le bouton se contente de fermer

content.actions[].methodHttpMethodoptionnel

Avec go seulement (défaut : GET)

content.actions[].backnumber | 'root'optionnel

Recule d'autant d'écrans, sans rien charger — la cible est déjà dans la pile. 'root' ramène à votre vue de base. Exclusif avec go

processIdstringoptionnel

Identifiant de processus pour les parcours en plusieurs étapes

metadataobjectoptionnel

Métadonnées de la vue (version, createdAt, author, tags)

Méthodes

setIntro(intro)→ this

Définit le texte d'introduction affiché avant le corps

intro - Texte d'introduction

setBody(body)→ this

Définit le corps principal du message (requis si intro n'est pas fourni)

body - Texte du corps du message

setSeverity(severity)→ this

Définit le niveau de gravité du message

severity - Niveau de gravité ('info', 'success', 'warning', 'error')

addAction(label, options?)→ this

Ajoute un bouton. Deux au plus. Sans go ni back, il se contente de fermer

label - Texte du bouton
options.go - Chemin ou URL à charger
options.method - Méthode HTTP, avec go seulement
options.back - Nombre d'écrans à reculer, ou 'root'

clearActions()→ this

Retire toutes les actions

setPrimaryAction(text, method?, confirmMessage?)→ this

Nom historique. confirmMessage portait la destination et devient go

voir addAction

setSecondaryAction(text, method?, confirmMessage?)→ this

Nom historique : ajoute le second bouton

voir addAction

submitButton(text, method?, confirmMessage?)→ this

Nom historique de addAction

voir addAction

clearSecondaryAction()→ this

Ne garde que la première action

setMetadata(metadata)→ this

Définit des métadonnées personnalisées

metadata - Objet de métadonnées

serve()→ Record<string, unknown>

Sert la vue après validation (hérité de BaseView)

toJSON()→ Record<string, unknown>

Retourne la représentation JSON (hérité de BaseView)

setState(key, value)→ void

Définit l'état de la vue (hérité de BaseView)

key - Clé d'état
value - Valeur d'état

getState(key)→ unknown

Lit l'état de la vue (hérité de BaseView)

key - Clé d'état

setNext(url)→ this

Contrôle avant d'une séquence paginée, dessiné par le client — voir Navigation

url - URL ou chemin de la vue suivante

setPrev(url)→ this

Contrôle arrière de la même séquence. Ce n'est PAS là que mène le geste de retour — voir Navigation

url - URL ou chemin de la vue précédente

setEntry(entry)→ this

Comment cette vue entre dans la pile de navigation du client (défaut : push) — voir Navigation

entry - 'push', 'replace', ou un entier <= 1

setPage(current, total?)→ this

Où cette vue se situe dans sa séquence ; le client dessine l'indicateur — voir Navigation

current - position, à partir de 1
total - longueur de la séquence, si connue

setProcess(processId, context?)→ this

Définit le contexte de processus (hérité de BaseView)

processId - Identifiant du processus
context - Contexte du processus

Exemples de code JavaScript

Un avis, sans rien à décider

Ne déclarez aucune action et le client dessine un unique bouton de fermeture. Une boîte a toujours exactement une sortie.

javascript

1const message = YeriaUI
2    .createMessageView('saved', 'Données reçues')
3    .setSeverity('success')
4    .setBody('Vos réponses ont bien été enregistrées.');

Un avis, avec une suite

back revient sur un écran déjà dans la pile, sans rien charger — il retrouve l'état où l'utilisateur l'avait laissé. Le second bouton ferme et le laisse où il est.

javascript

1const message = YeriaUI
2    .createMessageView('saved', 'Données reçues')
3    .setSeverity('success')
4    .setBody('Vos réponses ont bien été enregistrées.')
5    .addAction('Retour à la liste', { back: 1 })
6    .addAction('Rester ici');

Une décision

Deux actions, chacune avec son issue. Aucune ne fermant, la boîte ne se referme pas sur un tap maladroit : il faut trancher.

javascript

1const message = YeriaUI
2    .createMessageView('confirm-delete', 'Supprimer définitivement ?')
3    .setSeverity('warning')
4    .setBody('Cette action est irréversible.')
5    .addAction('Supprimer', { go: '/items/4718/delete', method: 'DELETE' })
6    .addAction('Annuler');

Clore un parcours

'root' ramène à la vue servie par votre URL de base, quel que soit le chemin parcouru — la seule position que vous connaissiez à coup sûr.

javascript

1const message = YeriaUI
2    .createMessageView('order-placed', 'Commande confirmée')
3    .setSeverity('success')
4    .setBody('La commande 4718 a bien été enregistrée.')
5    .addAction('Retour à l\'accueil', { back: 'root' });

Exemple JSON complet

json

1{
2  "id": "welcome-message",
3  "type": "Message",
4  "content": {
5    "title": "Welcome!",
6    "intro": "Thank you for joining us",
7    "body": "We're excited to have you on board. Get started by completing your profile.",
8    "severity": "info",
9    "actions": [
10      { "label": "Get Started", "go": "/profile", "method": "GET" },
11      { "label": "Maybe Later" }
12    ],
13    "meta": {
14      "campaign": "onboarding-2025"
15    }
16  },
17  "process": {
18    "processId": "onboarding",
19    "processName": "User Onboarding",
20    "currentStep": 1,
21    "totalSteps": 3,
22    "stepName": "Welcome"
23  },
24  "metadata": {
25    "version": "1.0.0",
26    "createdAt": "2025-01-28T10:00:00.000Z"
27  }
28}

← Précédent

QRDisplayView

Notifications