Preset APIs on Standard Pages

Component Class

• Obtain the current component.

  context.$component.current

• Obtain the component based on the key.

  API: context.$component.get(_compKey: number)

  Input parameter: component key of the number type.

  Output parameter: Component

  Example:

  let _compKey = 1546395654403000
  let _component = context.$component.get(_compKey)
• Obtain the component based on the name.

  API: context.$component.get(_compName: string)

  Example:

  let _compName = 'input_1'
  let _component = context.$component.get(_compName)
• Obtain the model bound to the component.

  API: _component.getDataModel()

  In the preceding information, _component indicates the current component.

  Example:

  let _component = context.$component.current
  let _model = _component.getDataModel()

Message and Dialog Box

NOTE:

The default display duration of messages and dialog boxes is 5 seconds. You can transfer the second parameter duration to define the display duration.

For example, to set the interval for displaying a success message to 8 seconds, run the following statement:

API: context.$message.success(message: string, duration: 8)

• Success message

  API: context.$message.success(message: string)

  Example:

  // Success message. 
  context.$message.success('Successfully')
• Failure message

  API: context.$message.error(message: string)

  Example:

  // Failure message. 
  context.$message.error('Failed')
• Common message dialog box

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

  Input parameter: option indicates parameters about the dialog box. The structure is as follows:

  {
  title: string,      // Title.
  content: string,    // Content.
  okText:string,     // Confirm button name, which is optional.
  onOk: function      // Confirmation callback function, which is optional.
  }

  Example:

  // Common pop-up message. 
  context.$dialog.info({ title: 'Info', content: 'content', okText: 'ok', onOk: () => {alert('click ok')}})
• Confirmation message dialog box

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

  Input parameter: option indicates parameters about the dialog box. The structure is as follows:

  {
  title: string,      // Title. 
  content: string,    // Content.
  okText:string,     // Confirm button name, which is optional.
  cancelText:string, // Cancel button name, which is optional. 
  onOk: function,     // Confirmation callback function, which is optional.
  onCancel: function  // Cancellation callback function, which is optional. 
  }

  Example:

  // Confirm the displayed message. 
  context.$dialog.confirm({ title: 'Confirm', content: 'content', okText: 'ok', cancelText: 'cancel', onOk: () => {alert('click ok')}, onCancel: () => {alert('click cancel')}})
• Success message dialog box

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

  Input parameter: option indicates parameters about the dialog box. The structure is as follows:

  {
  title: string,      // Title. 
  content: string,    // Content.
  okText:string,     // Confirm button name, which is optional.
  onOk: function      // Confirmation callback function, which is optional.
  }

  Example:

  // Displayed success message.
  context.$dialog.success({ title: 'Info', content: 'content', okText: 'ok', onOk: () => {alert('click ok')}})
• Error message dialog box

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

  Input parameter: option indicates parameters about the dialog box. The structure is as follows:

  {
  title: string,      // Title. 
  content: string,    // Content.
  okText:string,     // Confirm button name, which is optional.
  onOk: function      // Confirmation callback function, which is optional.
  }

  Example:

  // Displayed error message.
  context.$dialog.error({ title: 'Error', content: 'content', okText: 'ok', onOk: () => {alert('click ok')}})
• Pop-up page

  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')}})

  Input parameter: option indicates parameters about the dialog box. The structure is as follows:

  {
  title: string,      // Title. 
  Page: string // Name of the page that is displayed.
   width:integer       // Page width. If the value is less than 100, the value is a percentage. If the value is greater than 100, the value is a pixel.
  height:integer // Page height.
  okText:string,     // Confirm button name, which is optional.
   params:object      // Page parameters.
  onCancel: function  // Cancellation callback function, which is optional.
  onOk: function      // Confirmation callback function, which is optional.
  maskClosable: boolean //Whether to allow users to click the mask layer to close it. The default value is true.
  footerHide: boolean//Indicates whether to hide the button (OK or Cancel) area. The default value is false.
  loading: boolean //Whether to display the loading state when the OK button is clicked. If the loading state is displayed, you need to manually set visible in onOk to close the dialog box.
  draggable: boolean //Indicates whether the image can be dragged. The default value is false.
  showCancel: boolean //Indicates whether to display the Cancel button. The default value is true.
  okFirst: boolean //Indicates whether the OK button is before the Cancel button. The default value is false.
  }

  loading: whether to display the loading state of the OK button. The default value is false, indicating that the loading state is not displayed. If the value is true, the loading state is displayed. You need to use visible in onOk to close the dialog box.

  footerHide: whether to display the buttons in the dialog box. The default value is false, indicating that the buttons are not displayed. The value true indicates that the buttons are displayed.

