ui5-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI5 Best Practices and Coding Standards

UI5开发最佳实践与编码标准

Overview

概述

This skill enforces UI5 development standards derived from official SAP guidelines. It covers the four critical areas: coding guidelines, tooling integration, CAP integration, and form creation rules.

本规范强制执行源自SAP官方指南的UI5开发标准，涵盖四大关键领域：编码指南、工具集成、CAP集成以及表单创建规则。

1. Module Loading - CRITICAL

1. 模块加载 - 关键要求

Never Use Global Access

禁止全局访问

NEVER access UI5 framework objects globally (e.g.,

sap.m.Button

). Always declare dependencies explicitly for asynchronous loading.

绝对不要全局访问UI5框架对象（例如

sap.m.Button

）。始终显式声明依赖以实现异步加载。

JavaScript

javascript

// ❌ WRONG - Global access
var oButton = new sap.m.Button();

// ✅ CORRECT - Explicit dependency
sap.ui.define(["sap/m/Button"], function(Button) {
    var oButton = new Button();
});

// ✅ CORRECT - Dynamic loading with sap.ui.require
sap.ui.require(["sap/m/MessageBox"], function(MessageBox) {
    MessageBox.show("Hello");
});

javascript

// ❌ 错误 - 全局访问
var oButton = new sap.m.Button();

// ✅ 正确 - 显式依赖
sap.ui.define(["sap/m/Button"], function(Button) {
    var oButton = new Button();
});

// ✅ 正确 - 使用sap.ui.require动态加载
sap.ui.require(["sap/m/MessageBox"], function(MessageBox) {
    MessageBox.show("Hello");
});

TypeScript

typescript

// ❌ WRONG - Global namespace
const button: sap.m.Button;

// ✅ CORRECT - Import module
import Button from "sap/m/Button";
const button: Button;

typescript

// ❌ 错误 - 全局命名空间
const button: sap.m.Button;

// ✅ 正确 - 导入模块
import Button from "sap/m/Button";
const button: Button;

XML Views

XML视图

xml

<!-- ✅ Controls are auto-loaded by tag -->
<m:Button text="Click Me"/>

<!-- ✅ For formatters/types, use core:require -->
<ObjectListItem
    core:require="{
        Currency: 'sap/ui/model/type/Currency'
    }"
    number="{
        parts: ['invoice>Price', 'view>/currency'],
        type: 'Currency'
    }"/>

Why: Ensures proper async loading, improves performance in production builds.

Reference: UI5 documentation page "Require Modules in XML View and Fragment"

xml

<!-- ✅ 控件通过标签自动加载 -->
<m:Button text="Click Me"/>

<!-- ✅ 对于格式化器/类型，使用core:require -->
<ObjectListItem
    core:require="{
        Currency: 'sap/ui/model/type/Currency'
    }"
    number="{
        parts: ['invoice>Price', 'view>/currency'],
        type: 'Currency'
    }"/>

原因：确保正确的异步加载，提升生产构建的性能。

参考文档：UI5文档页面“在XML视图和片段中引入模块”

2. Component Initialization

2. 组件初始化

Use

sap/ui/core/ComponentSupport

for declarative initialization of the initial (root) component:

html

<!-- index.html -->
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-resource-roots='{ "my.app": "./" }'>
</script>

<body class="sapUiBody">
    <div data-sap-ui-component 
         data-name="my.app" 
         data-id="container">
    </div>
</body>

Reference: UI5 documentation page "Declarative API for Initial Components"

Note: Nested components should be managed via component usages (declared in the manifest.json of the containing component)

使用

sap/ui/core/ComponentSupport

对初始（根）组件进行声明式初始化：

html

<!-- index.html -->
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-resource-roots='{ "my.app": "./" }'>
</script>

<body class="sapUiBody">
    <div data-sap-ui-component 
         data-name="my.app" 
         data-id="container">
    </div>
</body>

参考文档：UI5文档页面“初始组件的声明式API”

注意：嵌套组件应通过组件使用（在包含组件的manifest.json中声明）进行管理

3. Data Binding Best Practices

3. 数据绑定最佳实践

Always Use Built-in Data Types

始终使用内置数据类型

ALWAYS use data binding in views to connect UI controls to data or i18n models.

Priority order:

