sapui5

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SAPUI5 Development Skill

SAPUI5 开发技能

Related Skills

When to Use This Skill

使用场景

Use this skill when building SAPUI5/OpenUI5 applications, XML views, controllers, custom controls, routing, OData v2/v4 model binding, Fiori Elements integrations, QUnit/OPA5 tests, accessibility/security/performance improvements, or UI5 MCP-assisted scaffolding and API lookup.

Comprehensive skill for building enterprise applications with SAP UI5 framework.

在构建SAPUI5/OpenUI5应用、XML视图、控制器、自定义控件、路由、OData v2/v4模型绑定、Fiori Elements集成、QUnit/OPA5测试、无障碍/安全/性能优化，或使用UI5 MCP辅助脚手架和API查询时，均可使用本技能。

这是使用SAP UI5框架构建企业级应用的综合性技能。

Using MCP Tools (New in v2.0.0)

使用MCP工具（v2.0.0新增）

This skill integrates with the official @ui5/mcp-server for live development tools:

Scaffolding: Create projects with
```
ui5-app-scaffolder
```
agent or
```
/ui5-scaffold
```
command
API Reference: Lookup controls with
```
ui5-api-explorer
```
agent or
```
/ui5-api
```
command
Code Quality: Run linter with
```
ui5-code-quality-advisor
```
agent or
```
/ui5-lint
```
command
Migration: Upgrade versions with
```
ui5-migration-specialist
```
agent
Version Info: Check releases with
```
/ui5-version
```
command
Tool Catalog: List all MCP tools with
```
/ui5-mcp-tools
```
command

For setup and troubleshooting, see references/mcp-integration.md. MCP package pins are governed by sap-dependency-security and validated by

npm run validate:mcp-security

Graceful Fallback: All features work without MCP by using reference files and built-in templates.

本技能与官方**@ui5/mcp-server**集成，提供实时开发工具：

脚手架: 通过
```
ui5-app-scaffolder
```
代理或
```
/ui5-scaffold
```
命令创建项目
API参考: 通过
```
ui5-api-explorer
```
代理或
```
/ui5-api
```
命令查询控件
代码质量: 通过
```
ui5-code-quality-advisor
```
代理或
```
/ui5-lint
```
命令运行代码检查
版本迁移: 通过
```
ui5-migration-specialist
```
代理升级版本
版本信息: 通过
```
/ui5-version
```
命令查看版本发布情况
工具目录: 通过
```
/ui5-mcp-tools
```
命令列出所有MCP工具

设置和故障排查请参考references/mcp-integration.md。MCP包版本由sap-dependency-security管控，并通过

npm run validate:mcp-security

验证。

优雅降级: 所有功能无需MCP即可通过参考文件和内置模板正常运行。

Quick Start

快速开始

Creating a Basic SAPUI5 App

创建基础SAPUI5应用

Use UI5 Tooling (recommended) or SAP Business Application Studio:

bash

undefined

推荐使用UI5 Tooling或SAP Business Application Studio：

bash

undefined

Install UI5 CLI

安装UI5 CLI

npm install -g @ui5/cli

Create new project

创建新项目

mkdir my-sapui5-app && cd my-sapui5-app npm init -y

Initialize UI5 project

初始化UI5项目

ui5 init

Add UI5 dependencies

添加UI5依赖

npm install --save-dev @ui5/cli

Start development server

启动开发服务器

ui5 serve


**Project Structure**:

my-sapui5-app/ ├── webapp/ │ ├── Component.js │ ├── manifest.json │ ├── index.html │ ├── controller/ │ │ └── Main.controller.js │ ├── view/ │ │ └── Main.view.xml │ ├── model/ │ │ └── formatter.js │ ├── i18n/ │ │ └── i18n.properties │ ├── css/ │ │ └── style.css │ └── test/ │ ├── unit/ │ └── integration/ ├── ui5.yaml └── package.json


**Templates Available**:
- `templates/basic-component.js`: Component template
- `templates/manifest.json`: Application descriptor template
- `templates/xml-view.xml`: XML view with common patterns
- `templates/controller.js`: Controller with best practices
- `templates/formatter.js`: Common formatter functions

**Use templates** by copying to your project and replacing placeholders (`{{namespace}}`, `{{ControllerName}}`, etc.).

