model-list-form

Builds model list screens by subclassing the shared ModelListBase class with columns and routes.

1|Updated Jun 25, 2026
One-click install
npx skills add https://github.com/IgorAIvanov/altera03 --skill model-list-form-igoraivanov
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: model-list-form
Source: https://github.com/IgorAIvanov/altera03/tree/main/skills/src/model-list-form
Command: npx skills add https://github.com/IgorAIvanov/altera03 --skill model-list-form-igoraivanov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Hand-writing toolbar, table, server-side sorting, pagination, search, and row selection logic for every catalog or document list screen leads to duplicated code and inconsistent behavior. This Skill provides the rules and patterns for building a complete 1C-style list screen as a thin subclass of the shared ModelListBase class. ## Core Features & Use Cases - Thin subclass pattern: Declare only the model key, edit route, and column definitions; the base class supplies toolbar, debounced search, server sort, pagination, keyboard navigation, and Excel export. - Rich column configuration: Control width, alignment, numeric precision, grouping, overflow, muted styling, custom render functions, and export text per column. - Advanced variants: Supports checkbox-based group actions, right-hand filter panels, hierarchical catalog group trees, and tree-of-items lists via ModelTreeListBase. - Use Case: Create a bank catalog list screen by writing a single BankList class that declares the model "bank", the edit route, and a few typed columns — no render method, styles, or pagination markup required. ## Quick Start Ask the AI to create a list screen for your model by specifying the model name, its edit route, and the columns with their keys, titles, widths, and sortable flags.

Frequently Asked Questions about model-list-form

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a model list screen with ModelListBase?

Create a <Model>List.ts file that extends ModelListBase<Row> and declares three members: model (the model key), editRoute (the edit form route), and columns (a ListColumn array). The base class supplies the toolbar, table, sorting, pagination, and search — no render method or constructor is needed.

How do I add a filter panel to a list screen?

Override renderFilters() in the subclass and the base adds the collapsible panel, Filters toolbar button with active-count badge, and Reset automatically. Filter values live in $root.$filters and are sent as a nested filters object in the list payload.

Does ModelListBase support Excel export of list data?

Yes, the toolbar includes an Excel button that re-runs the list command with the same filters and builds the .xlsx in the browser from declared columns. Columns with custom render functions need an exportText callback, and exportRowLimit caps the file at 10000 rows by default.

What is the difference between ModelListBase hierarchy and ModelTreeListBase?

ModelListBase with hierarchy: true shows a flat paginated list plus a group tree sidebar for filtering by branch. ModelTreeListBase renders the model's own rows as an indented tree via a parent self-reference, loading the whole set and regrouping client-side. The two mechanisms are mutually exclusive.

Why does my numeric column lose decimal places in the list?

Without the precision field, a value like 8521.40 arrives from SQL as 8521.4 and displays that way. Setting precision declares the column as numeric, fixes decimal places, right-aligns it, and applies tabular figures.

When should I not add the open button column to a list?

Omit the trailing open-button column when the list opens a referenced record instead of its own row, such as an audit journal, or when the list is a read-only register. Otherwise every list with an editRoute should declare it, since double-click and Enter are not discoverable with a mouse.