一文读懂-动态添加控件

如何实现动态添加控件

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

四步搞定动态添加控件：

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

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

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

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

1、loadCustomControlMetas

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

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

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

2、getEntityType

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

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

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

3、onGetControl

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

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

4、beforeBindData

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

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

适用场景：

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

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