OData types (
```
sap/ui/model/odata/type/*
```
) - Preferred
Simple types (
```
sap/ui/model/type/*
```
) - Only when no OData equivalent
Custom types - For special two-way binding scenarios or complex validation
Custom formatters - Only for unique business logic (one-way binding)

xml

<!-- ❌ WRONG - Custom formatter for standard formatting -->
<Text text="{path: 'price', formatter: '.formatCurrency'}"/>

<!-- ✅ CORRECT - Use OData type with format options -->
<Text text="{
    path: 'price',
    type: 'sap.ui.model.odata.type.Decimal',
    formatOptions: {
        style: 'currency',
        currencyCode: 'EUR'
    }
}"/>

<!-- ✅ CORRECT - Use grouping for thousands separator -->
<Text text="{
    path: 'quantity',
    type: 'sap.ui.model.odata.type.Decimal',
    formatOptions: {
        groupingEnabled: true
    }
}"/>

Common OData Types:

```
sap.ui.model.odata.type.Decimal
```
- Numbers with decimals
```
sap.ui.model.odata.type.String
```
- Text with length constraints
```
sap.ui.model.odata.type.DateTime
```
- Date and time

Common Simple Types (use only when no OData equivalent):

```
sap.ui.model.type.DateInterval
```
- Date ranges
```
sap.ui.model.type.FileSize
```
- File size formatting

Example: For number formatting with thousands separator, prefer

sap.ui.model.odata.type.Decimal

with

formatOptions: {groupingEnabled: true}

over

sap.ui.model.type.Integer

or a custom formatter.

务必在视图中使用数据绑定将UI控件与数据或i18n模型连接。

优先级顺序：

OData类型（
```
sap/ui/model/odata/type/*
```
）- 首选
简单类型（
```
sap/ui/model/type/*
```
）- 仅当没有对应的OData类型时使用
自定义类型 - 用于特殊的双向绑定场景或复杂验证
自定义格式化器 - 仅用于独特的业务逻辑（单向绑定）

xml

<!-- ❌ 错误 - 对标准格式化使用自定义格式化器 -->
<Text text="{path: 'price', formatter: '.formatCurrency'}"/>

<!-- ✅ 正确 - 使用带格式选项的OData类型 -->
<Text text="{
    path: 'price',
    type: 'sap.ui.model.odata.type.Decimal',
    formatOptions: {
        style: 'currency',
        currencyCode: 'EUR'
    }
}"/>

<!-- ✅ 正确 - 使用分组实现千位分隔符 -->
<Text text="{
    path: 'quantity',
    type: 'sap.ui.model.odata.type.Decimal',
    formatOptions: {
        groupingEnabled: true
    }
}"/>

常见OData类型：

```
sap.ui.model.odata.type.Decimal
```
- 带小数的数字
```
sap.ui.model.odata.type.String
```
- 带长度限制的文本
```
sap.ui.model.odata.type.DateTime
```
- 日期和时间

常见简单类型（仅当没有对应的OData类型时使用）：

```
sap.ui.model.type.DateInterval
```
- 日期范围
```
sap.ui.model.type.FileSize
```
- 文件大小格式化

示例：对于带千位分隔符的数字格式化，优先选择带

formatOptions: {groupingEnabled: true}

的

sap.ui.model.odata.type.Decimal

，而非

sap.ui.model.type.Integer

或自定义格式化器。

When to Use Custom Types

何时使用自定义类型

Custom types are needed for special two-way binding scenarios where built-in types don't provide the required validation or conversion logic.

Example: Custom Type for Email Validation with Two-Way Binding

javascript

// controller/EmailType.js
sap.ui.define(["sap/ui/model/SimpleType"], function(SimpleType) {
    return SimpleType.extend("my.app.type.EmailType", {
        formatValue: function(oValue) {
            return oValue;
        },
        parseValue: function(oValue) {
            return oValue;
        },
        validateValue: function(oValue) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (oValue && !emailRegex.test(oValue)) {
                throw new sap.ui.model.ValidateException("Invalid email format");
            }
        }
    });
});

Usage in View:

xml

<!-- ❌ WRONG - Formatter doesn't work for two-way binding validation -->
<Input value="{path: 'email', formatter: '.validateEmail'}"/>

<!-- ✅ CORRECT - Custom type enables two-way binding with validation -->
<Input 
    core:require="{EmailType: 'my/app/type/EmailType'}"
    value="{
        path: 'email',
        type: 'EmailType'
    }"/>

