Built-in APIs

init

Widget initialization entry API. The SelectWidgetTemplate widget is used as an example to initialize the common capabilities of the widget, and register widget events and actions. The main logic suggestions are as follows:

  init() {
    this._super.apply(this, arguments); // Construct widget common capabilities. Mandatory when the parent class constructor is called.
    this.render(); // Render the widget.
    this.registerWidgetActionAndEvent(); // Register widget events and actions.
  },

render

Widget core rendering API, which is used to instantiate widgets, invoke data, and implement events and actions. The main logic suggestions are as follows:

   render() {
    var thisObj = this;
    var widgetProperties = thisObj.getProperties(); // Obtain widget attributes.
    var elem = thisObj.getContainer(); // Obtain the widget dom, which is reserved for the logic of the subsequent operation dom.
    var items = thisObj.getItems();
    var connectorProperties = thisObj.getConnectorProperties(); // Obtain the widget connector data.

    // Listen to the resize event. When the canvas is resized, the canvas needs to be redrawn. If there are other requirements, the parameters can be transferred to a function, which will be called during resize.
    this.registerResizeEvent();
  },

getConnectorProperties

This API is used to obtain connector attributes. There is no input parameter. The usage is as follows:

const connProps = this.getConnectorProperties(); 

The connProps object contains the information about all data sources connected to the widget.

Figure 1 Data source information

getConnectorInstanceByName

Use the connector name to obtain the connector instance, and then use the process method to call the API to obtain data. The usage is as follows:

const connectorInst = thisObj.getConnectorInstanceByName('selectDataConnector');

/**
 * @param renderCbk Callback upon success
 * @param errCbk Callback upon failure
 */
connectorInst.process(renderCbk, errCbk)

In the preceding information, connectorInst is used to call the data source API.

getProperties

This API is used to obtain the configuration attributes of a widget. Generally, this API is used after being integrated with the default attributes. There is no input parameter. The usage is as follows:

var widgetProperties = thisObj.getProperties(); 

getContainer

Generally, this API is used to obtain the widget dom in the initialization phase. There is no input parameter. The usage is as follows:

var elem = thisObj.getContainer(); 
var readerVm = new Vue({
    el:$("#select", elem)[0],
    }),

getContainer is the parent container of a widget on a page and has a unique identifier. The parent container must be added to the scenario where the dom is operated in the widget, as shown in the preceding code.

getWidgetBasePath

This API is used to obtain the root path of the widget static resource, which is used to combine other static resources in the widget. There is no input parameter. The usage is as follows:

var widgetBasePath = thisObj.getWidgetBasePath();

getMessages

Generally, this API is used to obtain the internationalization file content defined in the widget internationalization configuration file in the initialization phase. You are advised to configure vue and vueI18n. There is no input parameter. The usage is as follows:

const i18n = HttpUtils.getI18n({
    locale: HttpUtils.getLocale(),
    messages: thisObj.getMessages() 
});

getMessages() returns the internationalization content defined in the messages-en.json and messages-zh.json internationalization files.

hideWidget

This API is used to hide a widget. There is no input parameter. The usage is as follows:

this.hideWidget()

showWidget

This API is used to display a widget. There is no input parameter. The usage is as follows:

this.showWidget()

triggerEvent

This API is used to trigger an event in a widget and throw data. For details about event registration, see Studio.registerEvents. The triggering mode is as follows:

/*@param {String} eventName
* @param {obj} dataObj
*/
widgetInst.triggerEvent(eventName, dataObj);

registerResizeEvent

This API is used to listen to the dom size change and trigger the widget to be redrawn. The usage is as follows:

 /**
   * Listens to the dom size change and triggers widget re-drawing.
   * @param resizeFunc Callback function to be triggered when the page is resized. This parameter is optional.
   */
  this.registerResizeEvent(
    () => this.readerVm?.echartInst?.resize(), // Triggers the resize of echartInst when the page is resized.
  );

callFlowConn

This API is used to listen the necessary dom size change events. The usage is as follows:

 /**
   * Obtains data based on the data type (dataset, bridge, data source, or static data) configured for the widget. If the data type is not configured, getMockData is called by default.
   * @param {*} connector Connector Instance
   * @param {*} param Parameter. If there is no special requirement, {} can be directly transferred. If {test: 1} is transferred, the request body contains the value of test when the request is initiated.
   * @param {*} callbackFunc  Transfer data to the callback function.
   */
  this.callFlowConn(this.connectorIns, param, this.dealRespData.bind(this));

beforeDestroy

Widget destroy and callback, which is used to implement the memory release logic during widget destroy. Some dom events bound to the widget and global references need to be destroyed. No input parameter is required. The usage is as follows:

beforeDestroy() {
    $(window).off("resize");
    this.vm && this.vm.$destroy && this.vm.$destroy();
},