IconGridView

Description

Le composant IconGridView présente des actions sous forme de grille de type lanceur d'applications : chaque action est une tuile image carrée ou circulaire avec son libellé en dessous. Il est plus dense et plus orienté icône que ActionGridView (qui affiche des cartes image + titre + texte).

Il partage le même modèle d'action et le même comportement de navigation que les autres vues d'action : lorsqu'une action est sélectionnée, l'application mobile appelle {currentUrl}/{actionCode} (même flux que ActionGrid / ActionList).

Utilisez-le pour les tableaux de bord, les lanceurs ou les sélecteurs de catégories, là où une disposition compacte icône-plus-libellé se lit mieux que des cartes complètes.

Détail des champs

Notes de rendu (mobile) : l'image thumbnail est détourée en cercle (shape:"circle") ou en carré arrondi (shape:"square") ; le libellé title se place sous la tuile, sur une seule ligne avec troncature ; badge s'affiche en petite surimpression en haut à droite de la tuile ; une tuile disabled est atténuée et non cliquable. desc n'est pas rendu.URL des ressources (valable pour tous les composants SGUI) : thumbnail — comme toute ressource image ou média d'une vue fournisseur — doit être un chemin relatif, résolu par le client par rapport à la base du service (l'URL de la vue elle-même). Les valeurs absolues http(s)://, //host, file:// et data: sont rejetées par le moteur de rendu (aucun hôte externe, aucun trafic en clair, aucune charge utile locale ou intégrée). Pour servir des ressources depuis un CDN, renvoyez un chemin relatif dont l'endpoint redirige en 302 vers une URL CDN signée à durée de vie courte — le client ou le lecteur suit la redirection de manière transparente.

Méthodes

(Tous les autres utilitaires d'action — getAction, getActions, getActiveActions, sortByTitle, disableAllActions, etc. — sont hérités de BaseActionView, comme pour ActionGridView.)

Exemple de code JavaScript

Grille d'icônes simple (tuiles circulaires)

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const iconGrid = yeriaApp
6    .createIconGridView('home', 'Accueil')
7    .setIntro('Choisissez un service')
8    .setColumns(4)
9    .addIcon('map',     'Carte',     'https://example.com/icons/map.png')
10    .addIcon('wallet',  'Portefeuille', 'https://example.com/icons/wallet.png', '3')
11    .addIcon('docs',    'Documents', 'https://example.com/icons/docs.png')
12    .addIcon('support', 'Support',   'https://example.com/icons/support.png');
13
14const response = yeriaApp.serve(iconGrid);

Tuiles carrées + une action désactivée

1const iconGrid = yeriaApp
2    .createIconGridView('tools', 'Outils')
3    .setShape('square')
4    .setColumns(3)
5    .addIcon('scan',    'Scanner', 'scan.png')
6    .addIcon('pay',     'Payer',   'pay.png', 'New')
7    .addIcon('archive', 'Archives','archive.png', undefined, true); // disabled

Exemple JSON complet

1{
2  "id": "home",
3  "type": "IconGrid",
4  "content": {
5    "title": "Accueil",
6    "intro": "Choisissez un service",
7    "shape": "circle",
8    "columns": 4,
9    "spacing": 12,
10    "actions": [
11      { "code": "map",     "title": "Carte",        "thumbnail": "https://example.com/icons/map.png" },
12      { "code": "wallet",  "title": "Portefeuille", "thumbnail": "https://example.com/icons/wallet.png", "badge": "3" },
13      { "code": "docs",    "title": "Documents",    "thumbnail": "https://example.com/icons/docs.png" },
14      { "code": "support", "title": "Support",      "thumbnail": "https://example.com/icons/support.png", "disabled": true }
15    ]
16  },
17  "metadata": {
18    "version": "1.0.0",
19    "createdAt": "2026-06-19T10:00:00.000Z"
20  }
21}

Enveloppe signée

serve() encapsule la vue exactement comme n'importe quelle autre — sans traitement particulier :

1{
2  "payload": "{\"appId\":\"my-app\",\"timestamp\":1750329600000,\"view\":{\"id\":\"home\",\"type\":\"IconGrid\",\"content\":{ ... }}}",
3  "signature": "<base64 Ed25519 signature over the payload string>"
4}