一文读懂-动态添加控件原创
金蝶云社区-金蝉子
金蝉子
42人赞赏了该文章 6377次浏览 未经作者许可,禁止转载编辑于2023年07月03日 17:52:32
封面

如何实现动态添加控件


相信大家都接触过苍穹的设计器,在设计页面的过程中我们将控件拖拽到设计页面进行保存,通过这种预置控件的方式来设计我们的页面,但是我们有时候控件是不能预置的,需要动态设置的,这时我们该怎么处理呢?(此处我们不考虑在设计器中冗余多个控件,而是通过代码对运行期表单进行干预)

image.png

四步搞定动态添加控件

1. loadCustomControlMetas,向前端浏览器界面发送指令,输出动态控件的元数据

2. getEntityType,向界面主实体模型,动态注册新的属性对象,存储动态添加的字段值

3. onGetControl,向后台视图模型,输出动态控件的编程模型实例,并侦听控件的事件

4. beforeBindData,向后台视图模型,添加动态字段的控件编辑模型


1、loadCustomControlMetas

loadCustomControlMetas方法的作用是向前端浏览器界面发送指令,输出动态控件的元数据,从而实现控件能展示的效果。

如下图所示,向面板中动态加入了单据头字段和单据体字段,这样对浏览器界面发送了前端指令。

image.pngimage.png

image.png

这样就可以在前端界面看到对应的元数据了,但是这种状态只是能显示元数据,对应的数据模型没有与之进行绑定,而且在给控件取值和赋值的过程中也会发生空指针的错误,下面还需要继续完成其他插件


image.png


2、getEntityType

getEntityType方法的作用是向界面主实体模型,动态注册新的属性对象,存储动态添加的字段值,从而达到控件能赋值的目的。

如下图所示,向面板中动态加入了单据头字段和单据体字段的文本属性,这样我们在赋值的时候就能根据标识来进行赋值了,而不会报空指针的错误。

image.png

image.png

这样就可以在后台给控件赋值后可以取到该值,但是这种状态只是能在后台取到和赋值,对应的数据模型和视图模型没有与之进行绑定,所以在表达中看不到显示出的值,下面还需要继续完成其他插件

3、onGetControl

onGetControl方法的作用是向后台视图模型,输出动态控件的编程模型实例,并侦听控件的事件,简言之就是前端输入一个1,后台值改变事件中能监听到这个控件的值变成了1,从而达到控件值能交互的目的。

image.png

image.png

通过上图点击按钮后,我们能弹出对应的提示,同时也能获取到自动文本中输入的值,这就是上面说的onGetControl的目的是为了控件值能进行前后端的交互,但是我们又发现我们设置的默认值不能展示在前端页面上,下面还需要继续完成其他插件。

4、beforeBindData

beforeBindData方法的作用是向后台视图模型,添加动态字段的控件编辑模型,后台赋值后需要展示到前端表单上,目的是控件值能显示

image.png

image.png

当然我们也可以通过afterCreateNewData基于修改后的实体模型创建界面默认值,操作完以上四个插件我们就基本完成了动态添加控件的步骤。


适用场景:

当需要根据特定条件,频繁且大量的显示不一样控件的时候,我们可以使用动态添加控件的方式来设计表单,如:我们分录中字段太多了,使用者不想频繁拖拉,这事我们可以在分录首新增一个按钮,跳转到一个动态表单,该动态表单通过动态注入控件的方式显示其父页面的所有控件。


image.png

以上就是本期的全部内容啦,咱们下期再见


赞 42