SolidX
ReferenceExtending SolidXFrontend Customization

List API

Reference for accessing and controlling SolidX list views programmatically from external components.

Overview

SolidX exposes a programmatic List View API so external components can control an active list page.

Typical callers now include:

  • Module-owned list buttons under admin-layout
  • Custom widgets under admin-layout
  • Bespoke route UIs under custom-layout

This API is exposed through:

  • listViewRegistry
  • getListView(listId)
  • getRegisteredListViewIds()
  • SolidListViewHandle

Source of Truth

Implementation references:

  • src/routes/pages/admin/core/ListPage.tsx
  • src/components/core/list/listViewRegistry.ts
  • src/components/core/list/SolidListView.tsx

How List Views Are Exposed

ListPage.tsx creates a list ID and registers the list handle on mount:

const listId = `page:${moduleName}:${modelName}:${menuItemId}:${menuItemName}:${actionId}:${actionName}`;
registerListView(listId, handle);

It unregisters on unmount:

unregisterListView(listId);

Important details:

  • modelName is camel-cased in ListPage
  • menuItemId, menuItemName, actionId, and actionName are part of the ID
  • Treat list IDs as fully-qualified keys and use exact matching

Registry API

import { getListView, getRegisteredListViewIds } from "@solidxai/core-ui";

Available functions:

  • getListView(listId)
  • getRegisteredListViewIds()
  • hasListView(listId)

SolidListViewHandle API

type SolidListViewHandle = {
  refresh: () => void;
  clearFilters: () => void;
  applyFilter: (filter: {
    custom_filter_predicate?: any;
    search_predicate?: any;
    saved_filter_predicate?: any;
    predefined_search_predicate?: any;
  }) => void;
  setPagination: (nextFirst: number, nextRows: number) => void;
  setSort: (nextMultiSortMeta: { field: string; order: 1 | -1 }[]) => void;
  setShowArchived: (value: boolean) => void;
  getState: () => any;
};

Typical External Usage

Pattern:

Read registered IDs.

Build the exact target listId from module, model, menu, and action context.

Resolve the handle via getListView.

Invoke handle APIs such as applyFilter or refresh.

Example:

import { getListView, getRegisteredListViewIds } from "@solidxai/core-ui";

const listIds = getRegisteredListViewIds();
const listId = "page:onboarding:applicationMaster:menu-123:Applications:action-456:open";
const listView = getListView(listId);

if (listView) {
  listView.applyFilter({
    custom_filter_predicate: {
      $and: [{ applicationNumber: { $in: matchingApplicationNumbers } }],
    },
  });
}

Filter Shape Notes

applyFilter(...) accepts predicate buckets used by the list search pipeline:

  • custom_filter_predicate
  • search_predicate
  • saved_filter_predicate
  • predefined_search_predicate

Troubleshooting

  • List handle is undefined -> list may not be mounted yet or the ID does not match exactly
  • No matching ID found -> inspect getRegisteredListViewIds() and verify every segment
  • Filter call has no effect -> verify predicate structure and target model field names
  • Wrong target list updated -> use exact listId matching only