Page

• Obtain the current page.

  API: context.$page.current

• Obtain the data model bound to the current page.

  API: context.$page.getModel()

• Obtain the page URL parameters.

  API: context.$page.params.paramName

  Example:

  // Assume that the current page URL is https://localhost:8080/besBaas/page#/std_1?a=1&b=2. The method of obtaining URL parameters is as follows:
  let paramA = context.$page.params.a
  let paramB = context.$page.params.b
• Open a page on a new tab.

  API: context.$page.open(url: string, queryString: string)

  Input parameters: url: page URL; queryString: query parameters (URL parameters). The parameters are in key=value format. Multiple parameters are separated by ampersands (&).

  Example:

  context.$page.open('https://localhost:8080/besBaas/page#/std_2', 'a=1&b=2')
• Open a page on the current tab.

  API: context.$page.load(url: string, queryString: string)

• Refresh the current page.

  API: context.$page.reload()

• Open a standard page on a new tab.

  API: context.$page.openStdPage(pageName: string, queryString: string)

  Input parameters: pageName: page name; queryString: query parameters (URL parameters). The parameters are in key=value format. Multiple parameters are separated by ampersands (&).

  Example:

  context.$page.openStdPage('std_2', 'a=1&b=2')
• Open a standard page on the current tab.

  API: context.$page.loadStdPage(pageName: string, queryString: string)

• Open an advanced page on a new tab.

  API: context.$page.openAdvPage(pageName: string, websiteName:string, queryString: string)

  Input parameters: pageName: page name; websiteName: site name of the advanced page; queryString: query parameters (URL parameters). The parameters are in key=value format. Multiple parameters are separated by ampersands (&).

• Open an advanced page on the current tab.

  API: context.$page loadAdvPage (pageName: string, websiteName:string, queryString: string)

• Close the current page.

  API: window.close()

Form

• Obtain the current form.

  API: context.$component.form

  If the current component is a form, the form is directly returned. Otherwise, the nearest form is searched for in up search mode based on the context.

• Obtain the form based on the key.

  API: context.getFormByKey(_formKey: number)

  Input parameter: key value of the form. The type is number.

• Verify the entire form.
  • API: _form.formValidate()

    _form indicates the obtained form widget. promise is returned.

  • API: _form. formValidateUnPromise

    If the returned value is not promise, true or false is returned.

• Verify a single field in a form.

  API: _form.validateField(prop, callback)

  The prop parameter indicates the attribute to be verified. The callback parameter indicates the callback function is invoked to return error information after verification.

  Example:

  _form.validateField("name",function(errorMsg){
       console.log("validate field", errorMsg)
   });
• Reset a form.

  API: _form.resetFields()

  In the preceding information, _form indicates the obtained form.

• Submit a form.

  API: _form.formSave()

  In the preceding information, _form indicates the obtained form. The API internal implementation has verified the form. After the verification is successful, the form is submitted and saved.

Table

• Obtain the current table.

  API: context.$component.table

  If the current component is a table, the table is directly returned. If the current component is associated with a table, the corresponding table (such as table query conditions and paging) is returned. Otherwise, the nearest table is searched for in up search mode based on the context.

• Obtain query conditions.

  API: _table.getCondition()

  In the preceding information, _table indicates the obtained table. The query condition bound to the table is returned.

• Setting search criteria

  API:

  // Obtain the condition and then assign a value.
  
  var condition = _table.getCondition();
  // If a field meets a single condition, the default operation is contains.
  condition.queryInfo = {
  	"fieldName": "1"
  }
  // If a field meets a single condition, use a customized operation.
  condition.queryInfo = {
  	"fieldName": {
  		operator: "contains",
  		value: "1"
  	}
  }
  // The field meets multiple conditions.
  condition.queryInfo = {
  	"fieldName": [{
  		operator: "contains",
  		value: "1"
  	},
  	{
  		operator: "contains",
  		value: "2"
  	}]
  }
  // Pagination condition.
  condition.pageInfo: {
  	"pageSize": 10,
  	"curPage": 1
  }

  In the preceding information, _table indicates the obtained table.

  Input parameter: query condition of a table.

• Executing a Query

  API: _table.doQuery()

  In the preceding information, _table indicates the obtained table.

• Initialize row data.

  API: _table.rowInit()

  In the preceding information, _table indicates the obtained table. After a new row data record is initialized, data is not added to the table.

