跳到主要内容

对象表单

这是一个用于显示、新建或编辑对象记录的表单组件。

基本用法​

最基本的用法是配置组件的“对象”及“记录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 表单属性表 中的配置以外，还支持下面的配置。

属性名类型默认值说明
objectApiNamestringspace_users关联对象api名称
recordIdstring无关联记录ID值
modestringread只读read/编辑edit
layoutstringnormal表单项布局，同amis form的mode属性
fieldsarray无显示的字段
excludedFieldsarray无排除的字段
fieldsExtendstring无重写字段配置
formobject无重写amis底层form属性
enableTabsboolen无是否启用选项卡模式，当启用时会以选项卡的方式显示分组
tabsModestring无选项卡模式的展示模式，可参考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事件中会执行跳转动作。

详情请参考 删除按钮源码。

微信扫码