Why Custom Types:

✅ Two-way binding support (formatValue + parseValue + validateValue)
✅ Real-time validation as user types
✅ Model updates immediately on valid input
❌ Custom formatters only work for one-way (display) binding

自定义类型适用于特殊的双向绑定场景，即内置类型无法提供所需的验证或转换逻辑时。

示例：用于双向绑定验证的自定义邮箱类型

javascript

// controller/EmailType.js
sap.ui.define(["sap/ui/model/SimpleType"], function(SimpleType) {
    return SimpleType.extend("my.app.type.EmailType", {
        formatValue: function(oValue) {
            return oValue;
        },
        parseValue: function(oValue) {
            return oValue;
        },
        validateValue: function(oValue) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (oValue && !emailRegex.test(oValue)) {
                throw new sap.ui.model.ValidateException("Invalid email format");
            }
        }
    });
});

视图中的用法：

xml

<!-- ❌ 错误 - 格式化器无法用于双向绑定验证 -->
<Input value="{path: 'email', formatter: '.validateEmail'}"/>

<!-- ✅ 正确 - 自定义类型支持带验证的双向绑定 -->
<Input 
    core:require="{EmailType: 'my/app/type/EmailType'}"
    value="{
        path: 'email',
        type: 'EmailType'
    }"/>

自定义类型的优势：

✅ 支持双向绑定（formatValue + parseValue + validateValue）
✅ 用户输入时实时验证
✅ 输入有效时立即更新模型
❌ 自定义格式化器仅适用于单向（展示）绑定

Data Binding in Views

视图中的数据绑定

ALWAYS use data binding to connect controls to models:

xml

<!-- Property binding -->
<Input value="{/customer/name}"/>

<!-- Aggregation binding -->
<List items="{/products}">
    <StandardListItem title="{name}" description="{price}"/>
</List>

<!-- Expression binding -->
<Text text="{= ${quantity} * ${price} }" visible="{= ${stock} > 0 }"/>

务必使用数据绑定将控件与模型连接：

xml

<!-- 属性绑定 -->
<Input value="{/customer/name}"/>

<!-- 聚合绑定 -->
<List items="{/products}">
    <StandardListItem title="{name}" description="{price}"/>
</List>

<!-- 表达式绑定 -->
<Text text="{= ${quantity} * ${price} }" visible="{= ${stock} > 0 }"/>

4. Internationalization (i18n)

4. 国际化（i18n）

Translation Workflow Guidelines

翻译工作流指南

When modifying

.properties

files, follow the appropriate workflow based on your project type:

For development and testing:

Update
```
i18n.properties
```
(base file) only
Changes will be reflected immediately for development

Production translation workflows:

SAP S/4HANA apps: NEVER manually edit localized files (
```
i18n_de.properties
```
,
```
i18n_fr.properties
```
, etc.)
- Translation is handled through SAP's internal translation process
Apps using SAP Translation Hub or Translation Export/Import (TEW): DO NOT touch localized files
- Translations are generated automatically from the base file
Manually translated apps only: Apply changes to all locale files to maintain consistency

Why: Professional translation workflows generate localized files from the base

i18n.properties

file. Manual edits to localized files will be overwritten during the translation process.

修改

.properties

文件时，请根据项目类型遵循相应的工作流：

开发与测试阶段：

仅更新
```
i18n.properties
```
（基础文件）
更改会立即在开发环境中生效

生产翻译工作流：

SAP S/4HANA应用：绝对不要手动编辑本地化文件（
```
i18n_de.properties
```
、
```
i18n_fr.properties
```
等）
- 翻译由SAP内部翻译流程处理
使用SAP Translation Hub或翻译导出/导入（TEW）的应用：不要修改本地化文件
- 翻译会从基础文件自动生成
仅手动翻译的应用：对所有区域设置文件进行更改以保持一致性

原因：专业翻译工作流从基础的

i18n.properties

文件生成本地化文件。手动编辑本地化文件会在翻译流程中被覆盖。

5. Security - Content Security Policy

5. 安全 - 内容安全策略

Never Use Inline Scripts or Styles

禁止使用内联脚本或样式

NEVER use inline scripts or inline styles in HTML. They violate the recommended CSP settings for UI5 applications.

html