---

ui5 serve


**项目结构**:


**可用模板**:
- `templates/basic-component.js`: 组件模板
- `templates/manifest.json`: 应用描述符模板
- `templates/xml-view.xml`: 包含常见模式的XML视图模板
- `templates/controller.js`: 遵循最佳实践的控制器模板
- `templates/formatter.js`: 通用格式化函数模板

**使用模板**：复制到项目中并替换占位符（`{{namespace}}`、`{{ControllerName}}`等）。

---

Core Concepts

核心概念

1. MVC Architecture

1. MVC架构

Model: Data layer (JSON, OData, XML, Resource models)
View: Presentation layer (XML, JavaScript, JSON, HTML)
Controller: Business logic layer
Binding: Synchronizes model and view (One-way, Two-way, One-time)

Reference:

references/core-architecture.md

for detailed architecture concepts.

Model: 数据层（JSON、OData、XML、资源模型）
View: 展示层（XML、JavaScript、JSON、HTML）
Controller: 业务逻辑层
Binding: 同步模型与视图（单向、双向、一次性）

参考:

references/core-architecture.md

获取详细架构概念。

2. Component & Manifest

2. 组件与Manifest

Component.js: Entry point, initializes router and models
manifest.json: Central configuration (models, routing, dependencies, data sources)

Key manifest sections:

```
sap.app
```
: Application metadata and data sources
```
sap.ui
```
: UI technology and device types
```
sap.ui5
```
: UI5-specific configuration (models, routing, dependencies)

Component.js: 入口点，初始化路由和模型
manifest.json: 集中配置文件（模型、路由、依赖、数据源）

Manifest关键部分:

```
sap.app
```
: 应用元数据和数据源
```
sap.ui
```
: UI技术和设备类型
```
sap.ui5
```
: UI5专属配置（模型、路由、依赖）

3. Data Models

3. 数据模型

JSON Model (client-side):

javascript

var oModel = new JSONModel({
    products: [...]
});
this.getView().setModel(oModel);

OData V2 Model (server-side):

javascript

"": {
    "dataSource": "mainService",
    "settings": {
        "defaultBindingMode": "TwoWay",
        "useBatch": true
    }
}

Resource Model (i18n):

javascript

"i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "settings": {
        "bundleName": "my.app.i18n.i18n"
    }
}

Reference:

references/data-binding-models.md

for comprehensive guide.

JSON模型（客户端）:

javascript

var oModel = new JSONModel({
    products: [...]
});
this.getView().setModel(oModel);

OData V2模型（服务器端）:

javascript

"": {
    "dataSource": "mainService",
    "settings": {
        "defaultBindingMode": "TwoWay",
        "useBatch": true
    }
}

资源模型（i18n）:

javascript

"i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "settings": {
        "bundleName": "my.app.i18n.i18n"
    }
}

参考:

references/data-binding-models.md

获取完整指南。

4. Views & Controllers

4. 视图与控制器

XML View (recommended):

xml

<mvc:View
    controllerName="my.app.controller.Main"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>title}">
        <List items="{/products}">
            <StandardListItem title="{name}" description="{price}"/>
        </List>
    </Page>
</mvc:View>

XML视图（推荐）:

xml

<mvc:View
    controllerName="my.app.controller.Main"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>title}">
        <List items="{/products}">
            <StandardListItem title="{name}" description="{price}"/>
        </List>
    </Page>
</mvc:View>

5. Routing & Navigation

5. 路由与导航

Navigate programmatically:

javascript

this.getOwnerComponent().getRouter().navTo("detail", {
    objectId: sId
});

Reference:

references/routing-navigation.md

for routing patterns.

编程式导航:

javascript

this.getOwnerComponent().getRouter().navTo("detail", {
    objectId: sId
});

参考:

references/routing-navigation.md

获取路由模式详情。

SAP Fiori Elements

Build applications without JavaScript UI code using OData annotations.

无需编写JavaScript UI代码，通过OData注解构建应用。

Application Types

应用类型

List Report: Searchable, filterable tables/charts
Object Page: Detailed view with sections and facets
Analytical List Page: Visual filters and analytics
Overview Page: Card-based dashboards
Worklist: Simplified list for tasks

