自定义控件开发文档

支持的技术栈包括但不仅限于 Vue、React、jQuery、art-template，以及原生开发

生命周期

控件参数

model

模型对象，自定义控件默认提供，值不能修改，其中包含以下内容

props

自定义控件数据对象，其中包含以下内容

API

KDApi.register

将自定义控件注册到苍穹平台中，所有自定义控件都需调用，接收两个参数

KDApi.getHTMLStringBytemplate

通过模版引擎art-template获取html字符串，接收两个参数

KDApi.getTemplateStringByFilePath

从给定的文件路径中获取模版引擎字符串，接收三个参数

KDApi.loadFile

通常是将js、css文件加载到苍穹平台

KDApi.getNameSpace

获取当前服务的路径前缀

KDApi.template

功能同 getHTMLStringBytemplate 接口，已经不维护，不建议使用

KDApi.templateFilePath

功能同 getTemplateStringByFilePath 接口，已经不维护，不建议使用

KDApi.nameSpace

功能同 getNameSpace 接口，已经不维护，不建议使用

自定义控件服务端模型对象及接口

Java模型对象 kd.bos.ext.form.control.CustomControl

模型中包含三个方法：

自定义控件在卡片中通常通过以下方式设置数据

  // ...
  Map<String, Object> data = new HashMap();

  // ...
  IClientViewProxy proxy = ((IClientViewProxy)this.getView().getService(IClientViewProxy.class));

  // entryentity是卡片分录标识，setCustomProperties 是指令名, index是卡片行号
  proxy.invokeControlMethod("entryentity" ,"setCustomProperties",index, data);

  // ...

模板示例

(function (KDApi, $) {
  function MyComponent (model) {
    this._setModel(model)
  }

  var themeColor // 顶层变量声明
  var isUpdate = false
  MyComponent.prototype = { // 内部函数不推荐修改
    _setModel: function (model) { 
      this.model = model // 内部变量挂载
    },
    init: function (props) {
      console.log('-----init', this.model, props)
      setHtml(this.model, props)
    },
    update: function (props) {
      console.log('-----update', this.model, props)
      themeColor = getThemeColor(props.theme)
      updateHtml(this.model, props)
    },
    destoryed: function () {
      console.log('-----destoryed', this.model)
    }

  }

  /*
   * 外部函数声明
   */
  var setHtml = function (model, props, isUpdate) {
    // 编写模板字符串
    var template = '<div class="hr-delLabel" title="<%= text %>">' +
                      '<div class="hr-delLabel-text">' +
                          '<%= text %>' +
                      '</div>' +
                      '<div class="hr-delLabel-icon"></div>' +
                  '</div>'
    // 获取html字符串
    var result = KDApi.getHTMLStringBytemplate(template, {
      text: props.data && props.data.get('text') ? props.data.get('text') : model.configItems ? model.configItems.getIn([0, 'value']) : '标签'
    })
    model.dom.innerHTML = result // 渲染html
    initEvent(model, props) // 给自定义控件增加点击事件
  }

  var updateHtml = function (model, props) {
    var template = '<div class="hr-delLabel" title="<%= text %>">' +
                      '<div class="hr-delLabel-text">' +
                          '<%= text %>' +
                      '</div>' +
                      '<div class="hr-delLabel-icon"></div>' +
                  '</div>'
    var result = KDApi.getHTMLStringBytemplate(template, {
      text: props.data && props.data.get('text') ? props.data.get('text') : model.configItems ? model.configItems.getIn([0, 'value']) : '标签'
    })
    model.dom.innerHTML = result
    initEvent(model, props)
  }
  /*
   * 将主题色转为对应色值
   */
  function getThemeColor (themeColor) {
    switch (themeColor) {
      case 'blue':
        return '#5582F3'
        break
      case 'green':
        return '#29C392'
        break
      case 'orange':
        return '#FC8555'
        break
      case 'purple':
        return '#6869FB'
        break
    }
  }

  /*
   * 通过自定义控件，向平台后端发送点击事件
   */
  var initEvent = function (model, props) {
    $(model.dom).click(function () {
      model.invoke('click', '')
    })
  }
  console.log('-----------------init')
  // 注册自定义控件
  KDApi.register('dellabel', MyComponent)
})(window.KDApi, jQuery)

注意