自定义JS代码

更新时间：2021/02/23 GMT+08:00

如果您擅长编写JS代码，您可以不使用事件编排器中的内置动作，直接通过手动编写JS代码实现事件的逻辑功能；系统支持在手动编写JS代码时，进行代码联想提示；系统封装了一些常用功能的接口，并将其中典型接口做成模板，您可以直接拖动相关模板至代码编辑区域，直接使用。当代码较多时，您可单击代码编辑区域右上侧的，最大化代码编辑页面。

系统内置的模板代码，主要包括组件、消息&弹窗、页面、表单、表格、服务等，以下主要介绍部分系统内置的模板代码。

系统提供的经典接口样例如下：

提供事件上下文context，用于封装常用的对象及API，代码结构样例为：

context
├──$app  // 当前app信息
├──$user  // 当前用户信息
├──$page  // 页面相关操作
├──$component  // 组件相关操作
├──$model  // 数据模型相关操作
├──$message  // 提示消息
└──$dialog  // 对话框
└──$bp  // BPM相关操作
└──$bpm  // BPM相关操作，推荐使用该API，原子级操作

图1 使用内置的模块代码

图2 内置模板代码

单击具体模板代码事件左侧图标，可复制该模板代码，复制后您可在右侧代码编辑区域中任意地方进行粘贴。

单击具体模板代码事件右侧图标，您可打开该模板代码进行编辑，编辑后可拷贝出，关闭模板代码后，模板代码还是初始代码，不会将您在模板代码中编辑后的内容保存到该事件的模板代码中。

AI代码补全功能

功能描述：开发者在JS代码编写过程中，键入特定的字符，界面会进行提示，从而自动构建智能代码补全服务，增强IDE代码补全能力。

使用方法：开发者在JS代码编辑器中编写代码过程中，敲击字符时自动触发代码推荐，选中后按Enter补全。

下面对AI代码补全功能进行详细介绍：

事件内置API补全：开发者键入“context”后提示事件代码内可调用的API。
模型名称补全：开发者键入“context.$model.ref”后提示当前页面中的模型。
服务编排名称补全：开发者键入“context.flow”后提示当前租户下的服务编排。
脚本名称补全：开发者键入“context.script”后提示当前租户下的脚本。
服务名称补全：开发者键入“context.service”后提示当前租户下的API服务，选择API服务名称后自动补全服务地址。
华为OneMobile API补全：开发者键入“xm”后提示华为OneMobile小程序中的API。
WeLink API补全：开发者键入“HWH5”后提示WeLink小程序中的API。

组件类

获取当前组件
 context.$component.current
根据KEY获取组件
 API：context.$component.get(_compKey: number)

入参：组件KEY，类型为number。

出参：Component。

示例如下：
```
let _compKey = 1546395654403000
let _component = context.$component.get(_compKey)
```
根据名称获取组件
 API：context.$component.get(_compName: string)

示例如下：
```
let _compName = 'input_1'
let _component = context.$component.get(_compName)
```
获取组件绑定的模型
 API：_component.getDataModel()

_component为当前操作的组件。

示例如下：
```
let _component = context.$component.current
let _model = _component.getDataModel()
```

消息及弹框

提示成功消息
 API：context.$message.success(message: string)

示例：
```
// 成功消息
context.$message.success('Successfully')
```
提示错误消息
 API：context.$message.error(message: string)

示例：
```
// 失败消息
context.$message.error('Failed')
```

普通消息弹出框

API：context.$dialog.info(option: object)

入参：option，对话框参数，结构如下：

{
 title: string,      // 标题
 content: string,    // 内容
 okText：string,     // 确认按钮名称，可选
 onOk: function      // 确认回调函数，可选
}

示例：

// 普通弹出消息
context.$dialog.info({ title: 'Info', content: 'content', okText: 'ok', onOk: () => {alert('click ok')}})

确认消息弹出框

API：context.$dialog.confirm(option: object)

入参：option，对话框参数，结构如下：

{
 title: string,      // 标题
 content: string,    // 内容
 okText：string,     // 确认按钮名称，可选
 cancelText：string, // 取消按钮名称，可选
 onOk: function,     // 确认回调函数，可选
 onCancel: function  // 取消回调函数，可选
}