• Add a row data record.

  API: _table.addrow(newRowData: object)

  In the preceding information, _table indicates the obtained table. This method adds the initialized row data to the table. The data is stored in the frontend table, but is not persisted to the backend.

  Input parameter: row data.

• Obtain the currently selected row data record of a table.

  API: _table.getSelectedData()

  In the preceding information, _table indicates the obtained table.

• Delete table row data.

  API: _table.doDelete(rows: array)

  In the preceding information, _table indicates the obtained table.

  Input parameter: table row data list.

  Example:

  // Current table.
  let _table = context.$component.table
  // Obtain the selected row.
  let rows = _table.getSelectedData()
  // Delete the selected row.
  _table.doDelete(rows)
• Obtain the modified table data (such as added, modified, and deleted records).

  API: _table.getOperatedData()

  In the preceding information, _table indicates the obtained table.

• Save table data.

  API: _table.doSave(operatedData: object)

  In the preceding information, _table indicates the obtained table. This method persists the modification of the current table.

  Input parameter: modified table data.

  Example:

  // Current table.
  let _table = context.$component.table
  // Obtain the modified data.
  let operatedData = _table.getOperatedData()
  // Submit table modification.
  _table.doSave(operatedData)

Object Operation

• Obtaining an object

  API: context.object(objectName)

  Input parameter: objectName, which indicates the object name.

  Output parameter: object.

  Example:

  let _object = context.object("objectName")
• Query all data of an object.

  API:

  _object.query().then(function (response) {
      // TODO: Your business logic
  })
• Query data that meets conditions.

  For example, to query the object data that meets the condition name = 'test', the code is as follows:

  let _condition = {conjunction: 'AND', conditions: [{ field: 'name', operator: 'eq', value: 'test' }] }
  _object.query({condition:_condition}).then(function (response) {
      // TODO: Your business logic
  })
• Collect statistics on the number of object data records that meet conditions.

  API: _object.count(_condition)

  _object indicates the object name.

  Input parameters: _condition indicates query conditions. This parameter is optional.

  Output parameter: Promise

  Example:

  // Collect statistics on all data.
  _object.count().then(function (response) {
      // TODO: Your business logic
  })
  
  // Collect statistics on data that meets conditions.
  _object.count(_condition).then(function (response) {
      // TODO: Your business logic
  })
• Query the data that meets the conditions, and query only some fields.

  let _fields = 'id,name'
  _object.query({condition:_condition}, _fields).then(function (response) {
      // TODO: Your business logic
  })
• Query data that meets conditions and query only some fields. Pagination and sorting are supported.
  For example, records are sorted in descending order based on the name field and displayed in pages. A maximum of 10 records can be displayed on each page. Example code:

  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
  })
• Query common object data.

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

  Input parameters: _condition indicates query conditions. This parameter is optional. An example is as follows:

  { 
      conjunction: 'AND',    // Condition connector such as AND or OR.
      conditions: [
          { 
              field: 'name', // Condition field.
              operator: 'eq',// Condition comparison operator.
              value: 'test'  // Condition value.
          },
          {
  condition: {   // Embedded condition.
                  conjunction: 'OR',
                  conditions: [
                      {
                          field: 'status',
                          operator: 'eq',
                          value: '1'
                      },
                      {
                          field: 'status',
                          operator: 'eq',
                          value: '2'
                      }                
                  ]
              }
          }
      ]
  }

  The content in the preceding example is as follows: name = 'test' && ( status = '1' || status = '2')

  Fields: Query fields (only specified fields are returned). Multiple fields are separated by commas (,). The query fields are optional.

  Output parameter: Promise

• Insert object data. Batch operations are supported.

  API: _object.insert(data: Object[])

  Input parameter: data to be inserted, which is an object array.

  Output parameter: Promise. The ID of the newly inserted data record is returned.

  Example:

  let data = [{ name: 'test', label: 'test' }]
  _object.insert(data).then(function (response){
      if (response && '0' === response.resCode) {
          let _id = response.result[0].id}})
• Update object data based on the record ID.

  API: _object.updateByID(_id: string, data: Object)

  Input parameters: id indicates the record ID. data indicates the object update content.

  Output parameter: Promise

  Example:

  let _id = '{{ id }}'
  // Update data based on the record ID.
  _object.updateByID(_id, { label: 'test2' }).then(function (response) {
      // TODO: Your business logic
  })