List Report: 可搜索、过滤的表格/图表
Object Page: 包含章节和 facets 的详情视图
Analytical List Page: 可视化筛选器和分析功能
Overview Page: 基于卡片的仪表板
Worklist: 简化的任务列表

Quick Setup

快速设置

manifest.json for List Report + Object Page:

json

{
    "sap.ui5": {
        "dependencies": {
            "libs": {
                "sap.fe.templates": {}
            }
        },
        "routing": {
            "targets": {
                "ProductsList": {
                    "type": "Component",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "variantManagement": "Page"
                        }
                    }
                }
            }
        }
    }
}

Key Annotations:

```
@UI.LineItem
```
: Table columns
```
@UI.SelectionFields
```
: Filter bar fields
```
@UI.HeaderInfo
```
: Object page header
```
@UI.Facets
```
: Object page sections

Reference:

references/fiori-elements.md

for comprehensive guide.

List Report + Object Page 的 manifest.json:

json

{
    "sap.ui5": {
        "dependencies": {
            "libs": {
                "sap.fe.templates": {}
            }
        },
        "routing": {
            "targets": {
                "ProductsList": {
                    "type": "Component",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "variantManagement": "Page"
                        }
                    }
                }
            }
        }
    }
}

关键注解:

```
@UI.LineItem
```
: 表格列
```
@UI.SelectionFields
```
: 筛选栏字段
```
@UI.HeaderInfo
```
: 对象页面头部
```
@UI.Facets
```
: 对象页面章节

参考:

references/fiori-elements.md

获取完整指南。

Metadata-Driven Controls (MDC)

元数据驱动控件（MDC）

The sap.ui.mdc library provides metadata-driven controls for building dynamic UIs at runtime.

sap.ui.mdc库提供元数据驱动控件，用于在运行时构建动态UI。

Key Controls

核心控件

MDC Table: Data display with dynamic columns based on metadata
MDC FilterBar: Complex filter conditions with PropertyInfo
MDC Value Help: Assisted data input with suggestions

MDC Table: 基于元数据动态显示列的数据表格
MDC FilterBar: 结合PropertyInfo实现复杂筛选条件
MDC Value Help: 带建议的辅助数据输入控件

Quick Example

快速示例

xml

<mdc:Table
    id="mdcTable"
    delegate='{name: "my/app/delegate/TableDelegate", payload: {}}'
    p13nMode="Sort,Filter,Column"
    type="ResponsiveTable">
    <mdc:columns>
        <mdcTable:Column propertyKey="name" header="Name">
            <Text text="{name}"/>
        </mdcTable:Column>
    </mdc:columns>
</mdc:Table>

Reference:

references/mdc-typescript-advanced.md

for comprehensive MDC guide with TypeScript.

xml

<mdc:Table
    id="mdcTable"
    delegate='{name: "my/app/delegate/TableDelegate", payload: {}}'
    p13nMode="Sort,Filter,Column"
    type="ResponsiveTable">
    <mdc:columns>
        <mdcTable:Column propertyKey="name" header="Name">
            <Text text="{name}"/>
        </mdcTable:Column>
    </mdc:columns>
</mdc:Table>

参考:

references/mdc-typescript-advanced.md

获取包含TypeScript的完整MDC指南。

Testing

测试

Unit Tests (QUnit)

单元测试（QUnit）

Test individual functions and modules:

javascript

QUnit.module("Formatter Tests");
QUnit.test("Should format price correctly", function(assert) {
    var fPrice = 123.456;
    var sResult = formatter.formatPrice(fPrice);
    assert.strictEqual(sResult, "123.46 EUR", "Price formatted");
});

测试独立函数和模块:

javascript

QUnit.module("Formatter Tests");
QUnit.test("Should format price correctly", function(assert) {
    var fPrice = 123.456;
    var sResult = formatter.formatPrice(fPrice);
    assert.strictEqual(sResult, "123.46 EUR", "Price formatted");
});

Integration Tests (OPA5)

集成测试（OPA5）

Test user interactions and flows:

javascript

opaTest("Should navigate to detail page", function(Given, When, Then) {
    Given.iStartMyApp();
    When.onTheWorklistPage.iPressOnTheFirstListItem();
    Then.onTheObjectPage.iShouldSeeTheObjectPage();
    Then.iTeardownMyApp();
});

测试用户交互和流程:

javascript