示例：

// 确认弹出消息
context.$dialog.confirm({ title: 'Confirm', content: 'content', okText: 'ok', cancelText: 'cancel', onOk: () => {alert('click ok')}, onCancel: () => {alert('click cancel')}})

成功消息弹出框

API：context.$dialog.success(option: object)

入参：option，对话框参数，结构如下：

{
 title: string,      // 标题
 content: string,    // 内容
 okText：string,     // 确认按钮名称，可选
 onOk: function      // 确认回调函数，可选
}

示例：

// 成功弹出消息
context.$dialog.success({ title: 'Info', content: 'content', okText: 'ok', onOk: () => {alert('click ok')}})

错误消息弹出框

API：context.$dialog.error(option: object)

入参：option，对话框参数，结构如下：

{
 title: string,      // 标题
 content: string,    // 内容
 okText：string,     // 确认按钮名称，可选
 onOk: function      // 确认回调函数，可选
}

示例：

// 错误弹出消息
context.$dialog.error({ title: 'Error', content: 'content', okText: 'ok', onOk: () => {alert('click ok')}})

弹出页面

API：context.$dialog.popup({ title: 'Error', page: 'date111',width:60,height:500, okText: 'ok',loading:true, params:{},onCancel: () => {alert('click cancel')},onOk: (data) => { data.visible = false; alert('click ok')}})

入参：option，对话框参数，结构如下：

{
 title: string,      // 标题
 page：string        // 弹出页面名称 
 width:integer       // 页面宽度，小于100为百分比，大于100为px
 height:integer      // 页面高度
 okText：string,     // 确认按钮名称，可选
 params：object      // 页面参数
 onCancel: function  // 取消时回调函数，可选
 onOk: function      // 确认回调函数，可选
 maskClosable: boolean //是否允许点击遮罩层关闭，默认true
 footerHide: boolean//是否隐藏按钮（确定、取消）区域，默认false
 loading: boolean //点击确定按钮时，确定按钮是否显示 loading 状态，开启则需在onOk中手动设置visible来关闭对话框
 draggable: boolean //是否可以拖动，默认false
 showCancel: boolean //是否展示取消按钮，默认true
 okFirst: boolean //是否确定按钮在取消按钮前面，默认false
}

loading:false用于确定按钮是否显示loading状态，默认为false即不显示loading状态，如果设置为true显示loading，onOk里需要使用visible来关闭对话框。

footerHide:false用于控制弹出页面上的按钮是否显示，默认为false表示不显示，设置为true可显示按钮。

子页面中关闭当前页面
 API：Page.$popup.get(Page.$root.popupKey).close();

页面类

获取当前页面
 API：context.$page.current
当前页面绑定的数据模型
 API：context.$page.getModel()

页面URL参数

API：context.$page.params.paramName

示例：

// 假设当前页面URL为：https://localhost:8080/besBaas/page#/std_1?a=1&b=2, 则获取URL参数方式如下：
let paramA = context.$page.params.a
let paramB = context.$page.params.b

在新的导航条打开页面
 API：context.$page.open(url: string, queryString: string)

入参：url表示页面地址；queryString表示查询参数（URL参数），格式为“key=value”，多个参数用&符号连接。

示例：
```
context.$page.open('https://localhost:8080/besBaas/page#/std_2', 'a=1&b=2')
```
在当前导航条打开页面
 API：context.$page.load(url: string, queryString: string)
刷新当前页面
 API：context.$page.reload()
在新的导航条打开标准页面
 API：context.$page.openStdPage(pageName: string, queryString: string)

入参：pageName表示页面名称；queryString表示查询参数（URL参数），格式为“key=value”，多个参数用&符号连接。

示例：
```
context.$page.openStdPage('std_2', 'a=1&b=2')
```
在当前导航条打开标准页面
 API：context.$page.loadStdPage(pageName: string, queryString: string)
在新的导航条打开高级页面
 API：context.$page.openAdvPage(pageName: string, websiteName:string, queryString: string)

入参：pageName表示页面名称；websiteName表示为高级页面的站点名称，queryString表示查询参数（URL参数），格式为“key=value”，多个参数用&符号连接。
在当前导航条打开高级页面
 API：context.$page. loadAdvPage (pageName: string, websiteName:string, queryString: string)

