本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 组件参考
<a name="components-reference"></a>

本主题详细介绍了 App Studio 的每个组件及其属性，并包括配置示例。

## 常用组件属性
<a name="common-properties"></a>

本节概述了应用程序工作室中多个组件共享的一般属性和功能。每种属性类型的具体实现细节和用例可能因组件而异，但这些属性的总体概念在 App Studio 中保持一致。

### Name
<a name="common-properties-component-name"></a>

将为每个组件生成一个默认名称；但是，您可以进行编辑以更改为每个组件的唯一名称。您将使用此名称从同一页面中的其他组件或表达式中引用该组件及其数据。限制：不要在组件名称中包含空格；它只能包含字母、数字、下划线和美元符号。示例：`userNameInput`、`ordersTable`、`metricCard1`。

### 主要值、次要值和值
<a name="common-properties-component-values"></a>

Application Studio 中的许多组件都提供了用于指定值或表达式的字段，这些值或表达式决定了组件中显示的内容或数据。根据组件类型和用途 `Primary value``Secondary value`，这些字段通常被标记为`Value`、或简单标记。

该`Primary value`字段通常用于定义应在组件中突出显示的主值、数据点或内容。

该`Secondary value`字段（如果可用）用于在主要值旁边显示附加值或支持值或信息。

该`Value`字段允许您指定应在组件中显示的值或表达式。

这些字段支持静态文本输入和动态表达式。通过使用表达式，您可以引用应用程序中其他组件、数据源或变量的数据，从而实现动态和数据驱动的内容显示。

#### 表达式的语法
<a name="common-properties-component-values-expression-syntax"></a>

在这些字段中输入表达式的语法遵循一致的模式：

```
{{expression}}
```

其中，*expression*是计算结果为所需值或要显示的数据的有效表达式。

##### 示例：静态文本
<a name="common-properties-component-values-static-text-examples"></a>
+ 主要值：您可以直接输入静态数字或值，例如`"123"`或`"$1,999.99"`。
+ 次要值：您可以输入静态文本标签，例如`"Goal"`或`"Projected Revenue"`。
+ 值：您可以输入静态字符串，例如`"since last month"`或`"Total Quantity"`。

##### 示例：表达式
<a name="common-properties-component-values-expression-examples"></a>
+ `Hello, {{currentUser.firstName}}`：显示带有当前登录用户的名字的问候语。
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`：根据用户的角色有条件地显示不同的仪表板标题。
+ `{{ui.componentName.data?.[0]?.fieldName}}`：从 ID 为 ID `componentName` 的组件数据中的第一项中检索该`fieldName`字段的值。
+ `{{ui.componentName.value * 100}}`：对带有 ID 的组件的值进行计算`componentName`。
+ `{{ui.componentName.value + ' items'}}`：将组件的值与 ID `componentName` 和字符串连接起来。`' items'`
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`：从`ordersTable`组件的第一行数据中检索订单号。
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`：通过将`salesMetrics`组件中第一行数据的总收入增加 15% 来计算预计收入。
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`：连接组件中数据的名字和姓氏。`customerProfile`
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`：将`orderDetails`组件中的订单日期格式化为更具可读性的日期字符串。
+ `{{ui.productList.data?.length}}`：显示连接到`productList`组件的数据中的产品总数。
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`：根据折扣百分比和订单总额计算折扣金额。
+ `{{ui.cartItemCount.value + ' items in cart'}}`：显示购物车中的商品数量以及标签`items in cart`。

通过使用这些表达式字段，可以在应用程序中创建动态和数据驱动的内容，从而显示根据用户上下文或应用程序状态量身定制的信息。这可以实现更加个性化和交互性的用户体验。

### 标签
<a name="common-properties-label"></a>

L **abel** 属性允许您为组件指定标题或标题。此标签通常显示在组件旁边或上方，以帮助用户了解其用途。

您可以使用静态文本和表达式来定义标签。

#### 示例：静态文本
<a name="label-static-example"></a>

如果您在 “标签” 字段中输入文本 “名字”，则组件的标签将显示 “名字”。

#### 示例：表达式
<a name="label-expression-examples"></a>

##### 示例：零售店
<a name="label-expression-examples-retail-store-label"></a>

以下示例为每位用户个性化标签，使界面更适合个人：

```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```

##### 示例：SaaS 项目管理
<a name="label-expression-examples-project-management-label"></a>

以下示例从选定项目中提取数据以提供特定于上下文的标签，从而帮助用户在应用程序中保持定向：

```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```

##### 示例：医疗诊所
<a name="label-expression-examples-healthcare-clinic-label"></a>

以下示例引用了当前用户的个人资料和医生的信息，为患者提供了更加个性化的体验。

```
Dr. {{ui.doctorProfileTable.data.firstName}}
       {{ui.doctorProfileTable.data.lastName}}
```

### Placeholder
<a name="common-properties-placeholder"></a>

Placeholder 属性允许您指定当组件为空时显示的提示或指导文本。这可以帮助用户理解预期的输入格式或提供其他上下文。

您可以使用静态文本和表达式来定义占位符。

#### 示例：静态文本
<a name="placeholder-static-example"></a>

如果在 “**占位符**” 字段`Enter your name`中输入文本，则该组件将显示`Enter your name`为占位符文本。

#### 示例：表达式
<a name="placeholder-expression-examples"></a>

##### 示例：金融服务
<a name="placeholder-expression-examples-financial-services-placeholder"></a>

 `Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`这些示例从所选账户中提取数据以显示相关提示，从而使银行客户的界面变得直观。

##### 示例：电子商务
<a name="placeholder-expression-examples-ecommerce-placeholder"></a>

 `Enter the coupon code for {{ui.cartTable.data.currency}} total`此处的占位符会根据用户的购物车内容动态更新，从而提供无缝的结账体验。

##### 示例：医疗诊所
<a name="placeholder-expression-examples-healthcare-clinic-placeholder"></a>

 `Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`通过使用引用患者年龄的表达式，应用程序可以创建更加个性化和有用的占位符。

### 来源
<a name="common-properties-source"></a>

S **ourc** e 属性允许您为组件选择数据源。选择后，您可以从以下数据源类型中进行选择：`entity``expression`、或`automation`。

#### 实体
<a name="common-properties-source-entity"></a>

选择 “**实体**” 作为数据源可以将组件连接到应用程序中的现有数据实体或模型。如果您想在整个应用程序中使用定义明确的数据结构或架构，则此功能非常有用。

何时使用实体数据源：
+ 当您的数据模型或实体包含要在组件中显示的信息时（例如，带有 “名称”、“描述”、“价格” 等字段的 “产品” 实体）。
+ 当您需要从数据库、API 或其他外部数据源动态获取数据并将其呈现在组件中时。
+ 当您想利用应用程序的数据模型中定义的关系和关联时。

##### 选择对实体的查询
<a name="common-properties-source-selecting-entity-query"></a>

有时，您可能希望将组件连接到从实体而不是整个实体检索数据的特定查询。在实体数据源中，您可以选择从现有查询中进行选择或创建新查询。

通过选择查询，您可以：
+ 根据特定条件筛选组件中显示的数据。
+ 向查询传递参数以动态筛选或排序数据。
+ 利用查询中定义的复杂联接、聚合或其他数据操作技术。

例如，如果您的应用程序中有一个`Customers`实体，其中包含诸如`Name``Email`、和之类的字段`PhoneNumber`。您可以将表格组件连接到该实体，然后选择一个预定义`ActiveCustomers`的数据操作，根据客户的状态筛选客户。这允许您仅显示表格中的活跃客户，而不是整个客户数据库。

##### 向实体数据源添加参数
<a name="common-properties-source-adding-entity-parameters"></a>

使用实体作为数据源时，也可以向组件添加参数。这些参数可用于筛选、排序或转换组件中显示的数据。

例如，如果您的`Products`实体包含诸如`Name`、`Description``Price`、和之类的字段`Category`。您可以将名为`category`的参数添加到显示产品列表的表格组件。当用户从下拉列表中选择类别时，表格将自动更新为仅显示属于所选类别的产品，使用数据操作中的`{{params.category}}`表达式。

#### Expression
<a name="common-properties-source-expression"></a>

选择 E **x** pression 作为数据源，输入自定义表达式或计算，为组件动态生成数据。当您需要执行转换、合并来自多个源的数据或根据特定的业务逻辑生成数据时，这非常有用。