<!-- ❌ WRONG - Violates CSP -->
<script>
    alert("Hello");
</script>

<style>
    .error { color: red; }
</style>

<div style="color: red;">Styled text</div>

<!-- ✅ CORRECT - External files -->
<script src="controller/Main.controller.js"></script>
<link rel="stylesheet" href="css/style.css">

<!-- ✅ CORRECT - CSS classes -->
<div class="errorText">Styled text</div>

Requirements:

All application logic must reside in dedicated JS or TS files
All styling must reside in dedicated CSS files
Inline
```
<script>
```
tags violate CSP
Inline
```
<style>
```
tags violate CSP
Inline
```
style
```
attributes violate CSP

Reference: UI5 documentation page "Content Security Policy"

绝对不要在HTML中使用内联脚本或内联样式。它们违反UI5应用推荐的CSP设置。

html

<!-- ❌ 错误 - 违反CSP -->
<script>
    alert("Hello");
</script>

<style>
    .error { color: red; }
</style>

<div style="color: red;">Styled text</div>

<!-- ✅ 正确 - 使用外部文件 -->
<script src="controller/Main.controller.js"></script>
<link rel="stylesheet" href="css/style.css">

<!-- ✅ 正确 - 使用CSS类 -->
<div class="errorText">Styled text</div>

要求：

所有应用逻辑必须放在专用的JS或TS文件中
所有样式必须放在专用的CSS文件中
内联
```
<script>
```
标签违反CSP
内联
```
<style>
```
标签违反CSP
内联
```
style
```
属性违反CSP

参考文档：UI5文档页面“内容安全策略”

6. TypeScript Event Handling (UI5 >= 1.115.0)

6. TypeScript事件处理（UI5 >= 1.115.0）

Use Control-Specific Event Types

使用控件特定的事件类型

For UI5 1.115.0 and above, import and use the specific event type from the control's module.

Pattern:

<ControlName>$<EventName>Event

(notice the "Event" suffix)

typescript

// ✅ CORRECT - Import specific event type
import { Button$PressEvent } from "sap/m/Button";
import { Table$RowSelectionChangeEvent } from "sap/ui/table/Table";
import Controller from "sap/ui/core/mvc/Controller";

export default class MainController extends Controller {
    public onPress(event: Button$PressEvent): void {
        const button = event.getSource();  // Correctly typed as Button
        // ...
    }
    
    public onRowSelectionChange(event: Table$RowSelectionChangeEvent): void {
        // Correctly typed: getParameter is known and return value inferred
        const selectedContext = event.getParameter("rowContext");
        // ...
    }
}

对于UI5 1.115.0及以上版本，从控件模块中导入并使用特定的事件类型。

模式：

<ControlName>$<EventName>Event

（注意“Event”后缀）

typescript

// ✅ 正确 - 导入特定事件类型
import { Button$PressEvent } from "sap/m/Button";
import { Table$RowSelectionChangeEvent } from "sap/ui/table/Table";
import Controller from "sap/ui/core/mvc/Controller";

export default class MainController extends Controller {
    public onPress(event: Button$PressEvent): void {
        const button = event.getSource();  // 正确推断为Button类型
        // ...
    }
    
    public onRowSelectionChange(event: Table$RowSelectionChangeEvent): void {
        // 类型正确：getParameter已知，返回值自动推断
        const selectedContext = event.getParameter("rowContext");
        // ...
    }
}

Fallback for Older Versions

旧版本兼容方案

UI5 < 1.115.0: Control-specific event types are NOT available. Use the generic Event type:

typescript

import Event from "sap/ui/base/Event";
import Controller from "sap/ui/core/mvc/Controller";

export default class MainController extends Controller {
    public onPress(event: Event): void {
        // Generic Event type for UI5 < 1.115.0
        // ...
    }
}

Benefits: Static type checking and autocompletion for event parameters without manual casting.

UI5 < 1.115.0：控件特定的事件类型不可用。使用通用Event类型：

typescript

import Event from "sap/ui/base/Event";
import Controller from "sap/ui/core/mvc/Controller";

export default class MainController extends Controller {
    public onPress(event: Event): void {
        // UI5 < 1.115.0使用通用Event类型
        // ...
    }
}

优势：无需手动类型转换即可实现事件参数的静态类型检查与自动补全。

7. MCP Tooling Integration

7. MCP工具集成