opaTest("Should navigate to detail page", function(Given, When, Then) {
    Given.iStartMyApp();
    When.onTheWorklistPage.iPressOnTheFirstListItem();
    Then.onTheObjectPage.iShouldSeeTheObjectPage();
    Then.iTeardownMyApp();
});

Mock Server

模拟服务器

Simulate OData backend:

javascript

var oMockServer = new MockServer({
    rootUri: "/sap/opu/odata/sap/SERVICE_SRV/"
});
oMockServer.simulate("localService/metadata.xml", {
    sMockdataBaseUrl: "localService/mockdata"
});
oMockServer.start();

Reference:

references/testing.md

for comprehensive testing guide.

模拟OData后端:

javascript

var oMockServer = new MockServer({
    rootUri: "/sap/opu/odata/sap/SERVICE_SRV/"
});
oMockServer.simulate("localService/metadata.xml", {
    sMockdataBaseUrl: "localService/mockdata"
});
oMockServer.start();

参考:

references/testing.md

获取完整测试指南。

Best Practices

最佳实践

Always Use Async - sap.ui.define, async:true in manifests
Use XML Views - declarative and tooling-friendly
Proper Namespacing - com.mycompany.myapp.controller.Main
Internationalization - always use i18n for texts
Data Binding Over Manual Updates - automatic XSS protection
Security - enable CSP, validate input, use HTTPS
Performance - component preload, lazy loading, batch requests
Accessibility - semantic controls, labels, keyboard navigation

始终使用异步模式 - sap.ui.define、manifest中设置async:true
优先使用XML视图 - 声明式写法且更适配工具
正确命名空间 - com.mycompany.myapp.controller.Main
国际化 - 文本始终使用i18n
数据绑定替代手动更新 - 自动提供XSS防护
安全 - 启用CSP、验证输入、使用HTTPS
性能 - 组件预加载、懒加载、批量请求
无障碍 - 语义化控件、标签、键盘导航

Common Patterns

常见模式

CRUD Operations

CRUD操作

javascript

// Create
oModel.create("/Products", oData, {success: function() {MessageToast.show("Created");}});

// Read
oModel.read("/Products", {filters: [new Filter("Price", FilterOperator.GT, 100)]});

// Update
oModel.update("/Products(1)", {Price: 200}, {success: function() {MessageToast.show("Updated");}});

// Delete
oModel.remove("/Products(1)", {success: function() {MessageToast.show("Deleted");}});

javascript

// 创建
oModel.create("/Products", oData, {success: function() {MessageToast.show("Created");}});

// 读取
oModel.read("/Products", {filters: [new Filter("Price", FilterOperator.GT, 100)]});

// 更新
oModel.update("/Products(1)", {Price: 200}, {success: function() {MessageToast.show("Updated");}});

// 删除
oModel.remove("/Products(1)", {success: function() {MessageToast.show("Deleted");}});

Filtering & Sorting

筛选与排序

javascript

var oBinding = this.byId("table").getBinding("items");
oBinding.filter([new Filter("price", FilterOperator.GT, 100)]);
oBinding.sort([new Sorter("name", false)]);

javascript

var oBinding = this.byId("table").getBinding("items");
oBinding.filter([new Filter("price", FilterOperator.GT, 100)]);
oBinding.sort([new Sorter("name", false)]);

Dialog Handling

对话框处理

javascript

if (!this.pDialog) {
    this.pDialog = this.loadFragment({
        name: "my.app.view.fragments.MyDialog"
    });
}
this.pDialog.then(function(oDialog) {oDialog.open();});

javascript

if (!this.pDialog) {
    this.pDialog = this.loadFragment({
        name: "my.app.view.fragments.MyDialog"
    });
}
this.pDialog.then(function(oDialog) {oDialog.open();});

Troubleshooting Common Issues

常见问题排查

Binding not working

绑定不生效

Check model set on view/component
Verify correct binding path
Confirm data loaded

Debug:

console.log(this.getView().getModel().getData())

检查视图/组件上是否设置了模型
验证绑定路径是否正确
确认数据已加载

调试:

console.log(this.getView().getModel().getData())

OData call failing

OData调用失败

Verify service URL in manifest.json
Check CORS configuration
Test authentication
Use browser Network tab

