1.概述
本文档用于介绍如何自定义敏捷看板组件。
2.定义组件
2.1新建组件
进入【组件库管理】-【组件库】-【敏捷看板组件】中，打开自定义组件标签页，点击新建组件。
进入新建组件界面。
1) 下图分别是三个标签页，“源代码”标签页用来编写组件html相关代码，default.js和default.css标签分别用来写组件相关的js和css代码。
2) 
是一个添加按钮，当一个组件的功能相对复杂时，也可以点击加号按钮。新建脚本或者样式文件来满足需要，当本地已经编写好js或者css文件后，也可以选中上传本地文件到编辑器中。
3) 下图分别是三个对话框，用来存储和组件相关的“取数”，“属性”，“事件”相关信息内容。
4) “全局资源”按钮用于引用外部js、css文件资源。将想要使用的js、css文件上传到全局资源即可使用。
2.2组件js代码写法
打开default.js标签页，这里已经内置了组件生效必须实现的方法。
这里的方法包括init、setProperty、refreshDatas、resize、dispose方法。当然，我们还内置了一些其他方法，只需要在js代码编辑器页面按下“alt+shift+s”，就可以看到内置方法的对话框，勾选之后确定，即可插入到当前编辑器的指定位置。 · init方法是组件初始化时执行的方法 · refreshDatas方法是组件在数据刷新时执行的方法 · setProperty是组件属性修改后执行的方法 |
2.3取数
组件渲染时需要使用到数据就被设置在取数对话框中，例如：当渲染一个简单的柱状图时，就需要有轴数据和系列数据，这样我们就可以将这些数据定义到取数对话框中。 当然在定义取数的同时，我们还需要设置取数模型，以方便组件在图表界面使用生成图表。对于一些复杂的图表，我们可能还需要定义自定义规则以满足更多，更复杂的需求。（见下图） 当然在定义取数的同时，我们还需要设置取数模型，以方便组件在图表界面使用生成图表。对于一些复杂的图表，我们可能还需要定义自定义规则以满足更多，更复杂的需求。 |
2.4属性
当组件需要添加属性用于看板中的展现时，可以在“属性”弹窗中添加对应属性，同样可以点击“高级配置”直接以json数组的方式快速添加多个组件属性。 |
2.5图表样式
当对应组件需要“图表样式”用于在敏捷看板中切换内置样式时，可以在图表样式中进行相关的样式配置。 · “属性”是前面在”属性“弹窗中设置的相关属性，这里以json的方式配置前面设置属性字段的默认值 · ”css内容“对应的是在该种图表样式下，组件所需要运用的css内容，以修改组件的颜色、宽高等等css相关内容。 |
2.6预览
当完成组件的编写之后，点击“预览”按钮预览当前样式组件的预览效果，下拉框用于切换组件的“图表样式”风格。
3.发布组件
完成组件的定义工作之后，就可以直接发布组件，将组件发布到“自定义组件”中。
在发布组件之后，点击编辑组件。进入组件编辑之后，点击”更多“按钮下的“版本管理“按钮即可查看或编辑所有的发布版本。 |
请先登录