API Lookup

API查询

ALWAYS use the

get_api_reference

tool to get information on UI5 controls and APIs. This provides direct access to the official UI5 API Reference for the UI5 version in use.

Usage: get_api_reference with project path
Returns: Official API documentation for controls, classes, and namespaces

务必使用

get_api_reference

工具获取UI5控件与API的信息。它可直接访问当前使用的UI5版本的官方UI5 API参考文档。

用法：在项目路径下执行get_api_reference
返回结果：控件、类和命名空间的官方API文档

Code Validation

代码验证

ALWAYS use the

run_ui5_linter

tool to identify issues. It detects deprecated APIs, accessibility issues, and other potential bugs.

Usage: run_ui5_linter with project path
Returns: List of issues with severity levels

务必使用

run_ui5_linter

工具识别问题。它可检测已弃用的API、可访问性问题及其他潜在bug。

用法：在项目路径下执行run_ui5_linter
返回结果：带严重级别的问题列表

Code Fixes

代码修复

To apply fixes suggested by the linter:

ALWAYS confirm with the user first
Use the
```
fix
```
parameter of the
```
run_ui5_linter
```
tool
The tool automatically corrects some identified issues
Manually fix remaining issues using the context information provided

要应用linter建议的修复：

务必先征得用户确认
使用
```
run_ui5_linter
```
工具的
```
fix
```
参数
工具会自动修复部分已识别的问题
使用提供的上下文信息手动修复剩余问题

Local Server Behavior

本地服务器行为

When interacting with the UI5 CLI's development server:

CRITICAL: The server does NOT serve a default index file.

bash

undefined

与UI5 CLI开发服务器交互时：

关键注意事项：服务器不会提供默认索引文件。

bash

undefined

❌ WRONG - Will not work

❌ 错误 - 无法正常工作

http://localhost:8080/

✅ CORRECT - Must reference files by full path

✅ 正确 - 必须使用完整路径引用文件

http://localhost:8080/index.html

undefined

http://localhost:8080/index.html

undefined

Code Quality Checks

代码质量检查

After making code changes, ALWAYS run the project's linter if available:

bash

npm run lint           # Standard
npm run eslint         # Alternative
eslint .               # Direct ESLint call
npm run ui5-lint       # UI5 Linter if configured
ui5lint .              # UI5 Linter if available as CLI tool

Why: Linters catch common issues before committing:

Missing imports or type errors
Formatting inconsistencies
Deprecated API usage
Code style violations

Fix all linting errors before committing.

完成代码更改后，务必运行项目的linter（如果可用）：

bash

npm run lint           # 标准命令
npm run eslint         # 替代命令
eslint .               # 直接调用ESLint
npm run ui5-lint       # 若已配置则使用UI5 Linter
ui5lint .              # 若UI5 Linter为CLI工具则直接调用

原因：Linters可在提交代码前发现常见问题：

缺失的导入或类型错误
格式不一致
已弃用的API使用
代码风格违规

提交前修复所有linting错误。

8. CAP Integration

8. CAP集成

When creating a UI5 project within a CAP (Cloud Application Programming Model) project:

在CAP（Cloud Application Programming Model）项目中创建UI5项目时：

Project Location

项目位置

ALWAYS create UI5 projects within the

app/

directory of the CAP project root.

cap-project/
├── app/                    # ← UI5 apps go here
│   └── my-ui5-app/
├── srv/                    # CAP services
├── db/                     # Database models
└── package.json

务必在CAP项目根目录的

app/

目录下创建UI5项目。

cap-project/
├── app/                    # ← UI5应用存放于此
│   └── my-ui5-app/
├── srv/                    # CAP服务
├── db/                     # 数据库模型
└── package.json

Service Information

服务信息

Get service information:

If CDS tools are available: Use them to get definitions, services, and endpoints

If no CDS tools: Run these commands:

bash

cds compile '*'                        # Get definitions
cds compile '*' --to serviceinfo       # Get services and endpoints

获取服务信息：

若CDS工具可用：使用它们获取定义、服务和端点

若无CDS工具：运行以下命令：

bash

cds compile '*'                        # 获取定义
cds compile '*' --to serviceinfo       # 获取服务和端点

Service Integration

服务集成

When creating the UI5 project, ALWAYS provide:

Absolute OData V4 service URL
Target entity set

创建UI5项目时，务必提供：