表单类

获取当前表单
 API：context.$component.form

如果当前组件为表单，则直接返回；否则，根据组件上下文向上查找最近的表单组件。
根据组件Key值获取表单
 API：context.getFormByKey(_formKey: number)

入参：表单组件的Key值，类型为number。
校验整个表单
- API：_form.formValidate()
  _form为已获取的表单组件，返回promise。
- API：_form. formValidateUnPromise
  非promise，返回true/false。
表单的单字段校验：
API：_form.validateField(prop, callback)

参数prop为需校验的属性，参数callback为检验完回调函数，返回错误信息。

示例：
```
_form.validateField("name",function(errorMsg){
     console.log("validate field", errorMsg)
 });
```
表单重置
 API：_form.resetFields()

_form为已获取的表单组件。
表单提交
 API：_form.formSave()

_form为已获取的表单组件。API内部实现已先进行表单校验，校验成功后进行提交保存操作。

表格类

获取当前表格
 API：context.$component.table

如果当前组件为表格，则直接返回；如果当前组件有关联的表格，则返回对应的表格（如表格查询条件、分页等）；否则，根据组件上下文向上查找最近的表格组件。
获取查询条件
 API：_table.getCondition()

_table为已获取的表格组件，返回表格绑定的查询条件。
设置查询条件
 API：
```
if(condition) {
  _table.setCondition(condition)
}
```
_table为已获取的表格组件。

setCondition：查询条件中如果有分页，只是重置当前页到第一页。

入参：表格查询条件。
执行查询
 API：_table.doQuery()

_table为已获取的表格组件。
初始化行数据
 API：_table.rowInit()

_table为已获取的表格组件，初始化一条新的行数据，此方法执行后，数据并未添加到表格。
添加行数据
 API：_table.addrow(newRowData: object)

_table为已获取的表格组件，此方法将初始化好的行数据添加到表格，此方法执行后，数据仅在前端表格保存，并未持久化到后端。

入参：行数据。
获取表格当前选中的行数据
 API： _table.getSelectedData()

_table为已获取的表格组件。

删除表格行数据

API：_table.doDelete(rows: array)

_table为已获取的表格组件。

入参：表格行数据列表。

示例：

// 当前表格
let _table = context.$component.table
// 获取当前选中的行
let rows = _table.getSelectedData()
// 删除选中行
_table.doDelete(rows)

获取表格修改的数据（新增、修改、删除）
API：_table.getOperatedData()

_table为已获取的表格组件。
保存表格数据
 API：_table.doSave(operatedData: object)

_table为已获取的表格组件，此方法将当前表格做的修改操作进行持久化操作。

入参：修改的表格数据。

示例：
```
// 当前表格
let _table = context.$component.table
// 获取修改的数据
let operatedData = _table.getOperatedData()
// 提交表格修改
_table.doSave(operatedData)
```

对象操作

获取对象
 API：context.object(objectName)

入参：objectName，对象名称。

出参：对象。

示例如下：
```
let _object = context.object("objectName")
```

查询对象所有数据

API：

_object.query().then(function (response) {
    // TODO: Your business logic
})

查询满足条件数据

例如查询满足name = 'test' 条件的对象数据。代码如下：

let _condition = {conjunction: 'AND', conditions: [{ field: 'name', operator: 'eq', value: 'test' }] }
_object.query({condition:_condition}).then(function (response) {
    // TODO: Your business logic
})

统计满足条件的对象数据数量

API：_object.count(_condition)

_object为对象名称

入参：_condition，查询条件，可选。

出参：Promise。

示例：

// 统计所有数据
_object.count().then(function (response) {
    // TODO: Your business logic
})

// 统计满足条件数据
_object.count(_condition).then(function (response) {
    // TODO: Your business logic
})

查询满足条件数据，且只查询部分字段

let _fields = 'id,name'
_object.query({condition:_condition}, _fields).then(function (response) {
    // TODO: Your business logic
})

查询满足条件数据，且只查询部分字段，支持分页和排序

例如根据name字段降序排序，跳过前10条记录分页，每页最多显示10条数据。示例代码如下：

