使用场景
使用表单容器组件,您可以通过一个现有的结构对象类型的变量快速生成一个表单。
使用说明
-
定义一个以特定结构对象为数据类型的变量(例如:_data)。
-
将表单容器拖入编排页面画布中,并绑定该变量。您可根据需要在选中
后拖动表单输入框的位置,为每个输入组件修改显示名称及对应的组件类型。通过底部批量添加按钮,您可对每一行数据对应的结构对象类型进行下钻,并选择对应的想要在表单中支持输入的字段。配置表单字段的流程分为两步:配置字段和选择布局。在第一步中,通过绑定表单变量下拉框选择已创建的变量(如 _data),在字段列表中确认所需字段后,单击下一步进入布局选择。 -
您可以按需配置具体的布局模式。系统提供三种表单布局供选择:单列表单布局(每行显示一个表单组件,依次排列)、双列表单布局(每行显示两个表单组件,依次排列)和三列表单布局(每行显示三个表单组件,依次排列,适用较为复杂的表单信息)。默认选中单列布局,选择完成后单击确定。
-
选中画布中的表单容器,您可以看到当前绑定的变量。选中表单中的任一输入框,可以看到该输入框的绑定的变量名称为该变量下的具体字段。您也可以针对内部任一输入框进行对应的自定义样式调整。表单容器的绑定变量值为
_data。例如,选中用户昵称文本输入框后,右侧属性面板显示其对象字段绑定为 nickName,唯一标识为TextField_lw1poaky1tp5sa,可在属性面板中调整标题位置、是否显示等样式选项。 -
应用运行时在输入框中输入数据时,整个表单绑定的变量将都能被赋值。
使用示例
针对订单、商品和买家三类模型,表单容器能够快速生成与之对应的表单。订单详情表单页面包含三个区块:订单基础信息(订单ID、数量、折扣、下单时间、订单状态、订单描述)、商品详情(商品ID、名称、价格、商品描述)和买家详情(买家ID、姓名、手机),带*号的字段为必填项。