标准页面中预置的API
在开发标准页面时，可以通过编写JS代码，来实现页面组件与后台接口之间的交互。如图1所示，在编写JS代码时，可直接使用系统预置的API。
context ├──$app // 当前app信息 ├──$user // 当前用户信息 ├──$page // 页面相关操作 ├──$component // 组件相关操作 ├──$model // 数据模型相关操作 ├──$message // 提示消息 └──$dialog // 对话框 └──$bp // BPM相关操作 └──$bpm // BPM相关操作，推荐使用该API，原子级操作 └──$params // 获取组件事件的入参
下面按照分类介绍标准页面中预置API。
组件类
- 获取当前组件
- 根据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)
- 获取组件绑定的模型
_component为当前操作的组件。
示例如下：
let _component = context.$component.current let _model = _component.getDataModel()
消息及弹框
消息及弹框的默认显示时间为5秒，可以通过传入第二个参数duration，来自定义显示时间。
例如，自定义提示成功消息时间为8秒，执行语句如下：
API：context.$message.success(message: string, duration: 8)
- 提示成功消息
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可显示按钮。
页面类
- 获取当前页面
- 当前页面绑定的数据模型
- 页面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.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)
- 关闭当前页面
图2 关闭页面语句
表单类
- 获取当前表单
如果当前组件为表单，则直接返回。否则，根据组件上下文向上查找最近的表单组件。
- 根据组件Key值获取表单
API：context.getFormByKey(_formKey: number)
入参：表单组件的Key值，类型为number。
- 校验整个表单
- 表单的单字段校验：
API：_form.validateField(prop, callback)
参数prop为需校验的属性，参数callback为检验完回调函数，返回错误信息。
示例：
_form.validateField("name",function(errorMsg){ console.log("validate field", errorMsg) }); - 表单重置
_form为已获取的表单组件。
- 表单提交
_form为已获取的表单组件。API内部实现已先进行表单校验，校验成功后进行提交保存操作。
表格类
- 获取当前表格
如果当前组件为表格，则直接返回。如果当前组件有关联的表格，则返回对应的表格（如表格查询条件、分页等）。否则，根据组件上下文向上查找最近的表格组件。
- 获取查询条件
_table为已获取的表格组件，返回表格绑定的查询条件。
- 设置查询条件
// 先获取条件，再进行赋值 var condition = _table.getCondition(); // 字段满足单个条件，默认操作是contains condition.queryInfo = { "fieldName": "1" } // 字段满足单个条件，使用自定义操作 condition.queryInfo = { "fieldName": { operator: "contains", value: "1" } } // 字段满足多个条件 condition.queryInfo = { "fieldName": [{ operator: "contains", value: "1" }, { operator: "contains", value: "2" }] } // 分页条件 condition.pageInfo: { "pageSize": 10, "curPage": 1 }其中，“_table”为已获取的表格组件。
入参：表格查询条件。
- 执行查询
其中，“_table”为已获取的表格组件。
- 初始化行数据
其中，“_table”为已获取的表格组件，初始化一条新的行数据，此方法执行后，数据并未添加到表格。
- 添加行数据
API：_table.addrow(newRowData: object)
其中，“_table”为已获取的表格组件，此方法将初始化好的行数据添加到表格，此方法执行后，数据仅在前端表格保存，并未持久化到后端。
入参：行数据。
- 获取表格当前选中的行数据
其中，“_table”为已获取的表格组件。
- 删除表格行数据
API：_table.doDelete(rows: array)
其中，“_table”为已获取的表格组件。
入参：表格行数据列表。
示例：
// 当前表格 let _table = context.$component.table // 获取当前选中的行 let rows = _table.getSelectedData() // 删除选中行 _table.doDelete(rows)
- 获取表格修改的数据（新增、修改、删除）
其中，“_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") - 查询对象所有数据
_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 }) - 统计满足条件的对象数据数量
其中，“_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 }) - 查询满足条件数据， 且只查询部分字段， 支持分页和排序
- 通用对象数据查询
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.deleteByID(_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
入参：无。
出参：Promise。
示例：
// 初始化脚本 let _script = context.script('{{ scriptName }}') // 运行脚本 _script.run().then(function(response) { // TODO: Your business logic })
服务编排相关
- 初始化Flow
入参：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
入参：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 });
- 获取BPM实例中的所有变量和变量值
API：context.$bpm.getVarsByInstanceId("instance_id")
入参：“instance_id”为BPM实例的ID。
出参：BPM实例中的所有变量和变量值。
示例：
context.$bpm.getVarsByInstanceId("instance_id").then(function (resp) { // 回调逻辑 }); - 获取一个BPM实例数据
API：context.$bpm.getBPinstance("instance_id")
入参：“instance_id”为BPM实例的ID。
出参：BPM实例数据。
示例：
context.$bpm.getBPinstance("instance_id").then(function (resp) { // 回调逻辑 });
公共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类型存储器。
示例：
// 下载文档 context.$edm.download(' {{docId}} ', ' {{docType}} ', ' {{subClassName}} ', ' {{docVersion}} ', function() { // 下载失败回调方法 }); - 预览EDM上存储的文档，EDM是系统预置的EDM类型存储器。
示例：
// 预览文档 context.$edm.preview(' {{hw_doc_id}} ', ' {{hw_doc_version}} ', ' {{docFormat}} ', function() { // 预览后回调方法 }, ' {{container}} ', function() { // 预览失败回调方法 }); - 拦截请求
// 提供三个参数，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 } }); - 获取当前语言下的国际化信息。
入参：“name”为多语言条目的唯一名称，必选。
出参：当前语言的值。
示例：
context.$t("app1.button.label") - 获取入参
有些组件开放的事件是有入参的，在事件自定义代码中可以通过“context.$params”获取入参。context.$params值为数组，对应事件的多个入参。查看入参定义的方法是：请在标准页面设计界面左侧组件区域，将鼠标悬浮在组件上，组件右上会出现问号图标，单击该图标会出现该组件的使用说明，说明中包含事件入参定义。
图3 查看组件说明
举例如下：
模型相关
Tab页相关
仅支持平台的运行态使用，可使用portal框架暴露的API来实现，平台运行态会暴露一个 bingo 全局变量供使用，标准页面由于在 iframe 内，需要使用 window.parent.bingo 访问：
