JMatrixPlatform Command Palette for UI Navigation

Command Palette in JMatrixPlatform: Streamlining Navigation in Multi-Module Systems

Multi-module systems like JMatrixPlatform often suffer from UI overload: hundreds of commands, buttons, and tabs make navigation a nightmare even for admins. Drawing inspiration from VSCode's command palette, we've implemented a universal solution—a single search bar for all user-accessible commands. This cuts reliance on nested menus and speeds up access to features.

The Classic Navigation Problem

In systems with dozens of modules, the dashboard gets cluttered with shortcuts, categories, and submenus. Users with access to 10+ workflows waste time hunting: Home -> My Actions -> Requirements Management -> Assignment. Step-by-step guides are mandatory: "Expand category A, go to B, click C".

Admin tasks (cache refresh, sync, reports) are especially tricky—they're hard to place and remember. All fixes boil down to grouping, which just hides functionality.

Borrowing from VSCode

VSCode's command palette offers keyboard-driven access to any IDE feature via name search. It eliminates UI placement debates and enables instant invocation.

In JMatrixPlatform, the architecture is already set up: every UI action is a JCommand with href, label, description, and access rights. Commands power the dashboard, toolbars, and panels.

Example Projects command:

@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);
  }
}

Localization in messages_en.properties:

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

Implementation with Hashtags

The palette uses hashtags for access filtering and semantic search by synonyms (e.g., "companies" -> "organizations").

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

Controller returns available commands:

@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);
}

Client-side filtering for speed (up to 1000 commands). JSON example:

[
   {
      "name":"ACPersonDesk",
      "description":"Platform user registry",
      "label":"Users",
      "icon":null,
      "settings":{},
      "href":{
         "url":"../table/ATBPersonDesk",
         "requestParams":{
            "toolbar":"AMPersonDeskTableActions",
            "rowSelection":"MULTI",
            "inquiry":"AIQPersonsDesk",
            "target":"CONTENT"
         }
      },
      "hashTags":["users", "org-structure"]
   }
]

Searching "projects" instantly opens the right href, no matter how deep in the menu.

Key Benefits

• Instant Access: Search by label, description, hashtags.
• Context-Aware: Hashtags add synonyms and filter relevant commands.
• Versatile: Works for viewing components and direct actions.
• Scalable: Independent of UI structure, ideal for 100+ modules.
• High Performance: Server sends the list, client filters in real-time.

The palette complements menus without replacing them. Admins get quick access to rare functions—no manuals needed.

Key Takeaways

• JCommand architecture enables trivial palette implementation—no refactoring required.
• Hashtags handle filtering and semantic search in one go.
• Client-side filtering keeps it responsive with 1000+ commands.
• Palette reduces cognitive load in multi-module ecosystems.
• Perfect for engineering systems with conservative users.

— Editorial Team