对象表单
这是一个用于显示、新建或编辑对象记录的表单组件。
基本用法
最基本的用法是配置组件的“对象”及“记录ID”属性,就可以显示出某条对象记录的只读表单页面。
如下所示我们配置对象表单的“对象”属性为当前对象,“记录ID”属性为当前记录:
{
"type": "page",
"title": "Welcome to Steedos",
"body": [
{
"type": "steedos-object-form",
"label": "对象表单",
"objectApiName": "${objectName}",
"recordId": "${recordId}",
"className": "sm:border sm:shadow sm:rounded sm:border-gray-300 bg-white p-4"
}
]
}
如果我们新建一个指向人员对象的微页面,并拖动一个对象表单组件到画布,可以看到该组件生成了类似上面的amis Schema配置。
发布后,我们就可以在人员对象的记录详细页面看到只读的人员记录表单效果。
objectApiName属性可以被配置为像space_users
或accounts
这种固定值,也可以配置为变量,而变量objectName
在“记录页面”、“列表页面”以及“表单”类型的微页面中存储了当前对象Api名称。
recordId属性类似的可以配置为某个具体的记录id值,但是一 般我们会配置为变量,比如在“记录页面”或“表单”类型的微页面中配置为当前记录Id值。
只读/可编辑
对象表单 ObjectForm 组件默认是只读的,一般用于在“记录页面”的微页面中配置一个只读的对象表单。
可以通过修改其mode属性为“eidt”来把对象表单组件显示为可编辑状态。
表单处于编辑状态时,表单默认ID为 'form_'+对象名 。 例如: “form_tasks” 表示任务对象表单ID。组件form属性中配置id可以覆盖表单默认ID。 表单处于只读状态时,表单默认ID为 “service_detail_page” 。
底部按钮栏
当对象表单 ObjectForm 组件被配置为可编辑时,默认是不带提交按钮的。
如果需要在表单底部显示提交按钮,只要配置 actions
属性即可,这是amis原生能力,具体请参阅文档 底部按钮栏。
{
"type": "page",
"title": "Welcome to Steedos",
"body": [
{
"type": "steedos-object-form",
"objectApiName": "organizations",
"recordId": "gKfnkfbLWdqCxo8dg",
"mode": "edit",
"actions": [
{
"type": "button",
"label": "保存",
"actionType": "submit",
"level": "info"
}
]
}
]
}
要提交表单,只要像上面示例一样,在 actions
节点配置一个 submit
按钮即可,而不用费力配置 api 请求接口。
除了可以轻松实现提交表单外,还可以定制表单提交后行为,这些功能与amis原生表单组件没有区别,请参阅 amis Form 表单提交后行为。
触发表单事件
对象表单 ObjectForm 组件最终输出的是一个 amis Form 表单 组件,我们可以像使用 amis 原生表单组件 一样实现跨组件触发表单事件。
以下示例演示了跨组件提交表单,只要正确的配置组件的id
属性以及事件的componentId
属性即可。
{
"type": "page",
"title": "Welcome to Steedos",
"body": [
{
"form":{
"id": "test",
},
"type": "steedos-object-form",
"objectApiName": "organizations",
"recordId": "gKfnkfbLWdqCxo8dg",
"mode": "edit"
},{
"type": "button",
"label": "提交上面的表单",
"onEvent": {
"click": {
"actions": [
{
"componentId": "test",
"actionType": "submit"
}
]
}
}
}
]
}
弹出表单
在微页面设计器中拖动一个普通的“按钮”组件到画布,然后在设计器中为其添加一个“打开弹窗”的动作,在“弹框内容”画布中拖动一个Steedos“对象表单”,配置好相关属性后就可以轻松实现弹出对象表单功能。
最后设计器会生成类似如下内容的 amis Schema 配置。
{
"type": "page",
"title": "Welcome to Steedos",
"body": [{
"type": "button",
"label": "按钮",
"onEvent": {
"click": {
"actions": [{
"actionType": "dialog",
"dialog": {
"type": "dialog",
"title": "弹框标题",
"body": [
{
"type": "steedos-object-form",
"label": "对象表单",
"objectApiName": "organizations",
"recordId": "623NR6NCZJP8irB4y",
"mode": "edit"
}
],
"size": "xl"
}]
}
}]
}
属性表
除了支持 amis Form 表单属性表 中的配置以外,还支持下面的配置。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
objectApiName | string | space_users | 关联对象api名称 |
recordId | string | 无 | 关联记录ID值 |
mode | string | read | 只读read/编辑edit |
layout | string | normal | 表单项布局,同amis form的mode属性 |
fields | array | 无 | 显示的字段 |
excludedFields | array | 无 | 排除的字段 |
fieldsExtend | string | 无 | 重写字段配置 |
form | object | 无 | 重写amis底层form属性 |
enableTabs | boolen | 无 | 是否启用选项卡模式,当启用时会以选项卡的方式显示分组 |
tabsMode | string | 无 | 选项卡模式的展示模式,可参考amis Tabs 选项卡tabsMode属性 |
事件表
支持 amis Form 表单事件表 中的所有配置。
动作表
支持 amis Form 表单动作表 中的所有动作。
另外所有的对象表单组件只读模式都监听了对象的@data.change
事件,只要触发对象的@data.change
事件,就能间接调用该组件的以下动作:
详情请参考 对象表单组件只读模式源码。
刷新
以下示例演示点击按钮后,刷新名为project
的对象表单组件。
{
"type": "button",
"label": "刷新对象表单组件",
"onEvent": {
"click": {
"actions": [
{
"actionType": "broadcast",
"args": {
"eventName": "@data.changed.project"
},
"data": {
"objectName": "project"
}
}
]
}
}
}
在只读模式下,点击上述示例中的按钮后会触发绑定project
对象的对象表单组件的@data.changed
事件,在该事件中,会根据传入的参数判断是否刷新对象表单组件。
要刷新对象表单组件,需在data
中配置以下 参数:
- objectName:
String
。要触发广播事件对象的对象Api名称,即列表视图绑定的对象api名称。
在Steedos记录详情页中编辑记录后,会刷新只读页面中的对象表单组件,就是因为在弹出的编辑表单组件中监听了提交成功事件并触发了页面中只读的对象表单组件的@data.change
事件,在@data.change
事件中会执行刷新动作。
对象表单组件源码。
跳转到列表页面
在Steedos记录详情页中删除记录后,会跳转列表页面页面,就是因为触发了点击事件并触发了页面中只读的对象表单组件的@data.change
事件,在@data.change
事件中会执行跳转动作。
详情请参考 删除按钮源码。