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. Un message peut être fermable, ou exiger une interaction de l'utilisateur.

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

Titre du message

content.introstringoptionnel

Texte d'introduction affiché avant le corps

content.bodystringrequis*

Corps principal du message (requis si intro n'est pas fourni)

content.severitystringoptionnel

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

content.confirmSubmitActionrequis

Bouton d'action principal (requis)

content.confirm.textstringrequis

Texte du bouton

content.confirm.methodHttpMethodoptionnel

Méthode HTTP (par défaut : POST)

content.confirm.confirmMessagestringoptionnel

Message de confirmation facultatif

content.cancelSubmitActionoptionnel

Bouton d'action secondaire (facultatif)

content.cancel.textstringrequis*

Texte du bouton (requis si cancel est défini)

content.cancel.methodHttpMethodoptionnel

Méthode HTTP (par défaut : POST)

content.cancel.confirmMessagestringoptionnel

Message de confirmation facultatif

content.canDismissbooleanoptionnel

Indique si le message peut être fermé sans action (par défaut : false)

content.metaRecord<string, unknown>optionnel

Métadonnées facultatives

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')

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

Configure le bouton d'action principal

text - Texte du bouton
method - Méthode HTTP (par défaut : POST)
confirmMessage - Confirmation facultative

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

Alias de setPrimaryAction()

text - Texte du bouton
method - Méthode HTTP (par défaut : POST)
confirmMessage - Confirmation facultative

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

Configure le bouton d'action secondaire

text - Texte du bouton
method - Méthode HTTP (par défaut : POST)
confirmMessage - Confirmation facultative

clearSecondaryAction()→ this

Supprime l'action secondaire lorsqu'elle est présente

setDismissible(dismissible?)→ this

Définit si le message peut être fermé sans action

dismissible - Indicateur de fermeture (par défaut : true)

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

Définit la navigation vers la vue suivante (hérité de BaseView)

url - URL de la vue suivante

setPrev(url)→ this

Définit la navigation vers la vue précédente (hérité de BaseView)

url - URL de la vue précédente

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

Message d'information simple

javascript

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const message = yeriaApp
6    .createMessageView('welcome', 'Welcome!')
7    .setIntro('Here are the important announcements for this week')
8    .setBody('Discover the main features of version 2.0 and update your profile to enjoy the new features.')
9    .setSeverity('info')
10    .setPrimaryAction('Got it', 'POST');
11
12const response = yeriaApp.serve(message);

Message de succès

javascript

1const message = yeriaApp
2    .createMessageView('success', 'Success!')
3    .setBody('Your account has been created successfully.')
4    .setSeverity('success')
5    .setPrimaryAction('Continue', 'POST');

Message d'erreur

javascript

1const message = yeriaApp
2    .createMessageView('error', 'Error')
3    .setBody('An error occurred while processing your request. Please try again.')
4    .setSeverity('error')
5    .setPrimaryAction('Retry', 'POST')
6    .setSecondaryAction('Cancel', 'POST');

Message d'avertissement

javascript

1const message = yeriaApp
2    .createMessageView('warning', 'Warning')
3    .setBody('Your session will expire in 5 minutes. Please save your work.')
4    .setSeverity('warning')
5    .setPrimaryAction('Save Now', 'POST')
6    .setSecondaryAction('Continue', 'POST');

Message fermable

javascript

1const message = yeriaApp
2    .createMessageView('notification', 'Notification')
3    .setBody('You have 3 new messages.')
4    .setSeverity('info')
5    .setPrimaryAction('View Messages', 'POST')
6    .setDismissible(true);  // User can dismiss without action

Boîte de dialogue de confirmation

javascript

1const message = yeriaApp
2    .createMessageView('confirm-delete', 'Confirm Deletion')
3    .setBody('Are you sure you want to delete this item? This action cannot be undone.')
4    .setSeverity('warning')
5    .setPrimaryAction('Delete', 'DELETE', 'Are you absolutely sure?')
6    .setSecondaryAction('Cancel', 'POST');

Message avec introduction et corps

javascript

1const message = yeriaApp
2    .createMessageView('announcement', 'New Features')
3    .setIntro('We\'re excited to announce new features!')
4    .setBody('Version 2.0 includes improved performance, new UI components, and enhanced security features.')
5    .setSeverity('info')
6    .setPrimaryAction('Learn More', 'GET')
7    .setSecondaryAction('Dismiss', 'POST');

Message avec métadonnées

javascript

1const message = yeriaApp
2    .createMessageView('custom-message', 'Custom Message')
3    .setBody('This message includes custom metadata.')
4    .setSeverity('info')
5    .setPrimaryAction('OK', 'POST')
6    .setMetadata({
7        category: 'system',
8        priority: 'high',
9        timestamp: new Date().toISOString()
10    });

Message avec différentes méthodes HTTP

javascript

1const message = yeriaApp
2    .createMessageView('update-available', 'Update Available')
3    .setBody('A new version is available. Would you like to update now?')
4    .setSeverity('info')
5    .setPrimaryAction('Update', 'PUT')
6    .setSecondaryAction('Later', 'POST');

Message utilisant submitButton (alias)

javascript

1const message = yeriaApp
2    .createMessageView('info', 'Information')
3    .setBody('This uses the submitButton alias method.')
4    .setSeverity('info')
5    .submitButton('OK', 'POST');  // Alias for setPrimaryAction

Message supprimant l'action secondaire

javascript

1const message = yeriaApp
2    .createMessageView('message', 'Message')
3    .setBody('This message initially has two actions.')
4    .setSeverity('info')
5    .setPrimaryAction('Confirm', 'POST')
6    .setSecondaryAction('Cancel', 'POST')
7    .clearSecondaryAction();  // Remove secondary action

Message dans un parcours en plusieurs étapes

javascript

1const message = yeriaApp
2    .createMessageView('step-complete', 'Step Complete')
3    .setProcess('onboarding', {
4        processName: 'User Onboarding',
5        currentStep: 2,
6        totalSteps: 3,
7        stepName: 'Verification'
8    })
9    .setBody('Your email has been verified successfully.')
10    .setSeverity('success')
11    .setPrimaryAction('Continue to Next Step', 'POST');

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    "confirm": {
10      "text": "Get Started",
11      "method": "POST",
12      "variant": "primary"
13    },
14    "cancel": {
15      "text": "Maybe Later",
16      "method": "POST",
17      "variant": "secondary"
18    },
19    "dismissible": true,
20    "meta": {
21      "campaign": "onboarding-2025"
22    }
23  },
24  "process": {
25    "processId": "onboarding",
26    "processName": "User Onboarding",
27    "currentStep": 1,
28    "totalSteps": 3,
29    "stepName": "Welcome"
30  },
31  "metadata": {
32    "version": "1.0.0",
33    "createdAt": "2025-01-28T10:00:00.000Z"
34  }
35}

← Précédent

QRDisplayView

Notifications