View a markdown version of this page

组件参考 - AWS 应用程序工作室
常用组件属性数据组件AI 组件文本&数字组件选择组件按钮&导航组件日期&时间组件媒体组件

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

组件参考

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

常用组件属性

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

Name

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

主要价值、次要价值和价值

应用程序工作室中的许多组件都提供用于指定值或表达式的字段，这些值或表达式决定组件中显示的内容或数据。根据组件的类型和用途 Primary valueSecondary value，这些字段通常被标记为或干脆Value标记。

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

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

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

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

表达式的语法

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

{{expression}}

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

示例：静态文本

  • 主值：您可以直接输入静态数字或值，例如"123"或"$1,999.99"。

  • 次要值：您可以输入静态文本标签，例如"Goal"或"Projected Revenue"。

  • 值：您可以输入静态字符串，例如"since last month"或"Total Quantity"。

示例：表达式

  • Hello, {{currentUser.firstName}}：显示带有当前登录用户名字的问候语。

  • {{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}：根据用户的角色有条件地显示不同的仪表板标题。

  • {{ui.componentName.data?.[0]?.fieldName}}: 从具有 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。

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

标签

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

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

示例：静态文本

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

示例：表达式

示例：零售店

以下示例为每个用户对标签进行了个性化设置，使界面感觉更适合个人：

{{currentUser.firstName}} {{currentUser.lastName}}'s Account
示例：SaaS 项目管理

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

Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
示例：医疗诊所

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

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

Placeholder

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

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

示例：静态文本

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

示例：表达式

示例：金融服务

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

例如： E-commerce

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

示例：医疗诊所

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

源

S ource 属性允许您为组件选择数据源。选择后，您可以从以下数据源类型中进行选择：entityexpression、或automation。

实体

选择实体作为数据源允许您将组件连接到应用程序中的现有数据实体或模型。当你有一个定义明确的数据结构或架构并想在整个应用程序中利用时，这很有用。

何时使用实体数据源：

  • 当您的数据模型或实体包含要在组件中显示的信息时（例如，带有 “名称”、“描述”、“价格” 等字段的 “产品” 实体）。

  • 当你需要从数据库、API 或其他外部数据源动态获取数据并将其呈现到组件中时。

  • 当您想利用应用程序数据模型中定义的关系和关联时。

在实体上选择查询

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

通过选择查询，您可以：

  • 根据特定条件筛选组件中显示的数据。

  • 向查询传递参数以动态筛选或排序数据。

  • 利用查询中定义的复杂联接、聚合或其他数据操作技术。

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

向实体数据源添加参数

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

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

Expression

选择 Ex 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)}}
自动化

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

何时使用自动化数据源：

  • 当组件中显示的数据是特定自动化或工作流程（例如，作为批准流程的一部分更新的 “待批准” 表）的结果时。

  • 当您想根据自动化中的事件或条件触发操作或组件更新时（例如，使用某个 SKU 的最新销售数据更新指标）。

  • 当您需要通过自动化将组件与应用程序中的其他服务或系统集成时（例如，从第三方 API 获取数据并将其显示在表格中）。

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

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

如果可见

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

V isible if 属性使用以下语法：

{{expression ? true : false}}

或者

{{expression}}

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

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

可见 if 表达式示例

示例：根据电子邮件输入显示或隐藏密码输入字段

假设你有一个带有电子邮件输入字段和密码输入字段的登录表单。仅当用户输入了电子邮件地址时，您才希望显示密码输入字段。您可以使用以下 Visible if 表达式：

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

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

示例：根据下拉列表选择显示其他表单字段

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

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

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

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

