# 变更记录
| 产品版本 | 更新内容 | 更新日期 |
| --- | --- | --- |
| V4.0.007 | 自定义控件支持自定义事件 | 2023-12-07 |
本篇技巧篇包括自定义控件的四个技巧：自定义控件嵌入表单、自定义控件多语言方案、自定义控件本地调试、自定义控件支持自定义事件。
# 技巧一 自定义控件嵌入表单
## 背景
很多小伙伴会问到自定义控件如何使用苍穹内部的标准控件，这里给出的答复是：
自定义控件暂不支持使用平台标准控件！
自定义控件暂不支持使用平台标准控件！
自定义控件暂不支持使用平台标准控件！
但是自定义控件支持使用标准表单，怎么使用？请往下看
## 如何使用
首先要明确两个概念
1、elementId：自定义控件里面的元素id，也就是你需要把表单插入到自定义控件的某个节点元素的id
2、targetKey：自定义控件id
自定义控件嵌入表单是通过showForm指令的方式，类型为InContainer
插件示例：
```java
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设置开启多语言
```js
/*
* KDApi.register新增第三个参数：config，object类型，没有传入时默认为空
* isMulLang：是否使用多语言， 默认为false
*/
KDApi.register('dellabel', MyComponent, {
isMulLang: true
})
```
### 2、新建翻译词条JSON文件
自定义控件根目录下新建lang文件夹，lang文件夹下面新建zh_CN.json和en_US.json，用于表示多语言的文本。内容例如，zh_CN.json：{ "steps.key0001": "简单的步骤条" }，en_US.json：{"steps.key0001": "simple step bar"}。
在控件下建一个lang目录
在lang文件夹下新建zh_CN.json文件
### 3、使用KDApi.getLangMsg(model, key) 获取对应的文本
将index.js的中文词条抽出，放在zh_CN.json中，以下用自定义控件dellabel为例：
代码中有中文词条”标签“，则在zh_CN.json文件中这样子写：
```js
{
"dellabel.key0001": "标签1", // 假如这是第一个词条
"dellabel.key0002": "标签2" // 假如这里有第二个词条
"dellabel.key0003": "标签3{date}" // 假如这里有第三个词条，且词条里面含有一个变量date
"dellabel.key0004": "标签4{date}, {text}" // 假如这里有第四个词条，且词条里面含有两个变量：date和text
}
```
在代码里，词条的位置在这：
则需要将“标签”改成KDApi.getLangMsg(model, 'dellabel.key0001')。
```js
var updateHtml = function(model, props){
var lang = model.lang // 获取自定义控件所在单据语言环境，默认中文
var template = '
' +
'
' +
'<%= text %>' +
'
' +
'
' +
'
';
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() }),对应第三个词条"dellabel.key0003": "标签3{date}"
* KDApi.getLangMsg(model, 'dellabel.key0004', { date: new Date(), text: '文字内容' })对应第四个词条"dellabel.key0004": "标签4{date}, {text}"
*/
})
model.dom.innerHTML = result;
initEvent(model, props);
}
```
# 技巧三：自定义控件本地调试
## 如何使用
在请求头的query部分末尾加上kdcus_cdn=http://localhost:3001，如果有hash，则在hash末尾也加上，就可以加载你本地写的自定义控件的代码，开发过程中无需打包上传，也无需修改代码后重启整个服务，方便快捷。
例如：
改为：
http://localhost:3001 这里的url由你本地启动的服
