ActionListView

Liste verticale d'actions : menus, fonctionnalités.

Description

Le composant ActionListView affiche une liste verticale d’actions. Chaque action peut comporter un titre, un descriptif, une vignette et des métadonnées facultatives. Les actions servent généralement aux menus de navigation, aux listes de fonctionnalités ou aux centres de commandes.

Lorsqu’une action est sélectionnée, l’application mobile envoie son code en POST vers {service.baseUrl}/{viewId}, le code figurant dans le corps de la requête.

Description des champs

idstringrequis

Identifiant unique de la vue liste d’actions

typestringrequis

Toujours "ActionList"

contentActionListContentrequis

Objet de contenu de la liste d’actions

content.titlestringoptionnel

Titre facultatif affiché au-dessus de la liste d’actions

content.introstringoptionnel

Texte d’introduction facultatif affiché avant la liste d’actions

content.actionsActionConfig[]requis

Tableau d’actions (au moins une requise)

content.actions[].codestringrequis

Code d’action unique (transmis lors de la soumission)

content.actions[].titlestringrequis

Titre de l’action présenté à l’utilisateur

content.actions[].descstringoptionnel

Descriptif ou sous-titre facultatif

content.actions[].thumbnailstringoptionnel

URL facultative de la vignette

content.actions[].disabledbooleanoptionnel

Indique si l’action est désactivée (défaut : false)

content.actions[].metadataRecord<string, unknown>optionnel

Métadonnées facultatives de l’action

processIdstringoptionnel

Identifiant de processus pour les parcours en plusieurs étapes

metadataobjectoptionnel

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

Méthodes

setTitle(title)→ this

Définit le titre affiché au-dessus de la liste d’actions

title - Texte du titre

setIntro(intro)→ this

Définit le texte d’introduction affiché avant la liste d’actions

intro - Texte d’introduction

addAction(code, title, description?, thumbnail?, disabled?, metadata?)→ this

Ajoute une action à la liste

code - Code de l’action
title - Titre de l’action
description - Descriptif facultatif
thumbnail - URL d’image facultative
disabled - Indicateur de désactivation
metadata - Métadonnées facultatives

addActions(actions)→ this

Ajoute plusieurs actions en une seule fois

actions - Tableau d’objets action

removeAction(actionCode)→ boolean

Supprime une action d’après son code

actionCode - Code de l’action à supprimer

updateAction(actionCode, updates)→ boolean

Met à jour une action existante

actionCode - Code de l’action
updates - Modifications partielles de l’action

getAction(actionCode)→ ActionConfig | undefined

Récupère une action d’après son code (hérité de BaseActionView)

actionCode - Code de l’action

getActions()→ ActionConfig[]

Récupère toutes les actions (hérité de BaseActionView)

getActiveActions()→ ActionConfig[]

Récupère uniquement les actions actives, non désactivées (hérité de BaseActionView)

getActionCount()→ number

Renvoie le nombre d’actions (hérité de BaseActionView)

hasAction(actionCode)→ boolean

Vérifie l’existence de l’action (hérité de BaseActionView)

actionCode - Code de l’action

hasActions()→ boolean

Vérifie que la liste comporte au moins une action

filterActions(predicate)→ ActionConfig[]

Filtre les actions selon un prédicat (hérité de BaseActionView)

predicate - Fonction de filtrage

sortActions(compareFn)→ this

Trie les actions selon une fonction personnalisée (hérité de BaseActionView)

compareFn - Fonction de comparaison

sortByTitle(ascending?)→ this

Trie les actions par ordre alphabétique de titre (hérité de BaseActionView)

ascending - Ordre de tri (défaut : true)

disableAllActions()→ this

Désactive toutes les actions (hérité de BaseActionView)

enableAllActions()→ this

Active toutes les actions (hérité de BaseActionView)

clearActions()→ void

Supprime toutes les actions (hérité de BaseActionView)

serve()→ Record<string, unknown>

Diffuse 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 de processus
context - Contexte du processus

Exemples de code JavaScript

Liste d’actions simple

javascript

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const actionList = yeriaApp
6    .createActionListView('main-menu', 'Main Menu')
7    .setIntro('Select an option from the menu below')
8    .addAction('profile', 'My Profile', 'View your personal information', 'profile-icon.png')
9    .addAction('settings', 'Settings', 'Configure the application', 'settings-icon.png')
10    .addAction('support', 'Support', 'Contact us', 'support-icon.png');
11
12const response = yeriaApp.serve(actionList);

Liste d’actions avec métadonnées

javascript