何时使用**表达式**数据源：
+ 当您需要计算或导出数据模型中无法直接提供的数据时（例如，根据数量和价格计算订单总价值）。
+ 当您想要合并来自多个实体或数据源的数据以创建复合视图时（例如，显示客户的订单历史记录及其联系信息）。
+ 当您需要根据特定规则或条件生成数据时（例如，根据用户的浏览历史显示 “推荐产品” 列表）。

例如，如果您有一个*Metrics*组件需要显示当月的总收入，则可以使用类似以下的表达式来计算和显示每月收入：

```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```

##### 自动化
<a name="common-properties-source-automation"></a>

选择 **Automation** 作为数据源，将组件连接到应用程序中的现有自动化或工作流程。当组件的数据或功能是作为特定流程或工作流的一部分生成或更新时，这很有用。

何时使用**自动化**数据源：
+ 当组件中显示的数据是特定自动化或工作流程的结果时（例如，作为批准流程一部分更新的 “待批准” 表）。
+ 当您想根据自动化中的事件或条件触发组件的操作或更新时（例如，使用某个 SKU 的最新销售数据更新指标）。
+ 当您需要通过自动化将组件与应用程序中的其他服务或系统集成时（例如，从第三方 API 获取数据并将其显示在表格中）。

例如，如果您有一个用于指导用户完成求职流程的 stepflow 组件。stepflow 组件可以连接到处理求职申请提交、背景调查和录用生成自动化。随着这些步骤的自动化，stepflow 组件可以动态更新以反映应用程序的当前状态。

通过为每个组件仔细选择适当的数据源，您可以确保应用程序的用户界面由正确的数据和逻辑提供支持，从而为用户提供无缝且引人入胜的体验。

### 在以下情况下可见
<a name="visible-if"></a>

使用 V **isible if** 属性根据特定条件或数据值显示或隐藏组件或元素。当您想要动态控制应用程序用户界面某些部分的可见性时，这很有用。

Visi **ble if** 属性使用以下语法：

```
{{expression ? true : false}}
```

或者

```
{{expression}}
```

其中*expression*，是计算结果为`true`或`false`的布尔表达式。

如果表达式的计算结果为`true`，则该组件将可见。如果表达式的计算结果为`false`，则该组件将被隐藏。该表达式可以引用应用程序中其他组件、数据源或变量的值。

#### if 表达式示例可见
<a name="visible-if-examples"></a>

##### 示例：根据电子邮件输入显示或隐藏密码输入字段
<a name="visible-if-example-password-email"></a>

想象一下，你有一个带有电子邮件输入字段和密码输入字段的登录表单。只有当用户输入了电子邮件地址时，才需要显示密码输入字段。你可以使用以下 Visible if 表达式：

```
{{ui.emailInput.value !== ""}}
```

此表达式检查`emailInput`组件的值是否不是空字符串。如果用户输入了电子邮件地址，则表达式的计算结果为`true`，密码输入字段将可见。如果电子邮件字段为空，则表达式的计算结果为`false`，密码输入字段将被隐藏。

##### 示例：根据下拉列表选择显示其他表单域
<a name="visible-if-example-form-fields-dropdown"></a>

假设你有一个表单，用户可以在其中从下拉列表中选择一个类别。根据所选类别，您想要显示或隐藏其他表单域以收集更具体的信息。

例如，如果用户选择*Products*类别，则可以使用以下表达式来显示其他*Product Details*字段：

```
{{ui.categoryDropdown.value === "Products"}}
```

如果用户选择*Services*或*Consulting*类别，则可以使用此表达式来显示一组不同的附加字段：

```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```

##### 示例：其他
<a name="visible-if-example-other"></a>

要使组件在`textInput1`组件的值不是空字符串时可见，请执行以下操作：

```
{{ui.textInput1.value === "" ? false : true}}
```

要使组件始终可见，请执行以下操作：

```
{{true}}
```

要使组件在`emailInput`组件的值不是空字符串时可见，请执行以下操作：

```
{{ui.emailInput.value !== ""}}
```

### 在以下情况下禁用
<a name="disabled-if"></a>

“**如果** Disabled if” 功能允许您根据特定条件或数据值有条件地启用或禁用组件。这是通过使用 Disabled i **f** 属性来实现的，该属性接受一个布尔表达式，用于确定应启用还是禁用组件。

**如果 Disab** led if 属性使用以下语法：

```
{{expression ? true : false}}
```

或者

```
{{expression}}
```

#### 如果表达式示例，则禁用
<a name="disabled-if-examples"></a>

##### 示例：根据表单验证禁用提交按钮
<a name="disabled-if-example-disable-submit-button"></a>

如果您的表单包含多个输入字段，并且想要在正确填写所有必填字段之前禁用提交按钮，则可以使用以下 Disabled I **f** 表达式：

```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```

此表达式检查必填的输入字段（`nameInput`、`emailInput`、`passwordInput`）是否为空。如果任何字段为空，则表达式的计算结果为`true`，提交按钮将被禁用。填写完所有必填字段后，表达式的计算结果为`false`，提交按钮将启用。

通过在 Visib **le** if 和 Dis **abled ff** 属性中使用这些类型的条件表达式，您可以创建适应用户输入的动态响应式用户界面，从而为应用程序的用户提供更加精简和相关的体验。

其中*expression*，是计算结果为真或假的布尔表达式。

示例：

```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```

#### 容器布局
<a name="container-layouts"></a>

布局属性决定了组件中一个或多个内容的排列和定位方式。有几个布局选项可供选择，每个选项都由一个图标表示：
+ **列布局**：此布局将内容或元素垂直排列在一列中。
+ **双列布局**：此布局将组件分成两个等宽的列，允许您并排放置内容或元素。
+ **行布局**：此布局将内容或元素水平排列在一行中。

##### 方向
<a name="container-layouts-orientation"></a>
+ **横向**：此布局将内容或元素水平排列成一行。
+ **垂直**：此布局将内容或元素垂直排列在一列中。
+ **内联换**行：此布局将内容或元素水平排列，但如果元素超过可用宽度，则换行到下一行。

##### 一致性
<a name="container-layouts-alignment"></a>
+ **左**：将一个或多个内容与组件的左侧对齐。
+ **居**中：将内容或元素在组件内水平居中。
+ **右**：将一个或多个内容与组件的右侧对齐。

##### 宽度
<a name="container-layouts-width"></a>

**宽**度属性指定组件的水平大小。您可以输入介于 0% 和 100% 之间的百分比值，表示组件相对于其父容器或可用空间的宽度。

##### 高度
<a name="container-layouts-height"></a>

He **ig** ht 属性指定组件的垂直大小。“auto” 值会根据组件的内容或可用空间自动调整组件的高度。

##### 两者之间的间隔
<a name="container-layouts-space-between"></a>

**“间距” 属性决定组件内内容或元素之间的间距或间距。**你可以选择一个从 0px（无间距）到 64px 的值，增量为 4px（例如，4px、8px、12px 等）。

##### Padding
<a name="container-layouts-padding"></a>

**Paddin** g 属性控制一个或多个内容与组件边缘之间的空间。你可以选择一个从 0px（无填充）到 64px 的值，增量为 4px（例如 4px、8px、12px 等）。

##### 背景
<a name="container-layouts-background"></a>

**背景**启用或禁用组件的背景颜色或样式。

这些布局属性可以灵活地排列和定位组件内的内容，以及控制组件本身的大小、间距和视觉外观。

## 数据组件
<a name="data-components"></a>

本节介绍应用程序工作室中可用的各种数据组件，包括**表**、**详细信息**、**指标**、**表单**和**中继器**组件。这些组件用于在应用程序中显示、收集和操作数据。

### 表
<a name="table-component"></a>

**表格**组件以表格格式显示数据，包括行和列。它用于以有条理 easy-to-read的方式呈现结构化数据，例如数据库中的项目列表或记录。

#### 表属性
<a name="table-component-properties"></a>

**表**组件与其他组件共享多个共同属性，例如`Name``Source`、和`Actions`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，**表**组件还具有特定的属性和配置选项，包括`Columns``Search and export`、和`Expressions`。

##### 列
<a name="table-component-properties-columns"></a>

