表达式是指用JavaScript语言编写的一段代码脚本,通过表达式我们可以实现业务逻辑的自由编排,表达式常常和事件动作结合起来使用,常见的表达式使用场景有:
通过POV动态查询清单表的数据;
带参跳转到另一个元素或UX页面;
在表单中动态显示隐藏控件;
自动带出关联信息;
实现级联选择的效果;
等等…
在UX中已经封装好了常见的JS表达式模板和变量方便用户使用,下方为不同变量对应的含义和用法:
类型 |
变量名 |
说明 |
写法 |
示例 |
---|---|---|---|---|
控件 |
$components |
控件相关的变量,一般用于获取控件的值。 |
$components.控件编码.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].字段编码 |
清单表选择多行后,获取某一行的字段值 |
$context.event.data.字段编码 |
清单表的行按钮点击时获取当前行的数据 |
表达式 |
说明 |
---|---|
$context.data.currentRow.字段编码 |
表示卡片列表的当前卡片,获取当前卡片数据指定字段的值 |
context.data.levelPath).value |
获取当前卡片指定控件的值 |
$components.字段控件编码.get(‘1’).value |
获取第二个卡片的指定控件的值 |
context.data.levelPath) |
获取当前卡片指定控件的id |
表达式 |
说明 |
---|---|
context.data.levelPath).value |
获取当前卡片指定控件的值 |
$components.字段控件编码.get(‘0-1’).value |
获取可添加卡片中的第一个卡片里的可添加卡片里的第二个卡片里指定控件的值 |
context.data.levelPath) |
获取当前卡片指定控件的id |
回到顶部
咨询热线