let _fields = 'id,name'
let _options= {'skip': 10,'limit': 10,'orderby': [{'field': 'name','order': 'desc'}]}
_object.query({condition:_condition}, _fields, _options).then(function (response) {
    // TODO: Your business logic
})

通用对象数据查询

API：_object.query({condition:_condition}, fields: string)

入参：_condition，查询条件，可选，参考如下结构。

{ 
    conjunction: 'AND',    // 条件连接符，AND 或 OR
    conditions: [
        { 
            field: 'name', // 条件字段
            operator: 'eq',// 条件比较符
            value: 'test'  // 条件值
        },
        {
            condition: {   // 嵌入条件
                conjunction: 'OR',
                conditions: [
                    {
                        field: 'status',
                        operator: 'eq',
                        value: '1'
                    },
                    {
                        field: 'status',
                        operator: 'eq',
                        value: '2'
                    }                
                ]
            }
        }
    ]
}

以上示例表达内容为：name = 'test' && ( status = '1' || status = '2')

fields：查询字段（只返回指定的字段），多个字段以逗号分割，可选。

出参：Promise。

插入对象数据，支持批量操作
 API：_object.insert(data: Object[])

入参：data，待插入数据，对象数组。

出参：Promise，返回新插入数据的记录ID。

示例：
```
let data = [{ name: 'test', label: 'test' }]
_object.insert(data).then(function (response){
    if (response && '0' === response.resCode) {
        let _id = response.result[0].id}})
```
根据记录ID更新对象数据
 API：_object.updateByID(_id: string, data: Object)

入参：id表示记录ID；data表示对象更新内容。

出参：Promise。

示例：
```
let _id = '{{ id }}'
// 根据记录ID更新数据
_object.updateByID(_id, { label: 'test2' }).then(function (response) {
    // TODO: Your business logic
})
```

根据记录ID查询对象数据

API：_object.queryByID(_id: string)

入参：id表示记录ID。

出参：Promise。

示例：

let _id = '{{ id }}'
// 根据记录ID查询单条数据
_object.queryByID(_id).then(function (response) {
    // TODO: Your business logic
})

根据记录ID删除对象数据

API：_object.queryByID(_id: string)

入参：id表示对象记录ID。

出参：Promise。

示例：

let _id = '{{ id }}'
// 根据记录ID删除数据
_object.deleteByID(_id).then(function (response) {
    // TODO: Your business logic
})

根据记录ID批量查询对象数据
 API：_object.batchQueryByIDs(_ids: string, fields: string)

入参：ids表示记录ID，多个ID以逗号分割；fields表示查询字段，多个字段以逗号分割，可选。

出参：Promise。

示例：
```
_object.batchQueryByIDs('id1,id2,id3').then(function (response) {
    // TODO: Your business logic
})
```
根据记录ID批量删除对象数据
 API：_object.batchDeleteByIDs(_ids: string)

入参：ids表示记录ID，多个ID以逗号分割。

出参：Promise。

示例：
```
_object.batchDeleteByIDs('id1,id2,id3').then(function (response) {
    // TODO: Your business logic
})
```
批量插入或更新对象数据
 API：_object.batchUpsert(data: Object[])

入参：data，待插入或更新的数据对象，包含id时表示进行更新。

出参：Promise。

示例：
```
let data = [{id: '1538033158273005', label: 'test'}, {name: 'test', label: 'test'}]

_object.batchUpsert(data).then(function (response) {
    // TODO: Your business logic
})
```

脚本操作

初始化Script
API：context.script(scriptName)

入参：scriptName，表示Script名称。

出参：Script

示例：
```
// 初始化脚本
let _script = context.script('{{ scriptName }}')
```

运行Script

API：_script.run()

入参：无。

出参：Promise。

示例：

// 初始化脚本
let _script = context.script('{{ scriptName }}')

// 运行脚本
_script.run().then(function(response) {
    // TODO: Your business logic
})

服务编排相关

初始化Flow
API：context.flow(flowName)

入参：flowName表示Flow名称。

出参：Flow

示例：
```
// 初始化Flow
let _flow = context.flow("flowName")
```
设置Flow版本号
 API：_flow.version(version: string)

入参：version表示flow版本号。

出参：Flow。

示例：
```
// 设置Flow版本号
_flow.version("0.0.1")
```