验证manifest.json中的服务URL
检查CORS配置
测试认证
使用浏览器网络面板

View not displaying

视图不显示

Check view registration in manifest.json
Verify routing configuration
Match controller name
Check browser console for errors

检查manifest.json中的视图注册
验证路由配置
匹配控制器名称
查看浏览器控制台错误

Performance problems

性能问题

Enable component preload
Use growing lists for large datasets
Implement OData paging
Use one-way binding when possible

启用组件预加载
对大数据集使用可展开列表
实现OData分页
尽可能使用单向绑定

Development Tools

开发工具

UI5 Tooling

bash

ui5 serve    # Development server
ui5 build    # Build for production
npm test     # Run tests

bash

ui5 serve    # 开发服务器
ui5 build    # 生产构建
npm test     # 运行测试

UI5 Inspector

Browser extension for debugging
View control tree and bindings
Performance analysis

浏览器调试扩展
查看控件树和绑定
性能分析

Support Assistant

Press
```
Ctrl+Alt+Shift+S
```
Built-in quality checker

按
```
Ctrl+Alt+Shift+S
```
呼出
内置质量检查工具

Bundled Reference Files

捆绑参考文件

This skill includes comprehensive reference documentation (15 files):

references/glossary.md: Complete SAPUI5 terminology and concepts (100+ terms)
references/core-architecture.md: Framework architecture, components, MVC, bootstrapping
references/data-binding-models.md: Data binding, models, filters, sorters
references/testing.md: QUnit, OPA5, mock server, test automation
references/fiori-elements.md: Fiori Elements templates, annotations, configuration
references/typescript-support.md: TypeScript setup, configuration, migration
references/routing-navigation.md: Routing, navigation, Flexible Column Layout
references/performance-optimization.md: Performance best practices, optimization
references/accessibility.md: WCAG 2.1 compliance, screen readers, ARIA
references/security.md: XSS prevention, CSP, authentication, CSRF
references/mdc-typescript-advanced.md: MDC controls, TypeScript control libraries
references/mcp-integration.md: MCP setup, troubleshooting, and fallback behavior
references/code-quality-checklist.md: Review checklist for UI5 projects
references/migration-patterns.md: Upgrade and modernization patterns
references/scaffolding-templates.md: Project scaffolding guidance

Access these files for detailed information on specific topics while keeping the main skill concise.

本技能包含完整的参考文档（15个文件）:

references/glossary.md: 完整的SAPUI5术语和概念（100+术语）
references/core-architecture.md: 框架架构、组件、MVC、引导流程
references/data-binding-models.md: 数据绑定、模型、筛选器、排序器
references/testing.md: QUnit、OPA5、模拟服务器、测试自动化
references/fiori-elements.md: Fiori Elements模板、注解、配置
references/typescript-support.md: TypeScript设置、配置、迁移
references/routing-navigation.md: 路由、导航、灵活列布局
references/performance-optimization.md: 性能最佳实践、优化
references/accessibility.md: WCAG 2.1合规、屏幕阅读器、ARIA
references/security.md: XSS防护、CSP、认证、CSRF
references/mdc-typescript-advanced.md: MDC控件、TypeScript控件库
references/mcp-integration.md: MCP设置、故障排查、降级行为
references/code-quality-checklist.md: UI5项目评审清单
references/migration-patterns.md: 升级和现代化模式
references/scaffolding-templates.md: 项目脚手架指南

访问这些文件获取特定主题的详细信息，同时保持主技能内容简洁。

Templates Included

包含的模板

Ready-to-use templates in

templates/

directory:

basic-component.js: Component.js template with best practices
manifest.json: Complete application descriptor template
xml-view.xml: XML view with common patterns
controller.js: Controller template with lifecycle hooks
formatter.js: Common formatter functions

templates/

目录下的即用型模板:

basic-component.js: 遵循最佳实践的Component.js模板
manifest.json: 完整的应用描述符模板
xml-view.xml: 包含常见模式的XML视图模板
controller.js: 包含生命周期钩子的控制器模板
formatter.js: 通用格式化函数模板

Instructions for Claude

Claude使用说明

When using this skill:

Always use async patterns - sap.ui.define, async:true
Prefer XML views - more declarative and tooling-friendly
Use data binding - automatic XSS protection
Refer to reference files - for detailed information
Use templates - copy from templates/ and replace placeholders
Follow best practices - security, performance, accessibility
Provide working examples - test code patterns before suggesting