在本节中，您可以定义要在表格中显示的列。可以为每列配置以下属性：
+ **格式**：字段的数据类型，例如：文本、数字、日期。
+ **列标签**：列的标题文本。
+ **值**：应在此列中显示的数据源字段。

  此字段允许您指定应在列单元格中显示的值或表达式。您可以使用表达式来引用来自连接源或其他组件的数据。

  示例：`{{currentRow.title}}`-此表达式将在列单元格中显示当前行的*title*字段值。
+ **启用排序**：此开关允许您启用或禁用特定列的排序功能。启用后，用户可以根据此列中的值对表格数据进行排序。

##### 搜索和导出
<a name="table-component-properties-search-and-export"></a>

**表格**组件提供以下开关，用于启用或禁用搜索和导出功能：
+ **显示搜索**启用后，此开关会向表格中添加搜索输入字段，允许用户搜索和筛选显示的数据。
+ **显示导出**启用后，此开关会向表格添加导出选项，允许用户下载各种格式的表格数据，例如：CSV。

**注意**  
默认情况下，搜索功能仅限于已加载到表中的数据。要全面使用搜索，您需要加载所有页面的数据。

##### 每页行数
<a name="table-component-properties-rows-per-page"></a>

您可以指定表格中每页要显示的行数。然后，用户可以在页面之间导航以查看完整的数据集。

##### 预取限制
<a name="table-component-properties-pre-fetch-limit"></a>

指定每个查询请求中要预取的最大记录数。最大值为 3000。

##### 操作
<a name="table-component-properties-actions"></a>

在 “**操作**” 部分中，配置以下属性：
+ **操作位置**：启用 “**固定到右侧**” 后，无论用户如何滚动，任何添加的操作都将始终显示在表格的右侧。
+ **操作**：向表格中添加操作按钮。您可以将这些按钮配置为在用户单击时执行指定的操作，例如：
  + 运行组件操作
  + 导航到其他页面
  + 调用数据操作
  + 运行自定义 JavaScript
  + 调用自动化

##### Expressions
<a name="table-component-properties-expressions"></a>

**表格**组件提供了多个使用表达式和行级操作功能的区域，允许您自定义和增强表格的功能和交互性。它们允许您在表格中动态引用和显示数据。通过利用这些表达式字段，您可以创建动态列，将数据传递给行级操作，以及引用应用程序中其他组件或表达式中的表数据。

##### 示例：引用行值
<a name="table-component-properties-examples-referencing-row-values"></a>

`{{currentRow.columnName}}`或者`{{currentRow["Column Name"]}}`这些表达式允许您为正在呈现的当前行引用特定列的值。*Column Name*用要引用的列的实际名称替换*columnName*或。

示例：
+ `{{currentRow.productName}}`显示当前行的产品名称。
+ `{{currentRow["Supplier Name"]}}`显示当前行（列标题所在行）的供应商名称*Supplier Name*。
+ `{{currentRow.orderDate}}`显示当前行的订购日期。

##### 示例：引用所选行
<a name="table-component-properties-examples-referencing-selected-row"></a>

`{{ui.table1.selectedRow["columnName"]}}`此表达式允许您使用 ID 引用表中当前选定行的特定列的值*table1*。*table1*替换为表组件的实际 ID *columnName* 以及要引用的列的名称。

示例：
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}`显示带有 ID 的表中当前选定行的总金额*ordersTable*。
+ `{{ui.customersTable.selectedRow["email"]}}`显示表格中当前选定行的电子邮件地址和 ID *customersTable*。
+ `{{ui.employeesTable.selectedRow["department"]}}`显示表格中当前选定行的部门，标识为 ID *employeesTable*。

##### 示例：创建自定义列
<a name="table-component-properties-examples-creating-custom-columns"></a>

您可以根据从基础数据操作、自动化或表达式返回的数据向表中添加自定义列。您可以使用现有的列值和 JavaScript 表达式来创建新列。

示例：
+ `{{currentRow.quantity * currentRow.unitPrice}}`通过将数量和单价列相乘来创建显示总价的新列。
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}`创建新列，以更易读的格式显示订单日期。
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`创建新列，显示每行的全名和电子邮件地址。

##### 示例：自定义列显示值：
<a name="table-component-properties-examples-customizing-column-display-values"></a>

您可以通过设置列映射的字段来自定义表列中`Value`字段的显示值。这允许您对显示的数据应用自定义格式或转换。

示例：
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`根据每行的评分值显示星形表情符号。
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`显示类别值，每行的每个单词都大写。
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`：根据每行的状态值显示彩色圆圈表情符号和文本。

##### 行级按钮操作
<a name="table-component-properties-examples-row-level-button-actions"></a>

`{{currentRow.columnName}}`或者，`{{currentRow["Column Name"]}}`您可以使用这些表达式在行级操作中传递被引用的行的上下文，例如使用选定行的数据导航到另一页或触发行数据的自动化。

示例：
+ 如果您在行操作列中有一个编辑按钮，则可以`{{currentRow.orderId}}`作为参数传递，以导航到带有所选订单编号的订单编辑页面。
+ 如果您在行操作列中有一个删除按钮，则可以转`{{currentRow.customerName}}`到自动化，该自动化会在删除订单之前向客户发送确认电子邮件。
+ 如果您在行操作列中有 “查看详情” 按钮，则可以转`{{currentRow.employeeId}}`到记录查看订单详细信息的员工的自动化。

通过利用这些表达式字段和行级操作功能，您可以创建高度自定义的交互式表格，根据您的特定要求显示和操作数据。此外，您可以将行级操作与应用程序中的其他组件或自动化连接起来，从而实现无缝的数据流和功能。

### Detail
<a name="detail-component"></a>

**详细**信息组件旨在显示有关特定记录或项目的详细信息。它提供了一个专门的空间，用于展示与单个实体或行相关的全面数据，非常适合展示深入的细节或简化数据输入和编辑任务。

#### 细节属性
<a name="detail-component-properties"></a>

D **et** ail 组件与其他组件共享多个共同属性`Name`，例如`Source`、和`Actions`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

**细节**组件还具有特定的属性和配置选项，包括`Fields``Layout`、和`Expressions`。

#### 布局
<a name="detail-component-properties-layout"></a>

**布**局部分允许您自定义**详细信息**组件中字段的排列和显示方式。您可以配置选项，例如：
+ **列数**：指定要在其中显示字段的列数。
+ **字段排序**：拖放字段以对其外观进行重新排序。
+ **间距和对齐方式**：调整组件内字段的间距和对齐方式。

#### 表达式和示例
<a name="detail-component-properties-expressions"></a>

D **et** ail 组件提供了各种表达式字段，允许您动态引用和显示组件内的数据。这些表达式使您能够创建与应用程序的数据和逻辑无缝连接的自定义交互式**细节**组件。

##### 示例：引用数据
<a name="detail-component-properties-examples-referencing-data"></a>

`{{ui.details.data[0]?.["colName"]}}`**：此表达式允许您为连接到 Detail 组件的数据数组中的第一项（索引 0）引用名为 “colName” 的列的值，ID 为 “details”。**将 “colName” 替换为要引用的列的实际名称。例如，以下表达式将显示连接到 “详情” 组件的数据数组中第一项的 “CustomerName” 列的值：

```
{{ui.details.data[0]?.["customerName"]}}
```

**注意**  
当**详细信息**组件与被引用的表位于同一页上，并且您想在**详细信息**组件中显示表格第一行的数据时，此表达式很有用。

##### 示例：条件渲染
<a name="detail-component-properties-examples-conditional-rendering"></a>

`{{ui.table1.selectedRow["colName"]}}`：如果表中选定的 ID *table1* 行包含名为的列的数据，则此表达式返回 true *colName*。**它可用于根据表格的选定行是否为空有条件地显示或隐藏 Detail 组件。**

示例：

**您可以在 Detail 组件的`Visible if`属性中使用此表达式，根据表格中的选定行有条件地显示或隐藏该表达式。**

```
{{ui.table1.selectedRow["customerName"]}}
```

如果此表达式的计算结果为 true（*table1*组件中的选定行具有该*customerName*列的值），则**详细信息**组件将可见。**如果表达式的计算结果为 false（即所选行为空或没有 “CustomerName” 的值），则详细信息组件将被隐藏。**

##### 示例：条件显示
<a name="detail-component-properties-examples-conditional-display"></a>

