技巧一自定义控件嵌入表单

很多小伙伴会问到自定义控件如何使用苍穹内部的标准控件，这里小编给出答复：

自定义控件暂不支持使用平台标准控件。但但但！！！但是，自定义控件支持使用标准表单。要如何使用呢？带着疑惑，和小编一起往下看。

在使用前要明确两个概念：

1.elementId：自定义控件里面的元素id，也就是说，需要把表单插入到自定义控件的某个节点元素的id中。

2.targetKey：自定义控件id。通过targetKey找到对应的自定义控件。

在自定义控件中，通过showForm指令的方式嵌入标准表单，类型为InContainer，目标容器是自定义控件的elementId。

插件示例如下：

FormShowParameter parameter = new FormShowParameter();
parameter.setFormId(formId);
parameter.setShowTitle(false);

parameter.getOpenStyle().setShowType(ShowType.InContainer);
parameter.getOpenStyle().setTargetKey('自定义控件id');

Map<String, String> customParams = new HashMap<>();
customParams.put("elementId", '自定义控件里面的元素id');
parameter.getOpenStyle().setCustParam(customParams);

this.view.showForm(parameter);

技巧二自定义控件多语言方案

1.在KDApi.register设置开启多语言功能，示例如下：

/*
  * KDApi.register新增第三个参数：config，object类型，没有传入时默认为空
  * isMulLang：是否使用多语言， 默认为false
*/
KDApi.register('dellabel', MyComponent, {
  isMulLang: true
})

2.在自定义控件根目录下，新建lang文件夹，lang文件夹下面新建zh_CN.json和en_US.json，用于表示多语言的文本。

新建lang目录

在lang文件下新建zh_CN.json文件

将index.js的中文词条抽出，放在zh_CN.json中，例如：zh_CN.json：{ "steps.key0001": "简单的步骤条" }。然后，将中文词条翻译为对应的多语言词条，例如：en_US.json：{"steps.key0001": "simple step bar"}。

3.使用KDApi.getLangMsg(model, key) 获取对应的文本。

以下以自定义控件dellabel为例，代码中有中文词条”标签“，则可在zh_CN.json文件写成如下形式：

{
    "dellabel.key0001": "标签1",   // 假如这是第一个词条
    "dellabel.key0002": "标签2"   // 假如这里有第二个词条
    "dellabel.key0003": "标签3{date}" // 假如这里有第三个词条，且词条里面含有一个变量date
    "dellabel.key0004": "标签4{date}, {text}" // 假如这里有第四个词条，且词条里面含有两个变量：date和text
}

在代码中，词条的位置如下所示：

代码中词条位置示例

同时，需要将“标签”改成KDApi.getLangMsg(model, 'dellabel.key0001')，示例如下：

var updateHtml = function(model, props){
  var lang = model.lang  // 获取自定义控件所在单据语言环境，默认中文
  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['text'] ? props.data['text'] : props.configItems ? props.configItems[0].value : KDApi.getLangMsg(model, 'dellabel.key0001')
      /*
        * KDApi.getLangMsg(model, 'dellabel.key0003', { date: new Date() })
        * KDApi.getLangMsg(model, 'dellabel.key0004', { date: new Date(), text: '文字内容' })
      */
  })
  model.dom.innerHTML = result;
  initEvent(model, props);
}

技巧三自定义控件本地调试

1.使用NodeJS的express模块建立一个静态资源服务，示例如下：

// server.js
const express = require("express"); // npm i --save express
const app = express();
const path = require('path')
const serveIndex = require('serve-index');  // npm i --save serve-index
//设置跨域访问
app.all('*', function (req, res, next) {
    // 设置可以跨域访问的域名，比如https://feature.kingdee.com:2024
    res.header('Access-Control-Allow-Origin', 'https://feature.kingdee.com:2024');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With')
    res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
    res.header('Content-Type', 'text/css;text/javascript;text/html;application/json;application/x-img');
    next()
});
// 以下两行代码设置public文件夹为静态资源文件夹，访问http://localhost:3001就可以访问到public文件夹
app.use('/', express.static(path.join(__dirname, './src/web')));
app.use('/', serveIndex(path.join(__dirname, './src/web'), {'icons': true}));
// 设置监听3001端口，可以依据具体情况自行修改
app.listen(3001, () => { // 默认为localhost（本地主机）; 端口号3001
    console.log("CustomControl Static Server is Running!")
})

2.通过nodemon启动server.js，服务文件和静态资源文件一经修改，将自动重启服务，示例如下：

npm install -D nodemon
nodemon server.js

3.将自定义控件的目录放于“src/web/isv/开发商标识/领域标识/”中，可以根据开发商标识、领域标识自行建立对应命名的文件夹。

服务启动成功后，在地址栏的query部分末尾加上kdcus_cdn=http://localhost:3001。如果有hash，则在hash末尾加“,”就可以加载本地的自定义控件的代码。

开发过程中无需打包上传，也无需修改代码后重启整个服务，方便快捷。

http://localhost:3001这里的url由你本地启动的服务决定。

例如将：

https://feature.kingdee.com:2024/baseline_a/?formId=pc_main_console#/dform?formId=pc_main_console

改为：

https://feature.kingdee.com:2024/baseline_a/?formId=pc_main_console#/dform?formId=pc_main_console&kdcus_cdn=http://localhost:3001

划重点

1.版本BOS_v4.0.004或更高版本的标准产品对ISV目录做了调整，kingdee目录调整为与ISV目录同级。因此，只需要把文件放置在webapp/kingdee/领域标识/方案id目录下，但如果是低版本，则需要把文件放在webapp/isv/kingdee/领域标识/方案id。

2.在使用技巧三（自定义控件本地调试）的过程中需要注意：此功能仅适用于补丁BOS_V2.0.024及后续补丁版本。

#往期推荐#

# 360°教你搞定“自定义控件开发”(进阶篇)

# 360°教你搞定“自定义控件开发”（入门篇）

# 360°教你搞定“自定义控件”（API手册篇）

# 一篇揭秘如何实现“徽标”效果的好文，速看！

# 玩转设计器之“跨页面复制元数据&运用格式刷”

# 帮助文本，不仅仅是简单的文本提示

更多精彩内容，“码”上了解！↓

360°教你搞定“自定义控件”(高级技巧篇)

360°教你搞定“自定义控件”(高级技巧篇)

恭喜您！