运行Flow

API：flow.run(params: Object)

入参：params，输入参数，如下示例：

{
    param1: 'param1', 
    param2: { 
        param21: 'param21', 
        param22: 'param22'
    } 
}

出参：Promise。

示例：

// 适用于一次调用，Flow即完成的场景
// 运行Flow
_flow.run({ param1: 'param1' }).then(function (res) {
    // TODO: Youre business logic
})

启动Flow

API：_flow.start(params: Object)

入参：params，输入参数，如下示例：

{
    param1: 'param1', 
    param2: { 
        param21: 'param21', 
        param22: 'param22'
    } 
}

出参：Promise。

示例：

// 以下适用于多步操作的业务场景
_flow.start({ param1: 'param1' }).then(function (res) {
    // TODO: Youre business logic
})

执行Flow下一步

API：_flow.next(interviewID: string, params: Object)

入参：interviewID表示Flow运行实例ID；params：输入参数，如下示例：

{
    param1: 'param1', 
    param2: { 
        param21: 'param21', 
        param22: 'param22'
    } 
}

出参：Promise。

示例：

// 下一步
_flow.next("{{ interviewID }}", { param1: 'param1' }).then(function (res) {
    // TODO: Youre business logic
})

返回Flow上一步

API：_flow.back(interviewID: string, params: Object)

入参：interviewID表示Flow运行实例ID；params：输入参数，如下示例：

{
    param1: 'param1', 
    param2: { 
        param21: 'param21', 
        param22: 'param22'
    } 
}

出参：Promise。

示例：

// 上一步
_flow.back("{{ interviewID }}", { param1: 'param1' }).then(function (res) {
    // TODO: Youre business logic
})

正常完成Flow

API：_flow.finish(interviewID: string, params: Object)

入参：interviewID表示Flow运行实例ID；params：输入参数，如下示例：

{
    param1: 'param1', 
    param2: { 
        param21: 'param21', 
        param22: 'param22'
    } 
}

出参：Promise。

示例：

// 完成Flow
_flow.finish("{{ interviewID }}", { param1: 'param1' }).then(function (res) {
    // TODO: Youre business logic
})

恢复Flow运行

API：_flow.resume(interviewID: string, params: Object)

入参：interviewID表示Flow运行实例ID；params：输入参数，如下示例：

{
    param1: 'param1', 
    param2: { 
        param21: 'param21', 
        param22: 'param22'
    } 
}

出参：Promise。

示例：

// 恢复Flow
_flow.resume("{{ interviewID }}", { param1: 'param1' }).then(function (res) {
    // TODO: Youre business logic
})

删除Flow实例

API：_flow.terminate(interviewID: string, params: Object)

入参：interviewID表示Flow运行实例ID；params：输入参数，如下示例：

{
    param1: 'param1', 
    param2: { 
        param21: 'param21', 
        param22: 'param22'
    } 
}

出参：Promise。

示例：

// 删除Flow
_flow.terminate("{{ interviewID }}", { param1: 'param1', param2: { param21: 'param21', param22: 'param22' } }).then(function (res) {
    // TODO: Youre business logic
})

服务请求

调用服务的API

API：context.service('{{url}}').run(_inputParams)

入参：“url”为服务接口的URL，在APP或者BO视图下单击“服务”，可查看到封装Flow、脚本或者对象操作接口的URL。“_inputParams”为输入参数。

示例：

var _inputParams = {};
// 调用服务
context.service('{{ url }}').run(_inputParams).then(function(response) {
    // TODO: Your business logic
});

BPM相关（非原子级）

获取参数信息

API：context.$bp.loadVariables()

入参：无。

出参：参数对象。

示例：

context.$bp.loadVariables().then(function (data) {
    context.$model.ref("loanRequestData").setData(data.result.LoanRequestData);
    context.$model.ref("statusUpdates").setData(data.result.Status);
    context.$model.ref("negotiateCount").setData(data.result.NegotiateCount);
});

设置BPM中的变量
 API：context.$bp.putVariables (variables:object, instId: string)

入参：“variables”为参数对象，必选；“instId”为实例ID，可选。

出参：执行结果。

示例：
```
context.$bp.putVariables({
  LoanRequest: "test"
});
```
数据提交到BPM
API：context.$bp.submitTask (variables:object)