`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`：此表达式根据组件或数据字段的值有条件地显示表情符号。

细分：
+ `ui.Component.value`：引用带有 ID 的组件的值*Component*。
+ `=== "green"`：检查组件的值是否等于字符串 “green”。
+ `? "🟢"`: 如果条件为真，则显示绿色圆圈表情符号。
+ `: ui.Component.value === "yellow" ? "🟡"`: 如果第一个条件为 false，则检查组件的值是否等于字符串 “yellow”。
+ `? "🟡"`: 如果第二个条件为真，则显示黄色方块表情符号。
+ `: ui.detail1.data?.[0]?.CustomerStatus`：如果两个条件都为假，则它会引用连接到 Detail 组件的数据数组中第一个项目的 “CustomerStatus” 值，ID 为 “detail1”。

此表达式可用于根据**详细信息**组件中的组件或数据字段的值显示表情符号或特定值。

### 指标
<a name="metrics-component"></a>

**M** etrics 组件是一个可视元素，它以类似卡片的格式显示关键指标或数据点。它旨在提供一种简洁且具有视觉吸引力的方式来呈现重要信息或绩效指标。

#### 指标属性
<a name="metrics-properties"></a>

**Metrics** 组件与其他组件共享几个共同属性`Name`，例如`Source`、和`Actions`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

#### 趋势
<a name="metrics-properties-trend"></a>

指标的趋势功能允许您显示绩效的可视指标，或者显示的指标会随着时间的推移而发生变化。

##### 趋势值
<a name="metrics-properties-trend-value"></a>

此字段允许您指定用于确定趋势方向和幅度的值或表达式。通常，这是一个代表特定时间段内的变化或性能的值。

示例：

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```

此表达式检索与 “SalesMetrics” 指标关联的数据中第一项的 month-over-month收入值。

##### 积极的趋势
<a name="metrics-properties-positive-trend"></a>

此字段允许您输入定义正向趋势条件的表达式。表达式的计算结果应为真或假。

示例：

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```

此表达式检查 month-over-month收入值是否大于 0，表示呈正趋势。

##### 负面趋势
<a name="metrics-properties-negative-trend"></a>

此字段允许您输入定义负趋势条件的表达式。表达式的计算结果应为真或假。