• Query object data based on the record ID.

  API: _object.queryByID(_id: string)

  Input parameter: id indicates the record ID.

  Output parameter: Promise

  Example:

  let _id = '{{ id }}'
  // Query a single record based on the record ID.
  _object.queryByID(_id).then(function (response) {
      // TODO: Your business logic
  })
• Delete object data based on the record ID.

  API: _object.deleteByID(_id: string)

  Input parameter: id indicates the ID of an object record.

  Output parameter: Promise

  Example:

  let _id = '{{ id }}'
  // Delete data based on the record ID.
  _object.deleteByID(_id).then(function (response) {
      // TODO: Your business logic
  })
• Query object data in batches based on record IDs.

  API: _object.batchQueryByIDs(_ids: string, fields: string)

  Input parameter: ids indicate record IDs separated by commas (,). fields: Query fields. Multiple fields are separated by commas (,). The query fields are optional.

  Output parameter: Promise

  Example:

  _object.batchQueryByIDs('id1,id2,id3').then(function (response) {
      // TODO: Your business logic
  })
• Delete object data in batches based on record IDs.

  API: _object.batchDeleteByIDs(_ids: string)

  Input parameter: ids indicate record IDs separated by commas (,).

  Output parameter: Promise

  Example:

  _object.batchDeleteByIDs('id1,id2,id3').then(function (response) {
      // TODO: Your business logic
  })
• Insert or update object data in batches.

  API: _object.batchUpsert(data: Object[])

  Input parameters: data, which is the data object to be inserted or updated. When the input parameters contain id, the data is updated.

  Output parameter: Promise

  Example:

  let data = [{id: '1538033158273005', label: 'test'}, {name: 'test', label: 'test'}]
  
  _object.batchUpsert(data).then(function (response) {
      // TODO: Your business logic
  })

Script operation

• Initialize a script.

  API: context.script(scriptName)

  Input parameter: scriptName indicates the name of a script.

  Output parameter: Script

  Example:

  // Initialize a script. 
  let _script = context.script('{{ scriptName }}')
• Execute a script.

  API: _script.run()

  Input parameter: None

  Output parameter: Promise

  Example:

  // Initialize a script. 
  let _script = context.script('{{ scriptName }}')
  
  // Execute the script.
  _script.run().then(function(response) {
      // TODO: Your business logic
  })

Operations related to service orchestration

• Initialize a flow.

  API: context.flow(flowName)

  Input parameter: flowName indicates the name of a flow.

  Output parameter: Flow

  Example:

  // Initialize a flow.
  let _flow = context.flow("flowName")
• Configure the flow version number.

  API: _flow.version(version: string)

  Input parameter: version indicates the version number of a flow.

  Output parameter: Flow

  Example:

  // Configure the flow version number.
  _flow.version("0.0.1")
• Execute a flow.

  API: flow.run(params: Object)

  Input parameter: params. An example is as follows:

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

  Output parameter: Promise

  Example:

  // This is applicable to one-time invoking of a flow.
  // Execute the flow.
  _flow.run({ param1: 'param1' }).then(function (res) {
      // TODO: Your business logic
  })
• Start a flow.

  API: _flow.start(params: Object)

  Input parameter: params. An example is as follows:

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

  Output parameter: Promise

  Example:

  // The following is applicable to multi-step operation scenarios.
  _flow.start({ param1: 'param1' }).then(function (res) {
      // TODO: Your business logic
  })
• Go to the next step of the flow.

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

  Input parameters: interviewID indicates the flow running instance ID. params indicates input parameters.

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

  Output parameter: Promise

  Example:

  // Go to the next step.
  _flow.next("{{ interviewID }}", { param1: 'param1' }).then(function (res) {
      // TODO: Your business logic
  })
• Return to the previous step of the flow.

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

  Input parameters: interviewID indicates the flow running instance ID. params indicates input parameters.

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

  Output parameter: Promise

  Example:

  // Return to the previous step.
  _flow.back("{{ interviewID }}", { param1: 'param1' }).then(function (res) {
      // TODO: Your business logic
  })
• Complete the flow normally.

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

  Input parameters: interviewID indicates the flow running instance ID. params indicates input parameters. An example is as follows:

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

  Output parameter: Promise

  Example:

  // Complete the flow.
  _flow.finish("{{ interviewID }}", { param1: 'param1' }).then(function (res) {
      // TODO: Your business logic
  })
• Restore a flow.

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

  Input parameters: interviewID indicates the flow running instance ID. params indicates input parameters. An example is as follows:

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

  Output parameter: Promise

  Example:

  // Restore a flow. 
  _flow.resume("{{ interviewID }}", { param1: 'param1' }).then(function (res) {
      // TODO: Your business logic
  })