入参：“variables”为参数对象，必选。

出参：无。

示例：
```
var data = context.$model.ref("loanRequestData").getData();
context.$bp.submitTask({
  LoanRequest: data
});
```

BPM相关（原子级）

context.$bp和context.$bpm的区别在于后者保证了操作的原子性。例如，调用context.$bp.submitTask (variables:object)数据提交成功时，会有弹框提示且点击“确定”按钮会自动关闭当前页面。而调用context.$bpm.submitTask (variables:object)提交时，只会提交任务而不会有后续的弹框提示等操作；并且当不在BPM上下文环境中提交任务时（即当BPM实例没有运行时提交任务），会有相关提示信息。

推荐使用context.$bpm。

获取参数信息

API：context.$bpm.loadVariables()

入参：无。

出参：参数对象。

示例：

context.$bpm.loadVariables().then(function (data) {
    context.$model.ref("loanRequestData").setData(data.result.LoanRequestData);
    context.$model.ref("statusUpdates").setData(data.result.Status);
    context.$model.ref("negotiateCount").setData(data.result.NegotiateCount);
});

设置BPM中的变量
 API：context.$bpm.putVariables (variables:object, instId: string)

入参：“variables”为参数对象，必选；“instId”为实例ID，可选。

出参：执行结果。

示例：
```
context.$bpm.putVariables({
  LoanRequest: "test"
});
```
数据提交到BPM
API：context.$bpm.submitTask (variables:object)

入参：“variables”为参数对象，必选。

出参：无。

示例：
```
var data = context.$model.ref("loanRequestData").getData();
context.$bpm.submitTask({
  LoanRequest: data
});
```

公共API

获取csrf token

API：context.$utils.getCSRFToken()

其他

启动定时任务

API：context.timerTask(_timerHandler, _timeout, _executionCondition);

入参：分别是定时执行的业务逻辑、任务时间间隔、执行条件。

示例：

// 任务间隔时间，毫秒
var _timeout = 1000;

// 定时执行业务逻辑
var _timerHandler = function() {
    // TODO: Your business logic 
};

// 执行条件
var _executionCondition = function() {
    return true;
};
// 启动定时任务
context.timerTask(_timerHandler, _timeout, _executionCondition);

下载EDM上存储的文档，EDM是系统预置的EDM类型存储器。

API：context.$edm.download()

示例：

// 下载文档
context.$edm.download(' {{docId}} ', ' {{docType}} ', ' {{subClassName}} ', ' {{docVersion}} ', function() {
	// 下载失败回调方法
});

预览EDM上存储的文档，EDM是系统预置的EDM类型存储器。

API：context.$edm.preview()

示例：

// 预览文档
context.$edm.preview(' {{hw_doc_id}} ', ' {{hw_doc_version}} ', ' {{docFormat}} ', function() {
	// 预览后回调方法
}, ' {{container}} ', function() {
	// 预览失败回调方法
});

拦截请求

API：

// 提供三个参数，url：指定的URL；successFun：请求成功回调方法；failFun：请求失败回调方法。
// 根据需要填写，例：若不需要successFun可不提供。例如：{url:'', failFun:function(err){ }} 
context.filter({
    url: '',
    successFun: function (response) {
        // TODO: Your business logic
    },
    failFun: function (error) {
        // TODO: Your business logic
    }
});

获取当前语言下的国际化信息。
API：context.$t(name: string)

入参：“name”为多语言条目的唯一名称，必选。

出参：当前语言的值。

示例：
```
context.$t("app1.button.label")
```

模型相关

获取data model= model_1实例的数据
 API：$model.ref("model_1").getData()
设置data model= model_1实例的数据，入参data和model_1定义结构一致，当改变整个模型数据时使用。
API：$model.ref("model_1").setData(data)
设置data model= model_1实例的字段值，只改变已有模型数据某个字段值时使用。
API：$model.ref("model_1").setValue(field, value)

父主题： 主要事件说明

上一篇：事件编排器说明

下一篇：页面级常见操作

文档是否有解决您的问题？

提交成功！非常感谢您的反馈，我们会继续努力做到更好！

反馈提交失败，请稍后再试！

如您有其它疑问，您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问