自定义页面向表单/流程表单跳转传参
1. 使用场景
可能会用到在自定义页面调取数据源后进行组件赋值,在普通表单填写时默认进行赋值,而不需要再次进行手动的输入。
2. 视频教程
3. 操作步骤
3.1 步骤一:创建自定义页面
3.1.1 在页面中拉入两个输入框和按钮组件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625018201575-916bcf41-904f-4170-8d04-b000933cf494.png)
自定义编辑页面
3.1.2 在按钮上添加 onClick 事件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625018292960-324eeb1c-5571-431b-9cf5-de021c4bc132.png)
新建动作
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625018374066-2391e187-bf97-4c96-a68f-fe45899ced56.png)
点击确定
3.1.3 JS 面板
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642054855747-c35a761d-220e-4f01-9a33-25cbbbd96322.png)
JS面板
下述代码可直接复制在 JS 面板内,注意:需要替换组件的唯一标识。
export function onClick(){
//name 和 sex 为上面输入框组件取值
const name = this.$("textField_kq6ccx2b").getValue();
const sex = this.$("textField_kq6ccx2c").getValue();
//判断如果 name 和 sex 的值存在时执行下面跳转语句
if(name && sex){
//路由跳转
//下面这个 url 为表单提交页面的url,将获取到的 name 和 sex 值以携带参数的形式传给表单页面,后面两个参数传true即可。
this.utils.router.push("https://www.aliwork.com/APP_HQP0HX4ISBM4NV6RZR8T/submission/FORM-4A9667B1JA6RJCIO2XG4X5HBAVIH32CE4C6QKC4",
{name,sex},true,true);
}else{
//弹出消息窗
this.utils.toast({
title: '姓名和性别字段不能为空',
type: 'error',
size: 'large',
})
}
}
3.2 步骤二:创建表单页面
3.2.1 在表单页面拉入单行文本组件(根据个人需求拉入需要的组件)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642054898023-23813d8e-d183-4f95-8023-cb4fe7c6ec97.png)
普通表单编辑页面
3.2.2 打开数据源点击一下urlParams
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642054927362-539bf887-eba9-47a5-883f-bbb46a816b94.png)
添加数据源
3.2.3 组件绑定默认值
注意:
- 如果 url 中存在参数就为参数的值,否则将默认值设置为:「请输入姓名」
- 如果 url 中存在参数就为参数的值,否则将默认值设置为:「请输入性别」
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625017759594-78a74ee7-3dcc-4a09-8f18-02e8e3deba49.png)
设置姓名的默认值属性
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625017815137-6d95f4df-32bb-4818-bcea-4c9e3793f82c.png)
设置性别的默认值属性
4. 效果演示
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625019514111-687a5660-9f21-4263-ae3b-b5aa0c23d4ad.png)
效果演示
5. 在线试玩
--------------------获取宜搭最新信息,欢迎关注我们--------------------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1632807780139-91cbcd43-8c42-44f3-9b2d-0d8b799ab7ea.jpeg)
本文档对您是否有帮助?