示例：

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```

此表达式检查 month-over-month收入值是否小于 0，表示呈负趋势。

##### 色条
<a name="metrics-properties-color-bar"></a>

此切换允许您启用或禁用彩条的显示，以直观地指示趋势状态。

##### 颜色条示例：
<a name="metrics-properties-color-bar-examples"></a>

##### 示例：销售指标趋势
<a name="metrics-properties-color-bar-examples-sales-metrics-trend"></a>
+ **趋势值**：`{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **积极趋势**：`{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **负面趋势**：`{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **颜色栏**：已启用

##### 示例：库存指标趋势
<a name="metrics-properties-color-bar-examples-inventory-metrics-trend"></a>
+ **趋势值**：`{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **积极趋势**：`{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **负面趋势**：`{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **颜色栏**：已启用

##### 示例：客户满意度趋势
<a name="metrics-properties-color-bar-examples-customer-satisfaction-trend"></a>
+ **趋势值**：`{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **积极趋势**：`{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **负面趋势**：`{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **颜色栏**：已启用

通过配置这些与趋势相关的属性，您可以创建**指标**组件，这些组件可以直观地呈现所显示的指标的性能或随时间推移而发生的变化。

通过利用这些表达式，您可以创建高度自定义的交互式指标组件，这些组件可以动态引用和显示数据，从而允许您在应用程序中展示关键指标、绩效指标和数据驱动的可视化效果。

#### 指标表达式示例
<a name="metrics-expression-examples"></a>

在属性面板中，您可以输入表达式来显示标题、主要值、辅助值和值标题以动态显示值。

##### 示例：引用主值
<a name="metrics-expression-examples-referencing-primary-value"></a>

`{{ui.metric1.primaryValue}}`：此表达式允许您使用*metric1*来自同一页面中其他组件或表达式的 ID 来引用 M **etrics** 组件的主要值。

示例：`{{ui.salesMetrics.primaryValue}}`将显示*salesMetrics***指标**组件的主要值。

##### 示例：引用次要值
<a name="metrics-expression-examples-referencing-secondary-value"></a>

`{{ui.metric1.secondaryValue}}`：此表达式允许您使用*metric1*来自同一页面中其他组件或表达式的 ID 来引用 M **etrics** 组件的辅助值。

示例：`{{ui.revenueMetrics.secondaryValue}}`将显示*revenueMetrics***指标**组件的次要值。

##### 示例：引用数据
<a name="metrics-expression-examples-referencing-data"></a>

`{{ui.metric1.data}}`：此表达式允许您使用*metric1*来自同一页面中其他组件或表达式的 ID 来引用 M **etrics** 组件的数据。

示例：`{{ui.kpiMetrics.data}}`将引用与*kpiMetrics***指标**组件相关的数据。

##### 示例：显示特定的数据值：
<a name="metrics-expression-examples-displaying-specific-data-values"></a>

`{{ui.metric1.data?.[0]?.id}}`：此表达式是一个示例，说明如何显示连接到 M **etrics** 组件的数据中的特定信息，ID 为*metric1*。当您想要显示数据中第一项的特定属性时，它很有用。

细分：
+ `ui.metric1`：引用带有 ID 的**指标**组件*metric1*。
+ `data`：指与该组件相关的信息或数据集。
+ `?.[0]`: 表示该数据集中的第一个项目或条目。
+ `?.id`：显示第一个项目或条目的*id*值或标识符。

示例：`{{ui.orderMetrics.data?.[0]?.orderId}}`将显示连接到 M *orderMetrics* **etrics** 组件的数据中第一项的*orderId*值。

##### 示例：显示数据长度
<a name="metrics-expression-examples-displaying-data-length"></a>

`{{ui.metric1.data?.length}}`：此表达式演示如何显示与 ID 为 M **etrics** 组件关联的数据中的长度（项目数）*metric1*。当您想要显示数据中的项目数时，它很有用。

细分：
+ `ui.metric1.data`：引用连接到组件的数据集。
+ `?.length`：访问该数据集中项目或条目的总数或数量。

示例：`{{ui.productMetrics.data?.length}}`将显示数据中与 M *productMetrics* **etrics** 组件关联的项目数。

### 中继器
<a name="repeater-component"></a>

**Repeater** 组件是一个动态组件，允许您根据提供的数据源生成和显示元素集合。它旨在便于在应用程序的用户界面中创建列表、网格或重复模式。一些示例用例包括：
+ 为账户中的每位用户显示一张卡片
+ 显示包含图片的产品列表和将其添加到购物车的按钮
+ 显示用户可以访问的文件列表

**Repeater** 组件与内容丰富的**表格**组件区分开来。**表**组件具有严格的行和列格式。中**继器**可以更灵活地显示您的数据。

#### 中继器属性
<a name="repeater-component-properties"></a>

**Repeater** 组件与其他组件共享多个共同属性，例如`Name``Source`、和。`Actions`有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，**Repeater** 组件还具有以下其他属性和配置选项。

#### 商品模板
<a name="repeater-component-properties-item-template"></a>

**项目模板**是一个容器，您可以在其中定义结构和组件，这些结构和组件将为数据源中的每个项目重复使用。您可以将其他组件拖放到此容器中，例如**文本**、**图像**、**按钮**或表示每个项目所需的任何其他组件。

在**项目模板**中，您可以使用格式中的表达式引用当前项目的属性或值`{{currentItem.propertyName}}`。

例如，如果您的数据源包含一个`itemName`属性，则可以使用`{{currentItem.itemName}}`来显示当前项目的项目名称。

#### 布局
<a name="repeater-component-properties-layout"></a>

**布**局部分允许您配置中继器组件中重复元素的排列方式。

##### 方向
<a name="repeater-component-properties-orientation"></a>
+ **列表**：将重复的元素垂直排列在一列中。
+ **网格**：在具有多列的网格布局中排列重复的元素。

##### 每页行数
<a name="repeater-component-properties-rows-per-page"></a>

指定列表布局中每页显示的行数。为溢出指定行数的项目提供分页功能。

##### 每页列数和每页行数（网格）
<a name="columns-and-rows-per-page-grid"></a>
+ **列**：指定网格布局中的列数。
+ **每页行**数：指定网格布局中每页显示的行数。为超出指定网格尺寸的项目提供分页。

#### 表达式和示例
<a name="repeater-component-properties-expressions"></a>

**Repeater** 组件提供了各种表达式字段，允许您动态引用和显示组件内的数据。这些表达式使您能够创建与应用程序的数据和逻辑无缝连接的自定义交互式 **Re** peater组件。

##### 示例：引用项目
<a name="repeater-component-properties-expressions-examples-referencing-items"></a>
+ `{{currentItem.propertyName}}`：引用项目**模板**中当前项目的属性或值。
+ `{{ui.repeaterID[index]}}`：通过索引引用 Repeater 组件中的特定项目。

##### 示例：呈现产品列表
<a name="repeater-component-properties-expressions-examples-rendering-product-list"></a>
+ **来源**：选择*Products*实体作为数据源。
+ **商品模板**：添加一个**容器**组件，里面有一个**文本**组件来显示产品名称 (`{{currentItem.productName}}`)，一个**图片**组件来显示产品图片 (`{{currentItem.productImageUrl}}`)。
+ **布局**：将设置为`Orientation`，`List`然后根据`Rows per Page`需要进行调整。

##### 示例：生成用户头像网格
<a name="repeater-component-properties-expressions-examples-generating-user-avatar-grid"></a>
+ **来源**：使用表达式生成用户数据数组（例如`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`）。
+ **项目模板**：添加**图像**组件并将其`Source`属性设置为`{{currentItem.avatarUrl}}`。
+ **布局**：`Orientation`将设置为`Grid`，指定`Columns`和的数量`Rows per Page`，然后根据需要调整`Space Between`和`Padding`。

通过使用该`Repeater`组件，您可以创建动态和数据驱动的用户界面，从而简化元素集合的渲染过程并减少手动重复或硬编码的需求。

### 表单
<a name="form-component"></a>

表单组件旨在捕获用户输入并简化应用程序中的数据输入任务。它提供了用于显示输入字段、下拉菜单、复选框和其他表单控件的结构化布局，允许用户无缝输入或修改数据。可以在表单组件（例如表格）中嵌套其他组件。

#### 表单属性
<a name="form-component-properties"></a>

**表单**组件与其他组件共享多个共同属性，例如`Name``Source`、和`Actions`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

#### 生成表单
<a name="form-component-properties-generate-form"></a>

**使用生成表单**功能，可以根据所选数据源自动填充表单域，从而轻松快速创建表单域。在构建需要显示大量字段的表单时，这可以节省时间和精力。

**要使用 “**生成表单**” 功能，请执行以下操作：**

1. 在**表单**组件的属性中，找到 “**生成表单**” 部分。

1. 选择要用于生成表单域的数据源。这可以是您的应用程序中可用的实体、工作流程或任何其他数据源。

1. 表单字段将根据所选数据源自动生成，包括字段标签、类型和数据映射。

1. 查看生成的字段并进行任何必要的自定义，例如添加验证规则或更改字段顺序。

1. 对表单配置感到满意后，选择 “**提交**”，将生成的字段应用于您的**表单**组件。

当应用程序中有一个定义明确的数据模型或一组需要捕获用户输入的实体时，**生成表单**功能特别有用。通过自动生成表单字段，您可以节省时间并确保应用程序表单之间的一致性。

使用 “**生成表单**” 功能后，您可以进一步自定义**表单**组件的布局、操作和表达式以满足您的特定要求。

#### 表达式和示例
<a name="form-component-properties-expressions"></a>

与其他组件一样，您可以使用表达式来引用和显示**表单**组件中的数据。例如：
+ `{{ui.userForm.data.email}}`：引用连接到 ID 为 **Form** 组件的数据源中的`email`字段值`userForm`。

**注意**  
有关常[常用组件属性](#common-properties)用属性的更多表达式示例，请参阅。

通过配置这些属性并利用表达式，您可以创建与应用程序数据源和逻辑无缝集成的自定义交互式表单组件。这些组件可用于捕获用户输入、显示预填充的数据以及根据表单提交或用户互动触发操作。

### 步骤流
<a name="stepflow-component"></a>

**Stepflow** 组件旨在指导用户完成应用程序中的多步骤流程或工作流程。它提供了一个结构化且直观的界面，用于呈现一系列步骤，每个步骤都有自己的输入、验证和操作集。

Stepflow 组件与其他组件共享多个共同属性，例如`Name``Source`、和。`Actions`有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

**Stepflow** 组件具有其他属性和配置选项，例如`Step Navigation``Validation`、和。`Expressions`

## AI 组件
<a name="ai-components"></a>

### 人工智能世代
<a name="genai-component"></a>

**Gen AI** 组件是一个分组容器，用于对组件及其随附的逻辑进行分组，以便在应用程序工作室中使用聊天功能使用 AI 轻松编辑它们。当你使用聊天创建组件时，它们将被分组到一个 **Gen AI** 容器中。有关编辑或使用此组件的信息，请参见[构建或编辑您的应用程序](generative-ai.md#generative-ai-build-app)。

## 文本和数字组件
<a name="text-and-number-components"></a>

### 文本输入
<a name="text-input-component"></a>

**文本输入**组件允许用户在您的应用程序中输入和提交文本数据。它提供了一种简单直观的方式来捕获用户输入，例如姓名、地址或任何其他文本信息。
+ `{{ui.inputTextID.value}}`：返回输入字段中提供的值。
+ `{{ui.inputTextID.isValid}}`：返回输入字段中提供的值的有效性。

### 文本
<a name="text-component"></a>

**文本**组件用于显示应用程序中的文本信息。它可用于显示静态文本、动态值或由表达式生成的内容。

### 文字区域
<a name="text-area-component"></a>

**文本区域**组件旨在捕获用户的多行文本输入。它提供了更大的输入字段区域，供用户输入更长的文本条目，例如描述、注释或注释。
+ `{{ui.textAreaID.value}}`：返回文本区域中提供的值。
+ `{{ui.textAreaID.isValid}}`：返回文本区域中提供的值的有效性。

### 电子邮件
<a name="email-component"></a>

**电子邮件**组件是一个专门的输入字段，旨在捕获用户的电子邮件地址。它可以强制执行特定的验证规则，以确保输入的值符合正确的电子邮件格式。
+ `{{ui.emailID.value}}`：返回电子邮件输入字段中提供的值。
+ `{{ui.emailID.isValid}}`：返回电子邮件输入字段中提供的值的有效性。

### 密码
<a name="password-component"></a>

P **as** sword 组件是一个专门为用户输入敏感信息（例如密码或 PIN 码）而设计的输入字段。它会屏蔽输入的字符以维护隐私和安全。
+ `{{ui.passwordID.value}}`：返回密码输入字段中提供的值。
+ `{{ui.passwordID.isValid}}`：返回密码输入字段中提供的值的有效性。

### Search
<a name="search-component"></a>

**搜索**组件为用户提供了一个专用的输入字段，用于在应用程序中填充的数据中执行搜索查询或输入搜索词。
+ `{{ui.searchID.value}}`：返回搜索字段中提供的值。

### Phone
<a name="phone-component"></a>

“**电话**” 组件是一个输入字段，专为捕获用户的电话号码或其他联系信息而量身定制。它可以包括特定的验证规则和格式选项，以确保输入的值符合正确的电话号码格式。
+ `{{ui.phoneID.value}}`：返回电话输入字段中提供的值。
+ `{{ui.phoneID.isValid}}`：返回电话输入字段中提供的值的有效性。

### 数字
<a name="number-component"></a>

**数字分量**是一个专门为用户输入数值而设计的输入字段。它可以强制执行验证规则，以确保输入的值是指定范围或格式内的有效数字。
+ `{{ui.numberID.value}}`：返回数字输入字段中提供的值。
+ `{{ui.numberID.isValid}}`：返回数字输入字段中提供的值的有效性。

### 货币
<a name="currency-component"></a>

**货币**部分是一个专门的输入字段，用于捕获货币价值或金额。它可以包括用于显示货币符号的格式化选项、十进制分隔符，并强制执行特定于货币输入的验证规则。
+ `{{ui.currencyID.value}}`：返回货币输入字段中提供的值。
+ `{{ui.currencyID.isValid}}`：返回货币输入字段中提供的值的有效性。

### 细节对
<a name="detail-pair-component"></a>

D **etail pair** 组件用于以结构化和可读的格式显示键值对或相关信息对。它通常用于显示与特定项目或实体相关的详细信息或元数据。

## 选择组件
<a name="selection-components"></a>

### Switch
<a name="switch-component"></a>

S **witch** 组件是一个用户界面控件，允许用户在两种状态或选项之间切换，例如on/off, true/false, or enabled/disabled。它提供了当前状态的可视化表示，并允许用户通过单击或点击进行更改。

### 交换机组
<a name="switch-group-component"></a>

**开关组**组件是单个开关控件的集合，允许用户从预定义的集合中选择一个或多个选项。它提供了所选选项和未选中选项的可视化表示，使用户更容易理解可用选项并与之交互。

#### 切换群组表达式字段
<a name="switch-group-expression-fields"></a>
+ `{{ui.switchGroupID.value}}`：返回一个字符串数组，其中包含应用程序用户启用的每个开关的值。

### 复选框组
<a name="checkbox-group-component"></a>

复**选框组**组件为用户提供一组复选框，允许他们同时选择多个选项。当您想让用户能够从选项列表中选择一个或多个项目时，它很有用。

#### 复选框组表达式字段
<a name="checkbox-group-expression-fields"></a>
+ `{{ui.checkboxGroupID.value}}`：返回一个字符串数组，其中包含应用程序用户选择的每个复选框的值。

### 电台小组
<a name="radio-group-component"></a>

**Radio group 组件是一组**单选按钮，允许用户从多个互斥的选项中选择一个选项。它确保一次只能选择一个选项，从而为用户提供了一种清晰而明确的选择方式。

#### 无线电群组表达式字段
<a name="radio-group-expression-fields"></a>

以下字段可以在表达式中使用。
+ `{{ui.radioGroupID.value}}`：返回应用程序用户选择的单选按钮的值。

### 单选
<a name="single-select-component"></a>

S **ingle selec** t 组件为用户提供了一系列选项，用户可以从中选择单个项目。它通常用于用户需要从一组预定义的选项中进行选择的场景，例如选择类别、位置或首选项。

#### 单选表达式字段
<a name="single-select-expression-fields"></a>
+ `{{ui.singleSelectID.value}}`：返回应用程序用户选择的列表项的值。

### 多选
<a name="multi-select-component"></a>

**多选**组件与**单选**组件类似，但允许用户从选项列表中同时选择多个选项。当用户需要从一组预定义的选项中进行多个选择（例如选择多个标签、兴趣或偏好）时，它很有用。

#### 多选表达式字段
<a name="multi-select-expression-fields"></a>
+ `{{ui.multiSelectID.value}}`：返回一个字符串数组，其中包含应用程序用户选择的每个列表项的值。

## 按钮和导航组件
<a name="buttons-and-navigation-components"></a>

应用程序工作室提供了各种按钮和导航组件，允许用户触发操作并在您的应用程序中导航。

### 按钮组件
<a name="button-components"></a>

可用的按钮组件有：
+ 按钮
+ 带轮廓的按钮
+ 图标按钮
+ “文本” 按钮

这些按钮组件具有以下共同属性：

#### 内容
<a name="button-content"></a>
+ **按钮标签**：要在按钮上显示的文本。

#### Type
<a name="button-type"></a>
+ **按钮**：标准按钮。
+ **轮廓**：带有轮廓样式的纽扣。
+ **图标**：带有图标的按钮。
+ **文本**：纯文字按钮。

#### Size
<a name="button-size"></a>

按钮的大小。可能的值为 `Small`、`Medium` 和 `Large`。

#### 图标
<a name="button-icon"></a>

您可以从按钮上显示的各种图标中进行选择，包括：
+ 信封已关闭
+ Bell
+ 人员
+ 汉堡菜单
+ Search
+ 信息圈出
+ 装备
+ V 形左
+ V 形右
+ 水平圆点
+ 垃圾桶
+ 编辑
+ Check
+ Close
+ 主页
+ Plus

#### 触发器
<a name="button-triggers"></a>

单击按钮时，您可以配置一个或多个要触发的操作。可用的操作类型有：
+ **基本**
  + 运行组件操作：在组件内执行特定操作。
  + 导航：导航到其他页面或视图。
  + 调用数据操作：触发与数据相关的操作，例如创建、更新或删除记录。
+ **高级**
  + JavaScript: 运行自定义 JavaScript 代码。
  + 调用自动化：启动现有的自动化或工作流程。

#### JavaScript 操作按钮属性
<a name="button-examples-javascript"></a>

选择`JavaScript`操作类型以在单击按钮时运行自定义 JavaScript 代码。

##### 源代码
<a name="button-source-code"></a>

在该`Source code`字段中，您可以输入您的 JavaScript 表达式或函数。例如：

```
return "Hello World";
```

这只会在点击按钮`Hello World`时返回字符串。

##### 条件：如果 “运行”
<a name="button-run-if"></a>

您还可以提供一个布尔表达式来确定是否应执行 JavaScript 操作。它使用以下语法：

```
{{ui.textinput1.value !== ""}}
```

在此示例中，只有当`textinput1`组件的值不是空字符串时，该 JavaScript 操作才会运行。

通过使用这些高级触发器选项，您可以创建高度自定义的按钮行为，这些行为直接与应用程序的逻辑和数据集成。这使您可以扩展按钮的内置功能，并根据您的特定要求定制用户体验。

**注意**  
务必彻底测试您的 JavaScript 操作，确保它们按预期运行。

### 超链接
<a name="hyperlink-component"></a>

**Hyperlink** 组件提供了一个可点击的链接，用于导航到外部 URLs 或内部应用程序路由。

#### 超链接属性
<a name="hyperlink-properties"></a>

##### 内容
<a name="hyperlink-properties-content"></a>
+ **超链接标签**：要显示为超链接标签的文本。

##### URL
<a name="hyperlink-properties-url"></a>

超链接的目标 URL，可以是外部网站或内部应用程序路由。

##### 触发器
<a name="hyperlink-properties-triggers"></a>

单击超链接时，您可以配置一个或多个要触发的操作。可用的操作类型与按钮组件的操作类型相同。

## 日期和时间组件
<a name="date-and-time-components"></a>

### 日期
<a name="date-component"></a>

**日期**组件允许用户选择和输入日期。

**日期**组件与其他组件共享多个共同属性，例如`Name``Source`、和`Validation`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，**Dat** e 组件还具有以下特定属性：

#### 日期属性
<a name="date-component-properties"></a>

##### Format
<a name="date-component-properties-format"></a>
+ **YYYY/MM/DD**、**DD/MM/YYYY**、**YYYY/MM/DD**、**YYYY/DD/MM**、**MM/DD**、**DD/MM**：显示日期的格式。

##### 值
<a name="date-component-properties-value"></a>
+ **YYYY-MM-DD**：内部存储日期值的格式。

##### 最小日期
<a name="date-component-properties-min-date"></a>
+ **YYYY-MM-DD**：可以选择的最小日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 最大日期
<a name="date-component-properties-max-date"></a>
+ **YYYY-MM-DD**：可以选择的最大日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 日历类型
<a name="date-component-properties-calendar-type"></a>
+ **1 个月**，**2 个月**：要显示的日历用户界面的类型。

##### 禁用日期
<a name="date-component-properties-disabled-dates"></a>
+ **来源**：应禁用的日期的数据源。例如：无，表达式。
+ **禁用日期**：用于确定应禁用哪些日期的表达式，例如：
  + `{{currentRow.column}}`: 禁用与此表达式计算结果相匹配的日期。
  + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: 禁用 2023 年 1 月 1 日之前的日期
  + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: 禁用周末。

##### 行为
<a name="date-component-properties-behavior"></a>
+ 在以下@@ **条件下可见**：确定**日期**组件可见性的表达式。
+ i@@ **f 禁用**：用于确定是否应禁用 **Dat** e 组件的表达式。

#### 验证
<a name="date-component-properties-validation"></a>

“**验证**” 部分允许您为日期输入定义其他规则和约束。通过配置这些验证规则，可以确保用户输入的日期值符合应用程序的特定要求。您可以添加以下类型的验证：
+ **必填**：此开关可确保用户在提交表单之前必须输入日期值。
+ **自定义**：您可以使用 JavaScript表达式创建自定义验证规则。例如：

  ```
  {{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
  ```

  此表达式检查输入的日期是否在 2023 年 1 月 1 日之前。如果条件为真，则验证将失败。

  您还可以提供一条自定义验证消息，以便在不满足验证时显示：

  ```
  "Validation not met. The date must be on or after January 1, 2023."
  ```

通过配置这些验证规则，可以确保用户输入的日期值符合应用程序的特定要求。

#### 表达式和示例
<a name="date-component-expressions"></a>

**日期**组件提供以下表达式字段：
+ `{{ui.dateID.value}}`：返回用户以格式输入的日期值`YYYY-MM-DD`。

### 时间
<a name="time-component"></a>

**时间**组件允许用户选择和输入时间值。通过配置**时间**组件的各种属性，您可以创建满足应用程序特定要求的时间输入字段，例如限制可选的时间范围、禁用某些时间以及控制组件的可见性和交互性。

#### 时间属性
<a name="time-component-properties"></a>

**时间**组件与其他组件共享几个共同的属性，例如`Name``Source`、和`Validation`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，T **im** e 组件还具有以下特定属性：

##### 时间间隔
<a name="time-component-properties-time-intervals"></a>
+ **5 分钟**、**10 分钟**、**15 分钟**、**20 分钟**、**25 分钟**、**30 分钟**、**60 分钟**：可用于选择时间的时间间隔。

##### 值
<a name="time-component-properties-value"></a>
+ **HH: MM AA**：内部存储时间值的格式。
**注意**  
此值必须与的格式匹配`HH:MM AA`。

##### Placeholder
<a name="time-component-properties-placeholder"></a>
+ **日历设置**：时间字段为空时显示的占位符文本。

##### 最小时间
<a name="time-component-properties-min-time"></a>
+ **HH: MM AA**：可以选择的最短时间。
**注意**  
此值必须与的格式匹配`HH:MM AA`。

##### 最大时间
<a name="time-component-properties-max-time"></a>
+ **HH: MM AA**：可以选择的最长时间。
**注意**  
此值必须与的格式匹配`HH:MM AA`。

##### 禁用时间
<a name="time-component-properties-disabled-times"></a>
+ **来源**：应禁用的时间的数据源（例如 “无”、“表达式”）。
+ **禁用时间**：用于确定应禁用哪些时间的表达式，例如`{{currentRow.column}}`。

##### 禁用时间配置
<a name="disabled-times-configuration"></a>

您可以使用 “**禁用时间**” 部分来指定哪些时间值不可选择。

##### 来源
<a name="disabled-times-configuration-source"></a>
+ **无**：不禁用任何时间。
+ **表达式**：您可以使用 JavaScript 表达式来确定应禁用哪些时间，例如`{{currentRow.column}}`。

##### 表达式示例：
<a name="disabled-times-configuration-expression-example"></a>

```
{{currentRow.column === "Lunch Break"}}
```

当当前行的 “午休时间” 列为真时，此表达式将禁用。

通过配置这些验证规则和禁用的时间表达式，可以确保用户输入的时间值满足应用程序的特定要求。

##### 行为
<a name="time-component-properties-behavior"></a>
+ 在以下@@ **条件下可见**：确定时间组件可见性的表达式。
+ i@@ **f 禁用**：用于确定是否应禁用时间组件的表达式。

##### 验证
<a name="time-component-properties-validation"></a>
+ **必需**：一个切换开关，可确保用户在提交表单之前必须输入时间值。
+ **自定义**：允许您使用 JavaScript 表达式创建自定义验证规则。

  **自定义验证消息**：不满足自定义验证时要显示的消息。

例如：

```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```

此表达式检查输入的时间是上午 9:00 还是上午 9:30。如果条件为真，则验证将失败。

您还可以提供一条自定义验证消息，以便在不满足验证时显示：

```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```

#### 表达式和示例
<a name="time-component-expressions"></a>

时间组件提供以下表达式字段：
+ `{{ui.timeID.value}}`：返回用户以 HH: MM AA 格式输入的时间值。

##### 示例：时间值
<a name="time-component-expressions-examples-time-value"></a>
+ `{{ui.timeID.value}}`：返回用户以格式输入的时间值`HH:MM AA`。

##### 示例：时间比较
<a name="time-component-expressions-examples-time-comparison"></a>
+ `{{ui.timeInput.value > "10:00 AM"}}`：检查时间值是否大于上午 10:00。
+ `{{ui.timeInput.value < "05:00 pM"}}`：检查时间值是否小于 05:00 PM。

### 日期范围
<a name="date-range-component"></a>

**日期范围**组件允许用户选择和输入日期范围。通过配置日期范围组件的各种属性，您可以创建满足应用程序特定要求的日期范围输入字段，例如限制可选日期范围、禁用某些日期以及控制组件的可见性和交互性。

#### 日期范围属性
<a name="date-range-component-properties"></a>

**日期范围**组件与其他组件共享多个共同属性，例如`Name``Source`、和`Validation`。有关这些属性的更多信息，请参阅[常用组件属性](#common-properties)。

除了常用属性外，**日期范围**组件还具有以下特定属性：

##### Format
<a name="date-range-component-properties-format"></a>
+ **MM/DD/YYYY**：显示日期范围的格式。

##### 开始日期
<a name="date-range-component-properties-start-date"></a>
+ **YYYY-MM-DD**：可以选择作为范围起点的最小日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 结束日期
<a name="date-range-component-properties-end-date"></a>
+ **YYYY-MM-DD**：可以选择作为范围终点的最大日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### Placeholder
<a name="date-range-component-properties-placeholder"></a>
+ **日历设置**：日期范围字段为空时显示的占位符文本。

##### 最小日期
<a name="date-range-component-properties-min-date"></a>
+ **YYYY-MM-DD**：可以选择的最小日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 最大日期
<a name="date-range-component-properties-max-date"></a>
+ **YYYY-MM-DD**：可以选择的最大日期。
**注意**  
此值必须与的格式匹配`YYYY-MM-DD`。

##### 日历类型
<a name="date-range-component-properties-calendar-type"></a>
+ **1 个月**：要显示的日历用户界面的类型。例如，单月。
+ **2 个月**：要显示的日历用户界面的类型。例如，两个月。

##### 已选择必修日期
<a name="date-range-component-properties-mandatory-days-selected"></a>
+ **0**：在日期范围内必须选择的必填天数。

##### 禁用日期
<a name="date-range-component-properties-disabled-dates"></a>
+ **来源**：应禁用的日期（例如 “无”、“表达式”、“实体” 或 “自动”）的数据源。
+ **禁用日期**：用于确定应禁用哪些日期的表达式，例如`{{currentRow.column}}`。

##### 验证
<a name="date-range-component-properties-validation"></a>

“**验证**” 部分允许您为日期范围输入定义其他规则和约束。

#### 表达式和示例
<a name="date-range-component-expressions"></a>

**日期范围**组件提供以下表达式字段：
+ `{{ui.dateRangeID.startDate}}`：以格式返回所选范围的开始日期`YYYY-MM-DD`。
+ `{{ui.dateRangeID.endDate}}`：以格式返回所选范围的结束日期`YYYY-MM-DD`。

##### 示例：计算日期差
<a name="date-range-component-expressions-examples-calculating-date-difference"></a>
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`计算开始日期和结束日期之间的天数。

##### 示例：基于日期范围的条件可见性
<a name="date-range-component-expressions-examples-conditional-visibility-based-on-date-range"></a>
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`检查所选日期范围是否在 2023 年之外。

##### 示例：基于当前行数据的禁用日期
<a name="date-range-component-expressions-examples-disabled-dates-based-on-current-row-data"></a>
+ `{{currentRow.isHoliday}}`禁用当前行中 “isHoliday” 列为真的日期。
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`根据当前行中的 “日期列” 禁用 2023 年 1 月 1 日之前的日期。
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`根据当前行中的 “日期列” 禁用周末。

##### 自定义验证
<a name="date-range-component-expressions-examples-custom-validation"></a>
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`检查开始日期是否晚于结束日期，这将使自定义验证失败。

## 媒体组件
<a name="media-components"></a>

应用程序工作室提供了多个组件，用于在应用程序中嵌入和显示各种媒体类型。

### iFrame 嵌入
<a name="iframe-embed-component"></a>

**iFrame 嵌入**组件允许您使用 iFrame 在应用程序中嵌入外部 Web 内容或应用程序。

#### iFrame 嵌入属性
<a name="iframe-embed-properties"></a>

##### URL
<a name="iframe-embed-properties-iframe-url"></a>

**注意**  
应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 [查看或更新应用程序的内容安全设置](app-content-security-settings-csp.md)。

要嵌入的外部内容或应用程序的 URL。

##### 布局
<a name="iframe-embed-properties-iframe-layout"></a>
+ **宽度**：iFrame 的宽度，指定为百分比 (%) 或固定像素值（例如 300 像素）。
+ **高度**：iFrame 的高度，以百分比 (%) 或固定像素值指定。

### S3 上传
<a name="s3-upload-component"></a>

S **3 上传**组件允许用户将文件上传到 Amazon S3 存储桶。通过配置 **S3 上传**组件，您可以让用户轻松地将文件上传到应用程序的 Amazon S3 存储，然后在应用程序的逻辑和用户界面中利用上传的文件信息。

**注意**  
请务必确保具备必要的权限和 Amazon S3 存储桶配置，以支持应用程序的文件上传和存储要求。

#### S3 上传属性
<a name="s3-upload-properties"></a>

##### S3 配置
<a name="s3-upload-component-properties-configuration"></a>
+ **连接器**：选择用于文件上传的预配置的 Amazon S3 连接器。
+ **存储桶**：用于上传文件的 Amazon S3 存储桶。
+ **文件夹**：Amazon S3 存储桶中用于存储文件的文件夹。
+ **文件名**：上传文件的命名惯例。

##### 文件上传配置
<a name="s3-upload-component-properties-file-upload-configuration"></a>
+ **标签**：文件上传区域上方显示的标签或说明。
+ **描述**：有关文件上传的其他说明或信息。
+ **文件类型**：允许上传的文件类型。例如：图像、文档或视频。
+ **大小**：可以上传的单个文件的最大大小。
+ **按钮标签**：文件选择按钮上显示的文本。
+ **按钮样式**：文件选择按钮的样式。例如，勾勒或填充。
+ **按钮大小**：文件选择按钮的大小。

##### 验证
<a name="s3-upload-component-properties-validation"></a>
+ **最大文件数**：一次可以上传的最大文件数。
+ **最大文件大小**：每个文件允许的最大大小。

##### 触发器
<a name="s3-upload-component-properties-triggers"></a>
+ **成功**时：文件上传成功时要触发的操作。
+ **失败**时：文件上传失败时要触发的操作。

#### S3 上传表达式字段
<a name="s3-upload-expression-fields"></a>

S **3 上传**组件提供以下表达式字段：
+ `{{ui.s3uploadID.files}}`：返回已上传文件的数组。
+ `{{ui.s3uploadID.files[0]?.size}}`：返回指定索引处文件的大小。
+ `{{ui.s3uploadID.files[0]?.type}}`：返回指定索引处的文件类型。
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: 返回指定索引处的文件名，不带扩展名后缀。
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: 返回文件名及其扩展名后缀位于指定索引处。

#### 表达式和示例
<a name="s3-upload-component-expression-examples"></a>

##### 示例：访问上传的文件
<a name="s3-upload-component-expression-examples-accessing-uploaded-files"></a>
+ `{{ui.s3uploadID.files.length}}`：返回已上传的文件数。
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`：返回以逗号分隔的已上传文件名列表。
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`：返回仅包含已上传图像文件的数组。

##### 示例：验证文件上传
<a name="s3-upload-component-expression-examples-validating-file-uploads"></a>
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`：检查上传的文件大小是否超过 5 MB。
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`：检查所有上传的文件是否都是 PNG 图片。
+ `{{ui.s3uploadID.files.length > 3}}`：检查上传的文件是否超过 3 个。

##### 示例：触发动作
<a name="s3-upload-component-expression-examples-triggering-actions"></a>
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`：如果至少上传了一个文件，则显示成功消息。
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`：如果已上传任何视频文件，则触发视频处理自动化。
+ `{{ui.s3uploadID.files.map(f => f.url)}}`：检索已上传 URLs 的文件，这些文件可用于显示或进一步处理这些文件。

这些表达式允许您访问上传的文件、验证文件上传以及根据文件上传结果触发操作。通过利用这些表达式，您可以在应用程序的文件上传功能中创建更加动态和智能的行为。

**注意**  
*s3uploadID*替换为您的 **S3 上传**组件的 ID。

### PDF 查看器组件
<a name="pdf-viewer-component"></a>

**PDF 查看器**组件允许用户在您的应用程序中查看 PDF 文档并与之交互。App Studio 支持这些不同的 PDF 源输入类型，**PDF 查看器**组件让您可以灵活地将 PDF 文档集成到应用程序中，无论是来自静态 URL、内联数据 URI 还是动态生成的内容。

#### PDF 查看器属性
<a name="pdf-viewer-properties"></a>

##### 来源
<a name="pdf-viewer-properties-source"></a>

**注意**  
应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 [查看或更新应用程序的内容安全设置](app-content-security-settings-csp.md)。

PDF 文档的来源，可以是表达式、实体、URL 或自动化。

##### Expression
<a name="pdf-viewer-properties-source-expression"></a>

使用表达式动态生成 PDF 源。

##### 实体
<a name="pdf-viewer-properties-source-entity"></a>

将 **PDF 查看器**组件连接到包含 PDF 文档的数据实体。

##### URL
<a name="pdf-viewer-properties-source-url"></a>

指定 PDF 文档的网址。

##### URL
<a name="pdf-viewer-properties-source-url-example"></a>

您可以输入指向要显示的 PDF 文档的 URL。这可以是公共网址，也可以是您自己的应用程序中的网址。

示例：`https://example.com/document.pdf`

##### 数据 URI
<a name="pdf-viewer-properties-source-url-data-uri"></a>

**数据 URI** 是一种在应用程序中嵌入小型数据文件（如图像或 PDFs）的紧凑方法。PDF 文档被编码为 base64 字符串，并直接包含在组件的配置中。

##### Blob 或 ArrayBuffer
<a name="pdf-viewer-properties-source-url-blob-or-arraybuffer"></a>

您还可以以 Blob 或 ArrayBuffer 对象的形式提供 PDF 文档，这样您就可以在应用程序中动态生成或检索 PDF 数据。

##### 自动化
<a name="pdf-viewer-properties-source-automation"></a>

将 **PDF 查看器**组件连接到提供 PDF 文档的自动化系统。

##### 操作
<a name="pdf-viewer-properties-actions"></a>
+ **下载**：添加允许用户下载 PDF 文档的按钮或链接。

##### 布局
<a name="pdf-viewer-properties-layout"></a>
+ **宽度**：PDF 查看器的宽度，指定为百分比 (%) 或固定像素值（例如 600 像素）。
+ **高度**：PDF 查看器的高度，指定为固定像素值。

### 图像查看器
<a name="image-viewer-component"></a>

**图像查看器**组件允许用户在应用程序中查看图像文件并与之交互。

#### 图像查看器属性
<a name="image-viewer-properties"></a>

##### 来源
<a name="image-viewer-properties-source"></a>

**注意**  
应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 [查看或更新应用程序的内容安全设置](app-content-security-settings-csp.md)。
+ **实体**：将**图像查看器**组件连接到包含图像文件的数据实体。
+ **URL**：指定图像文件的 URL。
+ **表达式**：使用表达式动态生成图像源。
+ **自动化**：将**图像查看器**组件连接到提供图像文件的自动化。

##### 替代文本
<a name="image-viewer-properties-alt-text"></a>

图片的替代文字描述，用于无障碍访问目的。

##### 布局
<a name="image-viewer-properties-layout"></a>
+ **图像拟合**：确定应如何调整图像大小并在组件中显示图像。例如，`Contain`、`Cover` 或 `Fill`。
+ **宽度**：**图像查看器**组件的宽度，指定为百分比 (%) 或固定像素值（例如 300px）。
+ **高度**：**图像查看器**组件的高度，指定为固定像素值。
+ **背景**：允许您为图像**查看器组件设置背景颜色或图像**。