TimelineView

Suivi chronologique : étapes, progression, historique.

Description

Le composant TimelineView retrace une progression chronologique : étapes d'inscription, flux d'activité ou suivi de processus. Il affiche une suite d'événements par ordre chronologique, avec des indicateurs d'état (en attente, en cours, terminé, erreur).

Description des champs

idstringrequis

Identifiant unique de la vue Timeline

typestringrequis

Toujours "Timeline"

contentTimelineContentrequis

Objet de contenu de la chronologie

content.titlestringrequis

Titre de la chronologie

content.introstringoptionnel

Texte d'introduction affiché avant les entrées de la chronologie

content.itemsTimelineItem[]requis

Tableau des entrées de la chronologie (au moins une entrée requise)

content.items[].idstringrequis

Identifiant unique de l'entrée

content.items[].titlestringrequis

Titre de l'entrée

content.items[].timestampstringrequis

Horodatage (format ISO 8601 recommandé)

content.items[].descriptionstringoptionnel

Description facultative

content.items[].statusstringoptionnel

État : "pending", "active", "completed", "error"

content.items[].iconstringoptionnel

Identifiant d'icône facultatif

content.items[].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 les entrées de la chronologie

intro — Texte d'introduction

addItem(item)→ this

Ajoute une entrée entièrement configurée

item — Objet TimelineItem

addEvent(id, title, timestamp, options?)→ this

Méthode de commodité pour ajouter un événement

id — Identifiant de l'événement
title — Titre de l'événement
timestamp — Horodatage ISO
options — Options de l'événement (description, status, icon)

setItems(items)→ this

Remplace toutes les entrées de la chronologie

items — Tableau d'objets TimelineItem

clearItems()→ this

Supprime toutes les entrées de la chronologie

getContent()→ TimelineContent

Renvoie l'objet de contenu complet de la chronologie

serve()→ Record<string, unknown>

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

toJSON()→ Record<string, unknown>

Renvoie 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

Chronologie simple

javascript

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const timeline = yeriaApp
6    .createTimelineView('onboarding', 'Your Progress')
7    .setIntro('Follow the validation steps')
8    .addEvent('step-1', 'Account Created', new Date().toISOString(), { status: 'completed' })
9    .addEvent('step-2', 'Documents Sent', '2025-01-15T12:00:00Z', { status: 'active' })
10    .addEvent('step-3', 'Final Validation', '2025-01-20T09:00:00Z', { status: 'pending' });
11
12const response = yeriaApp.serve(timeline);

Chronologie avec objets d'entrée complets

javascript

1const timeline = yeriaApp
2    .createTimelineView('activity', 'Activity Feed')
3    .setIntro('Recent activity')
4    .addItem({
5        id: 'event-1',
6        title: 'Order Placed',
7        timestamp: '2025-01-15T10:00:00Z',
8        description: 'Your order #12345 has been placed',
9        status: 'completed',
10        icon: 'check'
11    })
12    .addItem({
13        id: 'event-2',
14        title: 'Order Shipped',
15        timestamp: '2025-01-16T14:30:00Z',
16        description: 'Your order has been shipped',
17        status: 'completed',
18        icon: 'truck'
19    })
20    .addItem({
21        id: 'event-3',
22        title: 'Out for Delivery',
23        timestamp: '2025-01-17T08:00:00Z',
24        description: 'Your order is out for delivery',
25        status: 'active',
26        icon: 'delivery'
27    });

Chronologie avec différents états

javascript

1const timeline = yeriaApp
2    .createTimelineView('process', 'Process Status')
3    .setIntro('Track your process')
4    .addEvent('step-1', 'Step 1', '2025-01-01T00:00:00Z', { 
5        status: 'completed',
6        description: 'Step 1 completed successfully'
7    })
8    .addEvent('step-2', 'Step 2', '2025-01-02T00:00:00Z', { 
9        status: 'active',
10        description: 'Currently processing step 2'
11    })
12    .addEvent('step-3', 'Step 3', '2025-01-03T00:00:00Z', { 
13        status: 'pending',
14        description: 'Waiting to start step 3'
15    })
16    .addEvent('step-4', 'Step 4', '2025-01-04T00:00:00Z', { 
17        status: 'error',
18        description: 'Error occurred in step 4'
19    });

Vider et remplacer les entrées

javascript

1const timeline = yeriaApp
2    .createTimelineView('dynamic-timeline', 'Dynamic Timeline')
3    .addEvent('event-1', 'Event 1', '2025-01-01T00:00:00Z')
4    .addEvent('event-2', 'Event 2', '2025-01-02T00:00:00Z');
5
6// Clear all items
7timeline.clearItems();
8
9// Set new items
10timeline.setItems([
11    {
12        id: 'new-event-1',
13        title: 'New Event 1',
14        timestamp: '2025-01-10T00:00:00Z',
15        status: 'completed'
16    },
17    {
18        id: 'new-event-2',
19        title: 'New Event 2',
20        timestamp: '2025-01-11T00:00:00Z',
21        status: 'active'
22    }
23]);

Chronologie au sein d'un processus

javascript

1const timeline = yeriaApp
2    .createTimelineView('onboarding-timeline', 'Onboarding Progress')
3    .setProcess('onboarding', {
4        processName: 'User Onboarding',
5        currentStep: 2,
6        totalSteps: 4
7    })
8    .setIntro('Complete these steps to get started')
9    .addEvent('profile', 'Complete Profile', '2025-01-01T00:00:00Z', { 
10        status: 'completed',
11        description: 'Profile information completed'
12    })
13    .addEvent('verification', 'Verify Email', '2025-01-02T00:00:00Z', { 
14        status: 'active',
15        description: 'Please verify your email address'
16    })
17    .addEvent('preferences', 'Set Preferences', '2025-01-03T00:00:00Z', { 
18        status: 'pending',
19        description: 'Customize your preferences'
20    })
21    .addEvent('tutorial', 'Complete Tutorial', '2025-01-04T00:00:00Z', { 
22        status: 'pending',
23        description: 'Learn how to use the app'
24    });

Exemple JSON complet

json

1{
2  "id": "onboarding-progress",
3  "type": "Timeline",
4  "content": {
5    "title": "Onboarding Progress",
6    "intro": "Complete these steps to get started",
7    "items": [
8      {
9        "id": "profile",
10        "title": "Complete Profile",
11        "timestamp": "2025-01-01T00:00:00Z",
12        "description": "Profile information completed",
13        "status": "completed",
14        "icon": "check",
15        "meta": {
16          "completedAt": "2025-01-01T10:30:00Z"
17        }
18      },
19      {
20        "id": "verification",
21        "title": "Verify Email",
22        "timestamp": "2025-01-02T00:00:00Z",
23        "description": "Please verify your email address",
24        "status": "active",
25        "icon": "mail"
26      },
27      {
28        "id": "preferences",
29        "title": "Set Preferences",
30        "timestamp": "2025-01-03T00:00:00Z",
31        "description": "Customize your preferences",
32        "status": "pending",
33        "icon": "settings"
34      },
35      {
36        "id": "tutorial",
37        "title": "Complete Tutorial",
38        "timestamp": "2025-01-04T00:00:00Z",
39        "description": "Learn how to use the app",
40        "status": "pending",
41        "icon": "book"
42      }
43    ]
44  },
45  "process": {
46    "processId": "onboarding",
47    "processName": "User Onboarding",
48    "currentStep": 2,
49    "totalSteps": 4
50  },
51  "metadata": {
52    "version": "1.0.0",
53    "createdAt": "2025-01-28T10:00:00.000Z"
54  }
55}

← Précédent

CarouselView

MediaView