ActionGridView

Grille d'actions pour tableaux de bord.

Description

Le composant ActionGridView affiche des actions sous forme de grille, idéal pour les tableaux de bord, les grilles de fonctionnalités ou la navigation par icônes. Il prend en charge un nombre de colonnes configurable (1 à 6) ainsi que l'espacement entre les éléments.

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

Description des champs

idstringrequis

Identifiant unique de la vue grille d'actions

typestringrequis

Toujours "ActionGrid"

contentActionGridContentrequis

Objet de contenu de la grille d'actions

content.titlestringoptionnel

Titre optionnel affiché au-dessus de la grille d'actions

content.introstringoptionnel

Texte d'introduction optionnel affiché avant la grille d'actions

content.actionsActionConfig[]requis

Tableau des actions (au moins une action requise)

content.actions[].codestringrequis

Code d'action unique (utilisé lors de la soumission)

content.actions[].titlestringrequis

Titre de l'action affiché à l'utilisateur

content.actions[].descstringoptionnel

Description ou sous-titre optionnel

content.actions[].thumbnailstringoptionnel

URL optionnelle de l'image de vignette

content.actions[].disabledbooleanoptionnel

Indique si l'action est désactivée (valeur par défaut : false)

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

Métadonnées optionnelles associées à l'action

content.columnsnumberoptionnel

Nombre de colonnes (1 à 6, valeur par défaut : 2)

content.spacingnumberoptionnel

Espacement entre les éléments, en pixels (valeur par défaut : 16)

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 grille d'actions

title - Texte du titre

setIntro(intro)→ this

Définit le texte d'introduction affiché avant la grille d'actions

intro - Texte d'introduction

setColumns(columns)→ this

Définit le nombre de colonnes de la grille

columns - Nombre de colonnes (1 à 6)

setSpacing(spacing)→ this

Définit l'espacement entre les éléments de la grille

spacing - Espacement en pixels (>= 0)

getColumns()→ number

Retourne le nombre de colonnes courant

getSpacing()→ number

Retourne la valeur d'espacement courante

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

Ajoute une action à la grille

code - Code de l'action
title - Titre de l'action
description - Description optionnelle
thumbnail - URL d'image optionnelle
disabled - Indicateur de désactivation
metadata - Métadonnées optionnelles

addActions(actions)→ this

Ajoute plusieurs actions en une seule fois

actions - Tableau d'objets action

removeAction(actionCode)→ boolean

Supprime une action à partir de 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

Retourne une action à partir de son code (hérité de BaseActionView)

actionCode - Code de l'action

getActions()→ ActionConfig[]

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

getActiveActions()→ ActionConfig[]

Retourne uniquement les actions actives, c'est-à-dire non désactivées (hérité de BaseActionView)

getActionCount()→ number

Retourne le nombre d'actions (hérité de BaseActionView)

hasAction(actionCode)→ boolean

Vérifie l'existence d'une action (hérité de BaseActionView)

actionCode - Code de l'action

hasActions()→ boolean

