JMatrixPlatform Palette de commandes pour la navigation UI

Palette de commandes dans JMatrixPlatform : Simplification de la navigation dans les systèmes multi-modules

Les systèmes multi-modules comme JMatrixPlatform souffrent souvent d'une surcharge d'interface : des centaines de commandes, boutons et onglets rendent la navigation cauchemardesque, même pour les administrateurs. S'inspirant de la palette de commandes de VSCode, nous avons mis en place une solution universelle — une barre de recherche unique pour toutes les commandes accessibles aux utilisateurs. Cela réduit la dépendance aux menus imbriqués et accélère l'accès aux fonctionnalités.

Le problème classique de navigation

Dans les systèmes comptant des dizaines de modules, le tableau de bord se retrouve encombré de raccourcis, catégories et sous-menus. Les utilisateurs ayant accès à plus de 10 flux de travail perdent du temps à chercher : Accueil -> Mes actions -> Gestion des exigences -> Attribution. Les guides pas à pas sont indispensables : « Développez la catégorie A, allez à B, cliquez sur C ».

Les tâches d'administration (rafraîchissement du cache, synchronisation, rapports) sont particulièrement délicates — elles sont difficiles à placer et à retenir. Toutes les solutions se résument au regroupement, qui ne fait que masquer les fonctionnalités.

Inspiration tirée de VSCode

La palette de commandes de VSCode permet un accès piloté par clavier à n'importe quelle fonctionnalité de l'IDE via une recherche par nom. Elle élimine les débats sur le placement dans l'interface et permet une invocation instantanée.

Dans JMatrixPlatform, l'architecture est déjà en place : chaque action d'interface est un JCommand avec href, libellé, description et droits d'accès. Les commandes alimentent le tableau de bord, les barres d'outils et les panneaux.

Exemple de commande Projects :

@JModelPart
public final class ACDProjectsDesk extends JCommand {
  public static ACDProjectsDesk COMMAND = new ACDProjectsDesk();

  @Override
  public JHref getHref(JContext ctx, JRequestParams requestParams) {
    return new JHrefTable(
        ATBProjectsDesk.TABLE,
        JTarget.CONTENT,
        Actions.TOOLBAR,
        null,
        AIQProjectsAll.INQUIRY,
        JHrefTable.RowSelection.MULTI);
  }
}

Localisation dans messages_en.properties :

en.demo.matrix.schema.ui.command.ACDProjectsDesk=Projects

Implémentation avec hashtags

La palette utilise des hashtags pour le filtrage d'accès et la recherche sémantique par synonymes (ex. : « entreprises » -> « organisations »).

@Override
public Set<String> getHashTags() {
  return Set.of(
    "document-management",
    "demo",
    "projects",
    "kits");
}

Le contrôleur renvoie les commandes disponibles :

@GetMapping("/navigator/paletteCommands")
public ResponseEntity<List<JDTOCommand>> getCommands(
    @JPathContextVariable JContext ctx,
    @RequestParam Map<String, String> requestParamsMap) {
  
  JRequestParams requestParams = new JRequestParams(requestParamsMap);

  Set<JCommand> commands = JModel.getAdminListByClass(JCommand.class);

  List<JDTOCommand> results = commands
      .stream()
      .filter(cmd -> cmd.getHashTags() != null && !cmd.getHashTags().isEmpty() && cmd.show(ctx, requestParams))
      .map(cmd -> new JDTOCommand(ctx, requestParams, cmd))
      .toList();

  return ResponseEntity.ok(results);
}

Filtrage côté client pour la rapidité (jusqu'à 1000 commandes). Exemple JSON :

[
   {
      "name":"ACPersonDesk",
      "description":"Registre des utilisateurs de la plateforme",
      "label":"Utilisateurs",
      "icon":null,
      "settings":{},
      "href":{
         "url":"../table/ATBPersonDesk",
         "requestParams":{
            "toolbar":"AMPersonDeskTableActions",
            "rowSelection":"MULTI",
            "inquiry":"AIQPersonsDesk",
            "target":"CONTENT"
         }
      },
      "hashTags":["users", "org-structure"]
   }
]

La recherche « projects » ouvre instantanément le bon href, peu importe la profondeur dans le menu.

Avantages clés

• Accès instantané : Recherche par libellé, description, hashtags.
• Conscient du contexte : Les hashtags ajoutent des synonymes et filtrent les commandes pertinentes.
• Polyvalent : Fonctionne pour visualiser des composants et exécuter des actions directes.
• Évolutif : Indépendant de la structure d'interface, idéal pour plus de 100 modules.
• Hautes performances : Le serveur envoie la liste, le client filtre en temps réel.

La palette complète les menus sans les remplacer. Les administrateurs accèdent rapidement aux fonctions rares — sans manuel.

Points clés à retenir

• L'architecture JCommand permet une implémentation triviale de la palette — sans refactorisation.
• Les hashtags gèrent filtrage et recherche sémantique en un clin d'œil.
• Le filtrage côté client maintient la réactivité avec plus de 1000 commandes.
• La palette réduit la charge cognitive dans les écosystèmes multi-modules.
• Parfaite pour les systèmes d'ingénierie avec des utilisateurs conservateurs.

— Editorial Team