绝对路径的OData V4服务URL
目标实体集

Plugin Installation

插件安装

ALWAYS run in CAP project root:

bash

npm i -D cds-plugin-ui5

This plugin automatically handles serving the UI5 applications.

务必在CAP项目根目录下运行：

bash

npm i -D cds-plugin-ui5

该插件会自动处理UI5应用的服务部署。

Running the Server

运行服务器

bash

undefined

bash

undefined

❌ WRONG - Never run separate UI5 server

❌ 错误 - 绝不要单独运行UI5服务器

cd app/my-ui5-app ui5 serve # Don't do this! npm start # Don't do this!

cd app/my-ui5-app ui5 serve # 不要这么做！ npm start # 不要这么做！

✅ CORRECT - Run from CAP project root

✅ 正确 - 在CAP项目根目录下运行

cds watch # Serves both backend and UI5 apps

cds watch # 同时提供后端服务和UI5应用

or

或

cds run # Alternative command


**Why**: Single command serves both backend services and all UI5 applications from the same origin (`http://localhost:4004`).

cds run # 替代命令


**原因**：单个命令即可从同一源（`http://localhost:4004`）提供后端服务和所有UI5应用。

Data Connection

数据连接

NEVER configure

ui5-middleware-simpleproxy

ui5.yaml

yaml

undefined

绝对不要在

ui5.yaml

中配置

ui5-middleware-simpleproxy

：

yaml

undefined

❌ WRONG - No proxy needed

❌ 错误 - 无需代理

server: customMiddleware: - name: ui5-middleware-simpleproxy # Don't add this!


**Why**: `cds watch` ensures UI and service are served from the same origin, making a proxy unnecessary.

server: customMiddleware: - name: ui5-middleware-simpleproxy # 不要添加此项！


**原因**：`cds watch`确保UI与服务从同一源提供，因此无需代理。

Accessing the App

访问应用

Check the CAP launch page (typically

http://localhost:4004

) for:

List of available services
Links to UI5 applications

查看CAP启动页面（通常为

http://localhost:4004

）获取：

可用服务列表
UI5应用的链接

9. Form Creation Rules

9. 表单创建规则

Never Use SimpleForm (Unless Explicitly Requested)

绝不要使用SimpleForm（除非明确要求）

xml

<!-- ❌ AVOID - SimpleForm -->
<form:SimpleForm>
    <Label text="Name"/>
    <Input value="{name}"/>
</form:SimpleForm>

<!-- ✅ CORRECT - Use Form with ColumnLayout -->
<form:Form editable="true">
    <form:layout>
        <form:ColumnLayout
            columnsM="2"
            columnsL="3"
            columnsXL="4"/>
    </form:layout>
    <form:formContainers>
        <form:FormContainer title="Personal Data">
            <form:formElements>
                <form:FormElement label="Name">
                    <form:fields>
                        <Input value="{name}"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
</form:Form>

xml

<!-- ❌ 避免使用 - SimpleForm -->
<form:SimpleForm>
    <Label text="Name"/>
    <Input value="{name}"/>
</form:SimpleForm>

<!-- ✅ 正确 - 使用搭配ColumnLayout的Form -->
<form:Form editable="true">
    <form:layout>
        <form:ColumnLayout
            columnsM="2"
            columnsL="3"
            columnsXL="4"/>
    </form:layout>
    <form:formContainers>
        <form:FormContainer title="Personal Data">
            <form:formElements>
                <form:FormElement label="Name">
                    <form:fields>
                        <Input value="{name}"/>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
    </form:formContainers>
</form:Form>

Default Column Configuration

默认列配置

ALWAYS use these defaults unless requested differently:

M-size: 2 columns
L-size: 3 columns
XL-size: 4 columns

务必使用以下默认配置，除非有特殊要求：

M尺寸：2列
L尺寸：3列
XL尺寸：4列

Documentation References

参考文档

For additional information, consult these UI5 documentation pages:

"Require Modules in XML View and Fragment"
"Declarative API for Initial Components"
"Content Security Policy"
Official UI5 API Reference (use
```
get_api_reference
```
tool)

如需更多信息，请查阅以下UI5文档页面：

“在XML视图和片段中引入模块”
“初始组件的声明式API”
“内容安全策略”
官方UI5 API参考（使用
```
get_api_reference
```
工具）