文档中心表达式
控件是UX实现页面UI层的途径，而表达式是UX实现逻辑的重要手段。它本质是用JavaScript语言编写的一段代码脚本，但UX提供了一些预置的变量、属性与方法，以便用户能够通过UI或简单表达式的形式 快速配置页面逻辑。
常见的表达式使用场景有：
-
通过筛选器(POV)动态查询清单表的数据；
-
带参跳转到另一个元素或UX页面；
-
在表单中动态显示隐藏控件；
-
自动带出关联信息；
-
实现级联选择的效果；
-
等等…
当在页面属性栏配置出选择【表达式】时，你可以通过 $components.控件编码.value的形式获取控件的值，进而使用js语法进行任意操作，例如 $components.控件编码.value + 1 ，即可获取该控件的值并加1。 若要通过获取后端返回的一张表的一列，则可以通过 $dataSources.数据源编码.data.map(n=>n.fieldName) 则可以获取该数据源的一列数据。
若表达式配置在事件的动作中，则将在事件触发时执行。若配置在控件属性中，则将在其中参数变化时自动执行。若配置在数据源属性中，则可以通过【查询数据源】动作按最新表达式值执行，也可以勾选【参数变化时自动执行】自动响应参数的变化。
常见的表达式变量
在表达式选择处，预置了固定值、控件值、UX变量等多个选择项以便快速配置，其本质都是转换成JS表达式来执行。
例如选择控件值后选择某一个控件，则代表填入了 $components.控件编码.value ，即获取该控件的值。
选择变量后选择某一个变量，则代表填入了 $var.变量编码 ，即获取该变量的值。
下方为不同变量对应的含义和用法，在表达式编辑器中可以看到所有支持的语法形式。 此外由于是基于JavaScript语言，因此也可以使用JavaScript的语法来编写表达式，例如执行循环、判断等复杂操作。
|
类型 |
变量名 |
说明 |
写法 |
示例 |
|---|---|---|---|---|
|
控件 |
$components |
控件相关的变量，一般用于获取控件的值。 |
$components.控件编码.value |
利润=销售-成本，那么给利润控件配置表达式：$components.sales.value - $components.cost.value 即可自动算出利润 （通常建议计算主要放在后端，页面仅做一些简单计算/呈现） |
|
上下文 |
$context |
控件上下文的变量，一般用于获取点击事件抛出的数据 |
$context.event.data.属性编码 |
点击表格某一行时获取该行的业务主键数据，可配置表达式：$context.event.data.req_id |
|
数据源 |
$dataSources |
数据源变量，用于获取数据源相关信息 |
$dataSources.数据源编码.data.属性编码 |
选择一条合同数据，将查询到的合同状态数据赋给某个控件，则可在该控件动态值配置表达式：$dataSources.data_form.data.status |
|
全局 |
$system |
系统变量，用于获取系统预置参数的值 |
$system.系统参数名 |
新建明细表时，创建人默认当前用户，则可配置表达式：$system.userId |
|
$urlQuery |
页面url变量，用于获取url中参数的值 |
$urlQuery.参数名 |
跳转内部页面时配置了键名key，在被跳转页面则可通过表达式：$urlQuery.key解析出键名的值 |
在UX中很多地方都可以使用表达式，例如禁用、隐藏属性，动态值、默认值，以及动作，在表达式编辑器中，我们将常用的变量和属性做成了属性树，展开不同的变量我们可以看到可以使用的属性：
例如，展开$components变量，会罗列画布中所有的控件，展开某个控件可以看到该控件下可用的属性，插入value属性，可以直接生成获取该控件值的表达式：
也可以使用数据源变量，插入某个数据源下的属性，直接生成获取该数据源属性数据的表达式：
除了插入属性直接生成表达式，也可以点击复制按钮，复制对应层级的变量名。
常用示例
为了降低用户写JS表达式的成本以及方便用户更快速上手，我们将常见的表达式常见做成了示例模板，插入模板后只需替换控件编码/属性编码即可完成表达式的书写。
若不知道如何使用模板，可以点击模板，在下方会显示模板的说明和示例用法，参照说明替换对应的字符即可。
常见的表格类表达式使用
由于表格类与控件有区别，额外列示表格中的表达式常见用法。 其中，context表示上下文，仅能在上下文环境中获取到数据，例如按钮抛出事件（context.event.data）等，脱离该环境，例如在文本中直接引用是无法引到的。 components.xx.属性则是额外封装了一部分可以直接引用的数据，更加直观。
|
表达式 |
场景 |
|---|---|
|
$context.data.currentRow.字段编码 |
表示表格的当前所在行，通用于各类表格的行间逻辑，例如根据行数据按行控制禁用、列间计算、列间级联等 |
|
$components.表格编码.clickedRow.字段编码 |
清单表点击行的数据，在点击表格行时该变量的值自动更新 |
|
$components.图表编码.clickedItem.字段编码 |
图表点击单元格/柱子的数据，在点击图表时该变量的值自动更新 |
|
$components.表格编码.selectedRows[0].字段编码 |
清单表选择多行后，获取第一行的字段值 |
|
$components.表格编码.selectedRows.map(n=>n.字段编码) |
清单表选择多行后，获取某列字段的值（返回数组) |
|
$context.event.lastActionResult(上一个动作) 或 $context.event.actionResults（之前所有动作) |
在动作执行的序列中，获取之前动作的执行结果并用作后续用途 |
|
$context.event.data.字段编码 |
少量只能通过上下文获取的情况，目前已基本无需使用 |
常见的卡片列表表达式使用
|
表达式 |
说明 |
|---|---|
|
$context.data.currentRow.字段编码 |
表示卡片列表的当前卡片，获取当前卡片数据指定字段的值 |
|
$components.字段控件编码.get($context.data.levelPath).value |
获取当前卡片指定控件的值 |
|
$components.字段控件编码.get(‘1’).value |
获取第二个卡片的指定控件的值 |
|
$components.字段控件编码.getId($context.data.levelPath) |
获取当前卡片指定控件的id |
常见的可添加卡片表达式使用
|
表达式 |
说明 |
|---|---|
|
$components.字段控件编码.get($context.data.levelPath).value |
获取当前卡片指定控件的值，由于可添加卡片为嵌套结构，需要通过上下文函数获取当前所在层级的控件值 |
|
$components.字段控件编码.get(‘0-1’).value |
获取可添加卡片中的第一个卡片里的可添加卡片里的第二个卡片里指定控件的值 |
|
\components.字段控件编码.getId($context.data.levelPath) |
获取当前卡片指定控件的id |
回到顶部
咨询热线
400-821-9199