{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
示例：其他

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

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

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

{{true}}

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

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

如果禁用

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

禁用 if 属性使用以下语法：

{{expression ? true : false}}

或者

{{expression}}

禁用 if 表达式示例

示例：根据表单验证禁用提交按钮

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

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

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

通过在 V isible 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.

容器布局

布局属性决定组件中内容或元素的排列和放置方式。有几种布局选项可用，每个选项都由一个图标表示：

  • 列布局：此布局在单列中垂直排列内容或元素。

  • 两列布局：此布局将组件划分为两个等宽的列，允许您并排放置内容或元素。

  • 行布局：此布局将内容或元素水平排列成一行。

方向

  • 横向：此布局将内容或元素水平排列成一行。

  • 垂直：此布局将内容或元素垂直排列在一列中。

  • 行内换行：此布局水平排列内容或元素，但如果元素超过可用宽度，则换行到下一行。

一致性

  • 左：将内容或元素与组件左侧对齐。

  • 居中：将内容或元素在组件内水平居中。

  • 右：将内容或元素与组件的右侧对齐。

宽度

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

高度

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

之间的空间

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

Padding

Padding 属性控制内容或元素与组件边缘之间的空间。您可以选择从 0px（无填充）到 64 像素的值，增量为 4 像素（例如 4px、8px、12px 等）。

背景

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

这些布局属性为在组件内排列和定位内容提供了灵活性，并控制组件本身的大小、间距和视觉外观。

数据组件

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

表

表格组件以表格格式显示数据，包括行和列。它用于以有条理和易于阅读的方式呈现结构化数据，例如数据库中的项目清单或记录。

表属性

表组件与其他组件共享多个共同的属性，例如NameSource、和Actions。有关这些属性的更多信息，请参阅常用组件属性。

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

列

在本节中，您可以定义要在表格中显示的列。每列都可以使用以下属性进行配置：

  • 格式：字段的数据类型，例如：文本、数字、日期。

  • 列标签：列的标题文本。

  • 值：应显示在此列中的数据源字段。

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

    示例：{{currentRow.title}}-此表达式将在列单元格中显示当前行的title字段值。

  • 启用排序：此开关允许您启用或禁用特定列的排序功能。启用后，用户可以根据该列中的值对表数据进行排序。

搜索和导出

表格组件提供以下开关以启用或禁用搜索和导出功能：

  • 显示搜索启用后，此开关会在表格中添加搜索输入字段，允许用户搜索和筛选显示的数据。

  • 显示导出启用后，此开关会在表格中添加一个导出选项，允许用户下载各种格式的表格数据，例如：CSV。

注意

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

每页行数

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

Pre-fetch 极限

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

操作

在 “操作” 部分中，配置以下属性：

  • 操作位置：启用 “向右固定” 后，无论用户如何滚动，所有添加的操作都将始终显示在表格的右侧。

  • 操作：向表格中添加操作按钮。您可以将这些按钮配置为在用户单击时执行指定的操作，例如：

    • 运行组件操作

    • 导航到其他页面

    • 调用数据操作

    • 自定义运行 JavaScript

    • 调用自动化

Expressions

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

示例：引用行值

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

示例：

  • {{currentRow.productName}}显示当前行的产品名称。

  • {{currentRow["Supplier Name"]}}显示当前行的供应商名称，其中列标题是Supplier Name。

  • {{currentRow.orderDate}}显示当前行的订购日期。

示例：引用所选行

{{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。

示例：创建自定义列

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

示例：

  • {{currentRow.quantity * currentRow.unitPrice}}通过将数量和单价列相乘来创建显示总价格的新列。

  • {{new Date(currentRow.orderDate).toLocaleDateString()}}创建一个新列，以更易读的格式显示订单日期。

  • {{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}创建一个新列，显示每行的全名和电子邮件地址。

示例：自定义列显示值：

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

示例：

  • {{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}根据每行的评分值显示星星表情符号。

  • {{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}显示类别值，每行的每个单词都大写。

  • {{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}：根据每行的状态值显示彩色圆圈表情符号和文本。

Row-level 按钮动作

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

示例：

  • 如果您的行操作列中有编辑按钮，则可以{{currentRow.orderId}}作为参数传递以使用所选订单的 ID 导航到订单编辑页面。

  • 如果您的行操作列中有删除按钮，则可以传递{{currentRow.customerName}}到自动化，该自动化系统会在删除客户订单之前向客户发送确认电子邮件。

  • 如果您在行操作列中有查看详细信息按钮，则可以传递{{currentRow.employeeId}}给自动系统，该自动化系统会记录查看订单详细信息的员工。

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

Detail

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

详细属性

细节组件与其他组件共享几个共同的属性，例如NameSource、和Actions。有关这些属性的更多信息，请参阅常用组件属性。

详细信息组件还具有特定的属性和配置选项，包括FieldsLayout、和Expressions。

布局

布局部分允许您自定义详细信息组件中字段的排列和显示方式。您可以配置选项，例如：

  • 列数：指定要在其中显示字段的列数。

  • 字段排序：拖放字段以重新排序其外观。

  • 间距和对齐方式：调整组件内字段的间距和对齐方式。

表达式和示例

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

示例：引用数据

{{ui.details.data[0]?.["colName"]}}：此表达式允许您引用与细节组件相连的数据数组中第一个项目（索引 0）的名为 “colName” 的列的值，其标识为 “details”。将 “colName” 替换为要引用的列的实际名称。例如，以下表达式将显示连接到 “详细信息” 组件的数据数组中第一个项目的 “customerName” 列的值：

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

当 D etail 组件与被引用的表位于同一页面上，并且您想要在 D etail 组件中显示表第一行的数据时，此表达式很有用。

示例：条件渲染

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

示例：

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

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

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

示例：条件显示

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

故障：

  • ui.Component.value：使用 ID 引用组件的值Component。

  • === "green": 检查组件的值是否等于字符串 “绿色”。

  • ? "🟢"：如果条件成立，则显示绿色圆圈表情符号。

  • : ui.Component.value === "yellow" ? "🟡"：如果第一个条件为假，则检查组件的值是否等于字符串 “黄色”。

  • ? "🟡"：如果第二个条件为真，则显示黄色方块表情符号。

  • : ui.detail1.data?.[0]?.CustomerStatus：如果两个条件都为假，它将引用与细节组件相连的数据数组中第一个项目的 “CustomerStatus” 值，ID 为 “detail1”。

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

指标

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

指标属性

指标组件与其他组件共享几个共同的属性，例如NameSource、和Actions。有关这些属性的更多信息，请参阅常用组件属性。

趋势

指标的趋势功能允许您显示表现的可视指标，或显示指标随时间推移而发生的变化。

趋势值

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

示例：

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

此表达式从与 “SalesMetrics” 指标相关的数据中的第一项中检索逐月收入值。

积极的趋势

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

示例：

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

此表达式检查月度收入值是否大于 0，表示趋势良好。

负面趋势

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

示例：

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

此表达式检查月度收入值是否小于 0，表示趋势为负。

颜色栏

此开关允许您启用或禁用彩色条形图的显示，以直观地指示趋势状态。

颜色栏示例：
示例：销售指标趋势

  • 趋势值：{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}

  • 积极趋势：{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}

  • 负面趋势：{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}

  • 颜色栏：已启用

示例：库存指标趋势

  • 趋势值：{{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}}

  • 颜色 Bbar：已启用

示例：客户满意度趋势

  • 趋势值：{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}

  • 积极趋势：{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}

  • 负面趋势：{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}

  • 颜色栏：已启用

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

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

指标表达式示例

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

示例：引用主值

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

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

示例：引用次要值

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

示例：{{ui.revenueMetrics.secondaryValue}}将显示revenueMetrics指标组件的辅助值。

示例：引用数据

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

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

示例：显示特定的数据值：

{{ui.metric1.data?.[0]?.id}}：此表达式是如何显示与具有 ID 的指标组件相关的数据中的特定信息的示例metric1。当你想显示数据中第一项的特定属性时，它很有用。

故障：

  • ui.metric1：使用 ID 引用指标组件metric1。

  • data: 指与该组件相关的信息或数据集。

  • ?.[0]: 表示该数据集中的第一个项目或条目。

  • ?.id：显示第一个项目或条目的id值或标识符。

示例：{{ui.orderMetrics.data?.[0]?.orderId}}将显示与orderMetrics指标组件相关的数据中第一项的orderId值。

示例：显示数据长度

{{ui.metric1.data?.length}}：此表达式演示如何显示与带有 ID 的指标组件相关的数据中的长度（项目数）metric1。当你想显示数据中的项目数量时，它很有用。

故障：

  • ui.metric1.data：引用连接到组件的数据集。

  • ?.length：访问该数据集中项目或条目的总数或总数。

示例：{{ui.productMetrics.data?.length}}将显示与productMetrics指标组件相关的数据中的项目数量。

中继器

Repeater 组件是一个动态组件，允许您根据提供的数据源生成和显示元素集合。它旨在促进在应用程序的用户界面中创建列表、网格或重复模式。一些示例用例包括：

  • 为账户中的每位用户显示一张卡片

  • 显示包含图片的产品列表以及将其添加到购物车的按钮

  • 显示用户可以访问的文件列表

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

中继器属性

Repeater 组件与其他组件共享多个共同的属性，例如NameSource、和Actions。有关这些属性的更多信息，请参阅常用组件属性。

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

物品模板

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

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

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

布局

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

方向

  • 列表：将重复元素垂直排列在一列中。

  • 网格：在具有多列的网格布局中排列重复元素。

每页行数

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

每页列数和行数（网格）

  • 列：指定网格布局中的列数。

  • 每页行数：指定网格布局中每页显示的行数。为超出指定网格尺寸的项目提供分页。

表达式和示例

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

示例：引用项目

  • {{currentItem.propertyName}}：引用项目模板中当前项目的属性或值。

  • {{ui.repeaterID[index]}}：通过索引引引用中继器组件中的特定项目。

示例：呈现产品列表

  • 来源：选择Products实体作为数据源。

  • 商品模板：添加一个内含文本组件的容器组件以显示产品名称 ({{currentItem.productName}})，并添加一个图像组件以显示产品图片 ({{currentItem.productImageUrl}})。

  • 布局：将设置Orientation为List并根据Rows per Page需要进行调整。

示例：生成用户头像网格

  • 来源：使用表达式生成用户数据数组（例如，[{name: 'John', avatarUrl: '...'}, {...}, {...}]）。

  • 项目模板：添加图像组件并将其Source属性设置为{{currentItem.avatarUrl}}。

  • 布局：Orientation将设置为Grid，指定Columns和的数量Rows per Page，并根据需要调整Space Between和Padding。

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

表单

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

表单属性

表单组件与其他组件共享多个通用属性，例如NameSource、和Actions。有关这些属性的更多信息，请参阅常用组件属性。

生成表单

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

要再次使用 生成表单 功能：

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

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

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

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

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

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

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

表达式和示例

与其他组件一样，您可以使用表达式来引用和显示表单组件中的数据。例如：

  • {{ui.userForm.data.email}}：引用与具有 ID 的表单组件连接的数据源中email字段的值userForm。

注意

有关常常用组件属性用属性的更多表达式示例，请参见。

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

StepfLOW

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

Stepflow 组件与其他组件共享多个共同的属性，例如NameSource、和Actions。有关这些属性的更多信息，请参阅常用组件属性。

Stepflow 组件还有其他属性和配置选项，例如Step NavigationValidation、和Expressions。

AI 组件

AI 世代

Gen AI 组件是一个分组容器，用于对组件及其附带逻辑进行分组，以便在应用程序工作室中使用聊天轻松通过 AI 对其进行编辑。当你使用聊天创建组件时，它们将被分组到一个 Gen AI 容器中。有关编辑或使用此组件的信息，请参见构建或编辑您的应用程序。

文本&amp;数字组件

文字输入

文本输入组件允许用户在您的应用程序中输入和提交文本数据。它提供了一种简单直观的方式来捕获用户输入，例如姓名、地址或任何其他文本信息。

  • {{ui.inputTextID.value}}: 返回输入字段中提供的值。

  • {{ui.inputTextID.isValid}}: 返回输入字段中提供值的有效性。

文本

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

文字区域

文本区域组件旨在捕获用户的多行文本输入。它提供了更大的输入字段区域，供用户输入较长的文本条目，例如描述、注释或注释。

  • {{ui.textAreaID.value}}: 返回文本区域中提供的值。

  • {{ui.textAreaID.isValid}}: 返回文本区域中提供值的有效性。

电子邮件

电子邮件组件是一个专门的输入字段，旨在捕获用户的电子邮件地址。它可以强制执行特定的验证规则，以确保输入的值符合正确的电子邮件格式。

  • {{ui.emailID.value}}: 返回电子邮件输入字段中提供的值。

  • {{ui.emailID.isValid}}: 返回电子邮件输入字段中提供值的有效性。

密码

密码组件是一个专门为用户输入敏感信息（例如密码或 PIN 码）而设计的输入字段。它会掩盖输入的字符，以维护隐私和安全。

  • {{ui.passwordID.value}}: 返回密码输入字段中提供的值。

  • {{ui.passwordID.isValid}}: 返回密码输入字段中提供值的有效性。

Search

搜索组件为用户提供了一个专用的输入字段，用于在应用程序的填充数据中执行搜索查询或输入搜索词。

  • {{ui.searchID.value}}: 返回搜索字段中提供的值。

Phone

电话组件是为捕获用户的电话号码或其他联系信息而量身定制的输入字段。它可以包括特定的验证规则和格式选项，以确保输入的值符合正确的电话号码格式。

  • {{ui.phoneID.value}}: 返回电话输入字段中提供的值。

  • {{ui.phoneID.isValid}}: 返回电话输入字段中提供值的有效性。

数字

数字组件是专门为用户输入数值而设计的输入字段。它可以强制执行验证规则，确保输入的值是指定范围或格式内的有效数字。

  • {{ui.numberID.value}}: 返回数字输入字段中提供的值。

  • {{ui.numberID.isValid}}: 返回数字输入字段中提供值的有效性。

货币

货币成分是一个专门的输入字段，用于捕获货币价值或金额。它可以包括用于显示货币符号、十进制分隔符的格式选项，并强制执行特定于货币输入的验证规则。

  • {{ui.currencyID.value}}: 返回货币输入字段中提供的值。

  • {{ui.currencyID.isValid}}: 返回货币输入字段中提供值的有效性。

细节对

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

选择组件

Switch

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

切换组

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

切换群组表达式字段

  • {{ui.switchGroupID.value}}: 返回一个字符串数组，其中包含应用程序用户启用的每个开关的值。

复选框组

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

复选框组表达式字段

  • {{ui.checkboxGroupID.value}}：返回一个字符串数组，其中包含应用程序用户选择的每个复选框的值。

电台组

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

无线电组表达式字段

以下字段可用于表达式。

  • {{ui.radioGroupID.value}}：返回应用程序用户选择的单选按钮的值。

单选

单选组件为用户提供选项列表，用户可以从中选择单个项目。它通常用于用户需要从一组预定义的选项（例如选择类别、位置或偏好）中进行选择的场景。

单选表达式字段

  • {{ui.singleSelectID.value}}: 返回应用程序用户选择的列表项的值。

多选

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

多选表达式字段

  • {{ui.multiSelectID.value}}: 返回一个字符串数组，其中包含应用程序用户选择的每个列表项的值。

按钮&amp;导航组件

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

按钮组件

可用的按钮组件有：

  • 按钮

  • 概述按钮

  • 图标按钮

  • “文本” 按钮

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

内容

  • 按钮标签：要显示在按钮上的文本。

类型

  • 按钮：标准按钮。

  • 概述：带有轮廓样式的按钮。

  • 图标：带有图标的按钮。

  • 文本：纯文字按钮。

Size

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

图标

您可以从按钮上显示的各种图标中进行选择，包括：

  • 信封已关闭

  • Bell

  • 人员

  • 汉堡菜单

  • Search

  • 信息圈出

  • 装备

  • 雪佛龙左

  • 雪佛龙右

  • 水平圆点

  • 垃圾桶

  • 编辑

  • Check

  • Close

  • 主页

  • Plus

触发器

单击该按钮时，您可以配置一个或多个要触发的操作。可用的操作类型有：

  • 基本

    • 运行组件操作：在组件内执行特定操作。

    • 导航：导航到其他页面或视图。

    • 调用数据操作：触发与数据相关的操作，例如创建、更新或删除记录。

  • 高级

    • JavaScript: 运行自定义 JavaScript 代码。

    • 调用自动化：启动现有的自动化或工作流程。

JavaScript 操作按钮属性

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

源代码

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

return "Hello World";

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

条件：运行 if

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

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

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

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

注意

务必彻底测试您的 JavaScript 行为，确保它们按预期运行。

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

内容

  • 超链接标签：显示为超链接标签的文本。

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

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

日期&amp;时间组件

日期

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

日期组件与其他组件共享几个共同的属性，例如NameSource、和Validation。有关这些属性的更多信息，请参阅常用组件属性。

除了常见的属性外，日期组件还具有以下特定属性：

日期属性

Format

  • YYYY/MM/DDDD/MM/YYYY、YYYY/MM/DD、YYYY/DD/MMMM/DD、、、 DD/MM：显示日期的格式。

值

  • YYYY-MM-DD：内部存储日期值的格式。

最小日期

  • YYYY-MM-DD：可以选择的最小日期。

    注意

    此值必须与的格式相匹配YYYY-MM-DD。

最大日期

  • YYYY-MM-DD：可以选择的最大日期。

    注意

    此值必须与的格式相匹配YYYY-MM-DD。

日历类型

  • 1 个月，2 个月：要显示的日历界面的类型。

禁用日期

  • 来源：应禁用的日期的数据源。例如：无，表达式。

  • 禁用日期：用于确定应禁用哪些日期的表达式，例如：

    • {{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}}: 禁用周末。

行为

  • 如果可见：决定日期组件可见性的表达式。

  • 禁用 if：用于确定是否应禁用日期组件的表达式。

验证

验证部分允许您为日期输入定义其他规则和约束条件。通过配置这些验证规则，您可以确保用户输入的日期值满足应用程序的特定要求。您可以添加以下类型的验证：

  • 必需：此开关可确保用户在提交表单之前必须输入日期值。

  • 自定义：您可以使用 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."

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

表达式和示例

日期组件提供以下表达式字段：

  • {{ui.dateID.value}}：返回用户以格式输入的日期值YYYY-MM-DD。

时间

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

时间属性

时间组件与其他组件共享几个共同的属性，例如NameSource、和Validation。有关这些属性的更多信息，请参阅常用组件属性。

除了常见的属性外，时间组件还具有以下特定属性：

时间间隔

  • 5 分钟、 10 分钟、 15 分钟、 20 分钟、 25 分钟、 30 分钟、 60 分钟：可用于选择时间的间隔。

值

  • HH:MM AA：内部存储时间值的格式。

    注意

    此值必须与的格式相匹配HH:MM AA。

Placeholder

  • 日历设置：时间字段为空时显示的占位符文本。

最小时间

  • HH:MM AA：可以选择的最短时间。

    注意

    此值必须与的格式相匹配HH:MM AA。

最大时间

  • HH:MM AA：可以选择的最长时间。

    注意

    此值必须与的格式相匹配HH:MM AA。

禁用时间

  • 来源：应禁用的时间的数据源（例如，无、表达式）。

  • 禁用时间：决定应禁用哪些时间的表达式，例如{{currentRow.column}}。

禁用时间配置

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

源

  • 无：没有禁用任何时间。

  • 表达式：您可以使用 JavaScript 表达式来确定应禁用哪些时间，例如{{currentRow.column}}。

示例表达式：
{{currentRow.column === "Lunch Break"}}

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

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

行为

  • 可见 if：确定时间组件可见性的表达式。

  • 禁用 if：用于确定是否应禁用时间组件的表达式。

验证

  • 必需：此开关可确保用户在提交表单之前必须输入时间值。

  • 自定义：允许您使用 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.

表达式和示例

时间组件提供以下表达式字段：

  • {{ui.timeID.value}}：返回用户以 HH:MM AA 格式输入的时间值。

示例：时间值

  • {{ui.timeID.value}}：返回用户以格式输入的时间值HH:MM AA。

示例：时间比较

  • {{ui.timeInput.value > "10:00 AM"}}：检查时间值是否大于上午 10:00。

  • {{ui.timeInput.value < "05:00 pM"}}：检查时间值是否小于下午 05:00。

日期范围

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

日期范围属性

日期范围组件与其他组件共享几个共同的属性，例如NameSource、和Validation。有关这些属性的更多信息，请参阅常用组件属性。

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

Format

  • MM/DD/YYYY：显示日期范围的格式。

开始日期

  • YYYY-MM-DD：可以选择作为范围开始的最小日期。

    注意

    此值必须与的格式相匹配YYYY-MM-DD。

结束日期

  • YYYY-MM-DD：可以选择作为范围结束的最大日期。

    注意

    此值必须与的格式相匹配YYYY-MM-DD。

Placeholder

  • 日历设置：日期范围字段为空时显示的占位符文本。

最小日期

  • YYYY-MM-DD：可以选择的最小日期。

    注意

    此值必须与的格式相匹配YYYY-MM-DD。

最大日期

  • YYYY-MM-DD：可以选择的最大日期。

    注意

    此值必须与的格式相匹配YYYY-MM-DD。

日历类型

  • 1 个月：要显示的日历界面的类型。例如，单月。

  • 2 个月：要显示的日历界面的类型。例如，两个月。

已选择强制性天数

  • 0：必须在日期范围内选择的强制天数。

禁用日期

  • 来源：应禁用的日期（例如 “无”、“表达式”、“实体” 或 “自动化”）的数据源。

  • 禁用日期：用于确定应禁用哪些日期的表达式，例如{{currentRow.column}}。

验证

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

表达式和示例

日期范围组件提供以下表达式字段：

  • {{ui.dateRangeID.startDate}}：以格式返回所选范围的开始日期YYYY-MM-DD。

  • {{ui.dateRangeID.endDate}}：以格式返回所选范围的结束日期YYYY-MM-DD。

示例：计算日期差

  • {(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}计算开始日期和结束日期之间的天数。

示例：基于日期范围的条件可见性

  • {{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}检查所选日期范围是否在 2023 年之外。

示例：基于当前行数据的禁用日期

  • {{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}}根据当前行中的 “日期列” 禁用周末。

自定义验证

  • {{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}检查开始日期是否晚于结束日期，这将导致自定义验证失败。

媒体组件

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

嵌入 iFrame

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

iFrame 嵌入属性

URL
注意

应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 查看或更新应用程序的内容安全设置。

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

布局

  • 宽度：iFrame 的宽度，指定为百分比 (%) 或固定像素值（例如 300 像素）。

  • 高度：iFrame 的高度，以百分比 (%) 或固定像素值指定。

S3 上传

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

注意

切记要确保必要的权限和 Amazon S3 存储桶配置到位，以支持应用程序的文件上传和存储要求。

S3 上传属性

S3 配置

  • 连接器：选择用于文件上传的预配置的 Amazon S3 连接器。

  • 存储桶：用于上传文件的 Amazon S3 存储桶。

  • 文件夹：Amazon S3 存储桶中用于存储文件的文件夹。

  • 文件名：上传文件的命名规范。

文件上传配置

  • 标签：显示在文件上传区域上方的标签或说明。

  • 描述：有关文件上传的其他说明或信息。

  • 文件类型：允许上传的文件类型。例如：图像、文档或视频。

  • 大小：可以上传的单个文件的最大大小。

  • 按钮标签：显示在文件选择按钮上的文本。

  • 按钮样式：文件选择按钮的样式。例如，概述或填充。

  • 按钮大小：文件选择按钮的大小。

验证

  • 最大文件数：一次可以上传的最大文件数。

  • 最大文件大小：每个文件允许的最大大小。

触发器

  • 成功时：文件上传成功时触发的操作。

  • 失败时：文件上传失败时触发的操作。

S3 上传表达式字段

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}}: 返回文件名及其扩展名后缀位于指定索引处。

表达式和示例

示例：访问上传的文件

  • {{ui.s3uploadID.files.length}}：返回已上传的文件数。

  • {{ui.s3uploadID.files.map(f => f.name).join(', ')}}: 返回以逗号分隔的已上传文件名列表。

  • {{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}: 仅返回已上传的图像文件的数组。

示例：验证文件上传

  • {{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 个。

示例：触发操作

  • {{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)}}：检索已上传文件的 URL，该网址可用于显示或进一步处理文件。

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

注意

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

PDF 查看器组件

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

PDF 查看器属性

源
注意

应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 查看或更新应用程序的内容安全设置。

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

Expression

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

实体

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

URL

指定 PDF 文档的 URL。

URL

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

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

数据 URI

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

Blob 或 ArrayBuffer

您也可以将 PDF 文档作为 Blob 或 ArrayBuffer 对象提供，这允许您从应用程序中的各种来源动态生成或检索 PDF 数据。

自动化

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

操作

  • 下载：添加允许用户下载 PDF 文档的按钮或链接。

布局

  • 宽度：PDF 查看器的宽度，以百分比 (%) 或固定像素值（例如 600px）指定。

  • 高度：PDF 查看器的高度，指定为固定像素值。

图像查看器

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

图像查看器属性

源
注意

应用程序的内容安全设置中必须允许使用此组件中显示的媒体来源。有关更多信息，请参阅 查看或更新应用程序的内容安全设置。

  • 实体：将图像查看器组件连接到包含图像文件的数据实体。

  • URL：指定图像文件的 URL。

  • 表达式：使用表达式动态生成图像源。

  • 自动化：将图像查看器组件连接到提供图像文件的自动化。

替代文本

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

布局

  • 图像大小：确定应如何调整图像大小并在组件中显示图像。例如，Contain、Cover 或 Fill。

  • 宽度：图像查看器组件的宽度，指定为百分比 (%) 或固定像素值（例如 300 像素）。

  • 高度：图像查看器组件的高度，指定为固定像素值。

  • 背景：允许您为图像查看器组件设置背景颜色或图像。