使用本技能时:

始终使用异步模式 - sap.ui.define、async:true
优先使用XML视图 - 更具声明性且适配工具
使用数据绑定 - 自动提供XSS防护
参考参考文件 - 获取详细信息
使用模板 - 从templates/复制并替换占位符
遵循最佳实践 - 安全、性能、无障碍
提供可运行示例 - 建议前先测试代码模式

Bundled Resources

捆绑资源

Reference Documentation

参考文档

```
references/accessibility.md
```
- Accessibility best practices
```
references/core-architecture.md
```
- Framework architecture and component patterns
```
references/data-binding-models.md
```
- Data binding and model usage
```
references/fiori-elements.md
```
- Fiori Elements templates and annotations
```
references/mdc-typescript-advanced.md
```
- MDC and TypeScript guidance
```
references/mcp-integration.md
```
- MCP setup and troubleshooting
```
references/migration-patterns.md
```
- Migration from older versions
```
references/performance-optimization.md
```
- Performance optimization techniques
```
references/testing.md
```
- Testing strategies and frameworks
```
references/security.md
```
- XSS, CSP, authentication, and CSRF guidance

```
references/accessibility.md
```
- 无障碍最佳实践
```
references/core-architecture.md
```
- 框架架构和组件模式
```
references/data-binding-models.md
```
- 数据绑定和模型使用
```
references/fiori-elements.md
```
- Fiori Elements模板和注解
```
references/mdc-typescript-advanced.md
```
- MDC和TypeScript指南
```
references/mcp-integration.md
```
- MCP设置和故障排查
```
references/migration-patterns.md
```
- 从旧版本迁移
```
references/performance-optimization.md
```
- 性能优化技巧
```
references/testing.md
```
- 测试策略和框架
```
references/security.md
```
- XSS、CSP、认证和CSRF指南

Templates

模板

```
templates/basic-component.js
```
- Component development template
```
templates/controller.js
```
- Controller template
```
templates/xml-view.xml
```
- XML view template
```
templates/formatter.js
```
- Formatter helper template
```
templates/manifest.json
```
- Application manifest template

License: GPL-3.0 Next Review: 2026-02-27 (Quarterly)

```
templates/basic-component.js
```
- 组件开发模板
```
templates/controller.js
```
- 控制器模板
```
templates/xml-view.xml
```
- XML视图模板
```
templates/formatter.js
```
- 格式化工具模板
```
templates/manifest.json
```
- 应用manifest模板

License: GPL-3.0 Next Review: 2026-02-27 (Quarterly)

sapui5

Original

Translation

SAPUI5 Development Skill

SAPUI5 开发技能

Related Skills

相关技能

When to Use This Skill

使用场景

Using MCP Tools (New in v2.0.0)

使用MCP工具（v2.0.0新增）

Table of Contents

目录

Quick Start

快速开始

Creating a Basic SAPUI5 App

创建基础SAPUI5应用

Install UI5 CLI

安装UI5 CLI

Create new project

创建新项目

Initialize UI5 project

初始化UI5项目

Add UI5 dependencies

添加UI5依赖

Start development server

启动开发服务器

Core Concepts

核心概念

1. MVC Architecture

1. MVC架构

2. Component & Manifest

2. 组件与Manifest

3. Data Models

3. 数据模型

4. Views & Controllers

4. 视图与控制器

5. Routing & Navigation

5. 路由与导航

SAP Fiori Elements

SAP Fiori Elements

Application Types

应用类型

Quick Setup

快速设置

Metadata-Driven Controls (MDC)

元数据驱动控件（MDC）

Key Controls

核心控件

Quick Example

快速示例

Testing

测试

Unit Tests (QUnit)

单元测试（QUnit）

Integration Tests (OPA5)

集成测试（OPA5）

Mock Server

模拟服务器

Best Practices

最佳实践

Common Patterns

常见模式

CRUD Operations

CRUD操作

Filtering & Sorting

筛选与排序

Dialog Handling

对话框处理

Troubleshooting Common Issues

常见问题排查

Binding not working

绑定不生效

OData call failing

OData调用失败

View not displaying

视图不显示

Performance problems

性能问题

Development Tools