Vérifie si la grille contient 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 (valeur par 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>

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

Retourne 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

Grille d'actions simple

javascript

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const actionGrid = yeriaApp
6    .createActionGridView('dashboard', 'Dashboard')
7    .setIntro('Choose an action from the grid below')
8    .setColumns(2)
9    .addAction('analytics', 'Analytics', 'View your statistics', 'analytics.png')
10    .addAction('reports', 'Reports', 'Generate PDF reports', 'reports.png')
11    .addAction('users', 'Users', 'Manage access', 'users.png')
12    .addAction('payments', 'Payments', 'Track payments', 'payments.png');
13
14const response = yeriaApp.serve(actionGrid);

Grille d'actions avec colonnes personnalisées

javascript

1const actionGrid = yeriaApp
2    .createActionGridView('features', 'Features')
3    .setColumns(3)  // 3 columns
4    .setSpacing(24)  // 24px spacing
5    .addAction('feature-1', 'Feature 1', 'Description 1', 'feature1.png')
6    .addAction('feature-2', 'Feature 2', 'Description 2', 'feature2.png')
7    .addAction('feature-3', 'Feature 3', 'Description 3', 'feature3.png')
8    .addAction('feature-4', 'Feature 4', 'Description 4', 'feature4.png')
9    .addAction('feature-5', 'Feature 5', 'Description 5', 'feature5.png')
10    .addAction('feature-6', 'Feature 6', 'Description 6', 'feature6.png');

Grille à une seule colonne

javascript

1const actionGrid = yeriaApp
2    .createActionGridView('menu', 'Menu')
3    .setColumns(1)  // Single column (vertical list)
4    .addAction('item-1', 'Item 1', 'Description 1')
5    .addAction('item-2', 'Item 2', 'Description 2')
6    .addAction('item-3', 'Item 3', 'Description 3');

Grille d'actions avec métadonnées

javascript

1const actionGrid = yeriaApp
2    .createActionGridView('services', 'Services')
3    .setColumns(2)
4    .addAction(
5        'service-1',
6        'Service 1',
7        'Premium service',
8        'service1.png',
9        false,
10        { badge: 'Popular', price: '$99' }
11    )
12    .addAction(
13        'service-2',
14        'Service 2',
15        'Basic service',
16        'service2.png',
17        false,
18        { price: '$49' }
19    );

Grille d'actions comportant des actions désactivées

javascript

1const actionGrid = yeriaApp
2    .createActionGridView('features', 'Features')
3    .setColumns(2)
4    .addAction('feature-1', 'Feature 1', 'Available', 'feature1.png')
5    .addAction('feature-2', 'Feature 2', 'Coming soon', 'feature2.png', true)
6    .addAction('feature-3', 'Feature 3', 'Available', 'feature3.png')
7    .addAction('feature-4', 'Feature 4', 'Coming soon', 'feature4.png', true);

Gestion dynamique de la grille d'actions

javascript

1const actionGrid = yeriaApp
2    .createActionGridView('dashboard', 'Dashboard')
3    .setColumns(2)
4    .addAction('item-1', 'Item 1', 'Description 1')
5    .addAction('item-2', 'Item 2', 'Description 2')
6    .addAction('item-3', 'Item 3', 'Description 3');
7
8// Get current columns
9const columns = actionGrid.getColumns();  // Returns 2
10
11// Get current spacing
12const spacing = actionGrid.getSpacing();  // Returns 16
13
14// Update an action
15actionGrid.updateAction('item-2', {
16    title: 'Updated Item 2',
17    desc: 'Updated description',
18    disabled: true
19});
20
21// Remove an action
22actionGrid.removeAction('item-3');
23
24// Check if has actions
25const hasActions = actionGrid.hasActions();  // Returns true

Grille d'actions avec ajout groupé

javascript

1const actionGrid = yeriaApp
2    .createActionGridView('services', 'Our Services')
3    .setColumns(3)
4    .addActions([
5        {
6            code: 'service-1',
7            title: 'Service 1',
8            description: 'Description 1',
9            thumbnail: 'service1.png'
10        },
11        {
12            code: 'service-2',
13            title: 'Service 2',
14            description: 'Description 2',
15            thumbnail: 'service2.png'
16        },
17        {
18            code: 'service-3',
19            title: 'Service 3',
20            description: 'Description 3',
21            thumbnail: 'service3.png'
22        },
23        {
24            code: 'service-4',
25            title: 'Service 4',
26            description: 'Description 4',
27            thumbnail: 'service4.png'
28        }
29    ]);

Grille d'actions dans un processus

javascript

1const actionGrid = yeriaApp
2    .createActionGridView('onboarding-options', 'Get Started')
3    .setProcess('onboarding', {
4        processName: 'User Onboarding',
5        currentStep: 1,
6        totalSteps: 3
7    })
8    .setColumns(2)
9    .addAction('quick-start', 'Quick Start', 'Get started quickly')
10    .addAction('guided-tour', 'Guided Tour', 'Take a guided tour')
11    .addAction('custom-setup', 'Custom Setup', 'Customize your setup')
12    .addAction('skip', 'Skip', 'Skip for now');

Exemple JSON complet

json

1{
2  "id": "dashboard",
3  "type": "ActionGrid",
4  "content": {
5    "title": "Dashboard",
6    "intro": "Choose an action to get started",
7    "actions": [
8      {
9        "code": "analytics",
10        "title": "Analytics",
11        "desc": "View your statistics",
12        "thumbnail": "https://example.com/icons/analytics.png",
13        "disabled": false,
14        "metadata": {
15          "category": "reports"
16        }
17      },
18      {
19        "code": "reports",
20        "title": "Reports",
21        "desc": "Generate PDF reports",
22        "thumbnail": "https://example.com/icons/reports.png",
23        "disabled": false,
24        "metadata": {
25          "category": "reports"
26        }
27      },
28      {
29        "code": "users",
30        "title": "Users",
31        "desc": "Manage access",
32        "thumbnail": "https://example.com/icons/users.png",
33        "disabled": false,
34        "metadata": {
35          "category": "management"
36        }
37      },
38      {
39        "code": "payments",
40        "title": "Payments",
41        "desc": "Track payments",
42        "thumbnail": "https://example.com/icons/payments.png",
43        "disabled": true,
44        "metadata": {
45          "category": "finance"
46        }
47      }
48    ],
49    "columns": 2,
50    "spacing": 16
51  },
52  "metadata": {
53    "version": "1.0.0",
54    "createdAt": "2025-01-28T10:00:00.000Z"
55  }
56}

← Précédent

ActionListView

IconGridView