System page development: business pages with the SDK

This page explains how to have an Agent build system pages in a Rabetbase project and wire them to real data with the Lovrabet TypeScript SDK. You don't hand-write SDK boilerplate — state the page goal, data sources, interaction states, and acceptance criteria, and the Agent inspects the data models, integrates the SDK, edits the page files, and reports verification results.

Tasks to hand to the Agent

• Add workbenches, dashboards, wall displays, list pages, detail pages, or complex forms.
• Replace mock data in a page with real Lovrabet SDK calls.
• Use the SDK for data operations: filtering, pagination, detail reads, create, edit, delete.
• Wire saved SQL or BFF results into a page.
• Complete loading, empty, and error states, permission hints, and form validation.
• Debug pages locally and prepare menu entries or asset releases.

Prerequisites

• The target Rabetbase project is open.
• You know the business problem the page solves, plus its entry route or menu name.
• You can name the data involved — customers, orders, tickets, approval records, and so on.
• For writes, have the Agent confirm writable fields, required fields, enum values, and permission boundaries first.
• For releases, have the Agent verify locally first, then preview menu and asset impact.

The main page-development track

1. Let the Agent take over the project and confirm the page directory, routes, component style, and SDK client entry.
2. Have it map out the related datasets, fields, operations, enums, and relations.
3. Prefer the Lovrabet SDK for page reads and writes; consider SQL or BFF only when the standard SDK falls short.
4. While building the page, complete loading, empty, and error states, permission hints, and form validation.
5. Debug locally when done, then check the build, menu, or asset integration.

Common prompts

Plan the page and data path

请帮我规划「客户列表页」这个系统页面。
业务目标是：销售需要按客户等级、负责人、最近跟进时间筛选客户，并快速看到客户最近一次跟进情况。
请先检查当前项目的页面目录、路由、组件写法和 SDK 客户端入口。
再围绕页面需要的数据，确认相关数据集、字段、操作、枚举值和关联关系。
最后给出实现路径：哪些地方用 SDK，哪些地方需要 SQL 或 BFF，哪些风险要先确认。

The AI may call: rabetbase api pull, rabetbase dataset list, rabetbase dataset detail, rabetbase dataset operations.

Add an SDK list page

请新增一个「客户列表页」。
页面需要展示客户名称、客户等级、负责人、最近跟进时间、下一次跟进时间和跟进状态。
支持关键词、客户等级、负责人、跟进状态筛选，并按最近跟进时间倒序分页。
数据必须来自 Lovrabet SDK，不要使用 mock 数据。
请按当前项目已有页面风格实现，并补齐加载态、空态和错误态。
完成后告诉我新增或修改了哪些文件、路由是什么、如何本地验证。

The AI may call: rabetbase api pull, rabetbase dataset detail, rabetbase dataset operations, rabetbase codegen sdk, rabetbase run start.

Build the detail page and form writes

请为「客户」补齐详情查看和编辑能力。
详情页需要展示客户基础信息、联系人、最近跟进记录和未完成待办。
表单需要支持编辑客户等级、负责人、下一次跟进时间和备注。
请先确认可写字段、必填项、枚举值、默认值和权限边界，再接入 SDK。
完成后给出表单校验规则、失败提示和验证步骤。

The AI may call: rabetbase dataset detail, rabetbase dataset operations, rabetbase codegen sdk, rabetbase run start.

Replace mock data with SDK calls

当前页面「src/pages/customer/CustomerList.tsx」里还有 mock 数据。
请帮我替换成 Lovrabet SDK 的真实数据调用。
替换前先确认页面字段和真实数据集字段的映射关系。
不要改变现有交互和样式；如果字段缺失或口径不一致，请先列出来让我确认。

The AI may call: rabetbase api pull, rabetbase dataset detail, rabetbase dataset operations, rabetbase codegen sdk.

Wire in SQL or BFF data

这个客户列表页需要展示「每个客户近 90 天成交金额、最近一次跟进记录和未完成待办数」。
请先判断标准 SDK 查询是否够用。
如果不够，请复用或补充平台托管 SQL / BFF，并把调用接入页面。
执行前先说明为什么需要 SQL 或 BFF，以及会影响哪些页面或接口。

The AI may call: rabetbase dataset detail, rabetbase sql detail, rabetbase codegen sql, rabetbase bff detail, rabetbase bff status.

Verify locally and prepare menu integration

页面已经开发完成，请帮我做本地验证和接入前检查。
请检查页面路由、SDK 调用、加载态、空态、错误态、表单写入、构建产物和菜单入口。
先列出通过项、风险项和阻断项。
如果需要同步菜单或更新资源，请先预览影响范围，不要直接覆盖。

The AI may call: rabetbase run start, rabetbase run build, rabetbase run preview, rabetbase menu sync, rabetbase menu update.

Further SDK reading

This page only covers how to hand system page work to an Agent. For SDK details, see the TypeScript SDK and its sub-pages.

• Getting started

  • SDK introduction
  • Quick start
  • Configuration
  • Authentication

• Data operations

  • API usage guide
  • Filter API
  • Aggregate API
  • SQL API
  • BFF API
  • User list queries
  • Multi-table queries

• Advanced features

  • Model aliases
  • Advanced features
  • Error handling
  • Syntax sugar
  • TypeScript support
  • SQL tutorial

• Reference

  • API reference
  • Using the MCP SDK
  • Real-world examples
  • Troubleshooting

• Changelog

What to add to your prompt

• Page goal: the business problem it solves.
• Page location: a new page, an existing page, route, menu, or component file.
• Data objects: datasets, fields, filter conditions, detail fields, form fields.
• Interaction requirements: filtering, pagination, sorting, detail drawers, dialogs, bulk actions, charts.
• State requirements: loading, empty, error, permission hints, form validation.
• Release constraints: verify locally first, preview menu changes, don't overwrite unrelated assets.

Completion checks

• Page files, routes, and menu entries are explained.
• The page no longer depends on mock data.
• SDK calls use real fields and real data operations.
• Loading, empty, and error states and write-failure messages are visible.
• Local debugging or build results are reported.
• Menu or asset syncs were previewed before execution.

Next step: if you only need call snippets or menu sync, see "Code generation and menus". If the data structures behind the page are still unclear, go back to "APIs and datasets: pull config, see your data clearly".