• Delete a flow instance.

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

  Input parameters: interviewID indicates the flow running instance ID. params indicates input parameters. An example is as follows:

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

  Output parameter: Promise

  Example:

  // Delete a flow.
  _flow.terminate("{{ interviewID }}", { param1: 'param1', param2: { param21: 'param21', param22: 'param22' } }).then(function (res) {
      // TODO: Your business logic
  })

Service requests

Invoke a service API.

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

Input parameters: url indicates the URL of the service API. You can click Service in the app or BO view to view the URL of the encapsulated flow, script, or object operation API. _inputParams indicates input parameters.

Example:

var _inputParams = {};
// Call a microservice
context.service('{{ url }}').run(_inputParams).then(function(response) {
    // TODO: Your business logic
});

BPM-related operations (non-atomic-level)

• Obtaining parameter values

  API: context.$bp.loadVariables()

  Input parameter: None

  Output parameters: parameter object

  Example:

  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);
  });
• Set a variable in the BPM.

  API: context.$bp.putVariables (variables:object, instId: string)

  Input parameters: variables indicates the parameter object and is mandatory. instId indicates the instance ID and is optional.

  Output parameters: execution result

  Example:

  context.$bp.putVariables({
    LoanRequest: "test"
  });
• Submit data to the BPM.

  API: context.$bp.submitTask (variables:object)

  Input parameters: variables indicates the parameter object and is mandatory.

  Output parameters: none

  Example:

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

BPM-related operations (atomic-level)

The difference between context.$bp and context.$bpm is that context.$bp ensures the atomicity of operations. For example, when context.$bp.submitTask (variables:object) is invoked and data is successfully submitted, a dialog box is displayed. If you click OK, the current page is automatically closed. When context.$bpm.submitTask (variables:object) is invoked to submit data, only the task is submitted, and no dialog box is displayed. If the task is not submitted in the BPM context (that is, the task is submitted when the BPM instance is not running), a message is displayed. context.$bpm is recommended.

• Obtaining parameter values

  API: context.$bpm.loadVariables()

  Input parameter: None

  Output parameters: parameter object

  Example:

  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);
  });
• Set a variable in the BPM.

  API: context.$bpm.putVariables (variables:object, instId: string)

  Input parameters: variables indicates the parameter object and is mandatory. instId indicates the instance ID and is optional.

  Output parameters: execution result

  Example:

  context.$bpm.putVariables({
    LoanRequest: "test"
  });
• Submit data to the BPM.

  API: context.$bpm.submitTask (variables:object)

  Input parameters: variables indicates the parameter object and is mandatory.

  Output parameters: none

  Example:

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

Common API

Obtain the CSRF token.

API: context.$utils.getCSRFToken()

Other

• Start a Cron job

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

  Input parameters: service logic, task interval, and execution condition for scheduled task execution

  Example:

  // Task interval, in milliseconds.
  var _timeout = 1000;
  
  // Logic of executing the service periodically.
  var _timerHandler = function() {
      // TODO: Your business logic 
  };
  
  // Execution condition
  var _executionCondition = function() {
      return true;
  };
  // Start the scheduled task.
  context.timerTask(_timerHandler, _timeout, _executionCondition);

Operations on models

• Obtain the data of the data model= model_1 instance.

  API: $model.ref("model_1").getData()

• Set the data of the instance whose data model is model_1. The structure of the input parameter data is the same as that of model_1. This method is used when the entire model data is changed.

  API: $model.ref("model_1").setData(data)

• Set the field value of the instance whose data model is model_1. This method is used when only a field value of the existing model data is changed.

  API: $model.ref("model_1").setValue(field, value)

Tab Page-related

This function can be used only in the runtime state of the platform and can be implemented using the API exposed by the portal framework. The runtime state of the platform exposes a bingo global variable for use. The standard page is in the iframe and needs to be accessed using window.parent.bingo.

• Open a tab page. The tab ID is returned.

  API: openTab(name, url)

• Switch to another tab page.

  API: switchTab(tabId)

• Close a specified tab page.

  API: removeTab(tabId)

• Current tab page.

  API: getCurrentTab()

• Default tab page.

  API: getDefaultTab()

• Open a specified tab.

  API: open({type:'Tab', id: tabId})

• Open a specified tab.

  API: openTabByMenuName(menuName)

• Return to the previous route.

  API: back()