1const actionList = yeriaApp
2    .createActionListView('dashboard', 'Dashboard')
3    .addAction(
4        'analytics',
5        'Analytics',
6        'View your statistics',
7        'analytics.png',
8        false,
9        { badge: 'New', category: 'reports' }
10    )
11    .addAction(
12        'reports',
13        'Reports',
14        'Generate PDF reports',
15        'reports.png',
16        false,
17        { category: 'reports' }
18    )
19    .addAction(
20        'users',
21        'Users',
22        'Manage access',
23        'users.png',
24        false,
25        { category: 'administration' }
26    );

Liste d’actions comportant des actions désactivées

javascript

1const actionList = yeriaApp
2    .createActionListView('features', 'Features')
3    .addAction('feature-1', 'Feature 1', 'Available feature')
4    .addAction('feature-2', 'Feature 2', 'Coming soon', undefined, true)
5    .addAction('feature-3', 'Feature 3', 'Available feature');

Gestion dynamique d’une liste d’actions

javascript

1const actionList = yeriaApp
2    .createActionListView('menu', 'Menu')
3    .addAction('item-1', 'Item 1', 'Description 1')
4    .addAction('item-2', 'Item 2', 'Description 2')
5    .addAction('item-3', 'Item 3', 'Description 3');
6
7// Update an action
8actionList.updateAction('item-2', {
9    title: 'Updated Item 2',
10    desc: 'Updated description',
11    disabled: true
12});
13
14// Remove an action
15actionList.removeAction('item-3');
16
17// Get actions
18const actions = actionList.getActions();
19const activeActions = actionList.getActiveActions();

Liste comportant plusieurs actions

javascript

1const actionList = yeriaApp
2    .createActionListView('services', 'Our Services')
3    .addActions([
4        {
5            code: 'service-1',
6            title: 'Service 1',
7            description: 'Description of service 1',
8            thumbnail: 'service1.png'
9        },
10        {
11            code: 'service-2',
12            title: 'Service 2',
13            description: 'Description of service 2',
14            thumbnail: 'service2.png'
15        },
16        {
17            code: 'service-3',
18            title: 'Service 3',
19            description: 'Description of service 3',
20            thumbnail: 'service3.png'
21        }
22    ]);

Liste d’actions dans un parcours à étapes

javascript

1const actionList = yeriaApp
2    .createActionListView('onboarding-menu', 'Get Started')
3    .setProcess('onboarding', {
4        processName: 'User Onboarding',
5        currentStep: 1,
6        totalSteps: 3
7    })
8    .addAction('step-1', 'Complete Profile', 'Fill in your personal information')
9    .addAction('step-2', 'Verify Email', 'Confirm your email address')
10    .addAction('step-3', 'Set Preferences', 'Customize your experience');

Liste d’actions triée

javascript

1const actionList = yeriaApp
2    .createActionListView('alphabetical-menu', 'Menu')
3    .addAction('zebra', 'Zebra', 'Z item')
4    .addAction('apple', 'Apple', 'A item')
5    .addAction('banana', 'Banana', 'B item')
6    .sortByTitle(true);  // Sort alphabetically

Exemple JSON complet

json

1{
2  "id": "main-menu",
3  "type": "ActionList",
4  "content": {
5    "title": "Main Menu",
6    "intro": "Select an option from the menu below",
7    "actions": [
8      {
9        "code": "profile",
10        "title": "My Profile",
11        "desc": "View your personal information",
12        "thumbnail": "https://example.com/icons/profile.png",
13        "disabled": false,
14        "metadata": {
15          "category": "account"
16        }
17      },
18      {
19        "code": "settings",
20        "title": "Settings",
21        "desc": "Configure the application",
22        "thumbnail": "https://example.com/icons/settings.png",
23        "disabled": false,
24        "metadata": {
25          "category": "preferences"
26        }
27      },
28      {
29        "code": "support",
30        "title": "Support",
31        "desc": "Contact us for help",
32        "thumbnail": "https://example.com/icons/support.png",
33        "disabled": false,
34        "metadata": {
35          "category": "help"
36        }
37      }
38    ]
39  },
40  "process": {
41    "processId": "onboarding",
42    "processName": "User Onboarding",
43    "currentStep": 1,
44    "totalSteps": 3,
45    "stepName": "Main Menu",
46    "canGoBack": false,
47    "canSkip": false
48  },
49  "metadata": {
50    "version": "1.0.0",
51    "createdAt": "2025-01-28T10:00:00.000Z"
52  }
53}

← Précédent

MapView

ActionGridView