Preset APIs of the Studio Object

registerWidget

You must register a widget in {widget}.editor.js. The usage is as follows:

/* @param {string} widgetName
 * @param {string} description
 */
Studio.registerWidget("widgetVueTemplate", "The widget template showing how to use the Vue library", params);

registerConnector

The connector must be registered in connector.js. The method is as follows:

/* @param {string} connectorID
 * @param {string} connectorName
 * @param {string} description
 * @param {obj} connector
 * @param {obj} model
 */
Studio.registerConnector("BridgeBasicTemplate", "BridgeBasicTemplate", "The bridge template showing how to use a bridge", BridgeBasicTemplate, BridgeBasicTemplateModel);

If the preset bridge cannot meet the requirements, you can customize a bridge. For details about the rules of parameter objects such as connector and model, see Custom Bridges.

registerEvents

Generally, this API is used to register events during widget initialization. Only events registered using this API are displayed in the widget event list. Only registered events can be triggered by triggerEvent. The usage is as follows:

/* @param {obj} widgetInst Widget object
* @param {string} eventName Event name
 * @param {string/{langKey:string}} eventDescription Event description
 */
Studio.registerEvents(this, "selectItem", {
  zh_CN: "Choose Select item",
  en_US: "Choose Select item",
});

In the preceding information, Event description (the third parameter) can be set to a string or a multi-language object.

registerAction

Generally, this API is used to register actions during widget initialization. Only actions registered using this API are displayed in the widget action list. The usage is as follows:

/* @param {obj} widgetInst widget instance
 * @param {string} actionName Action name
 * @param {string/{langKey:string}} actionDescription Action description
 * @param {array} params Parameter array object input when the event is triggered
 * @param {*} receiveActionCbk Callback function of the action. The execution logic of the action is defined in the callback function.
 */
Studio.registerAction(
  this,
  "setSelectedItem",
  { zh_CN: "Set Selected item", en_US: "Set Selected item" },
  [{ name: "itemVal"}], 
  this.setSelectVal.bind(this)
);

The implementation of setSelectVal is as follows:

/**
 * Respond to the interaction between external widgets and set the value selected from the drop-down list box.
 * @param {*} event
 */
setSelectVal(event) {
  this.readerVm.$set(this.readerVm.selectConf, "selectValue", event.itemVal);
},

When configuring an action, you can set itemVal to ${e.xxx} on the Huawei Cloud Astro Canvas delivery page to copy the xxx parameter thrown by the event to itemVal. Then, the select widget obtains data from itemVal. The internal processing API of the select widget is similar to the preceding code.

inReader

This API is used to check whether the current page is in the development or preview state. The method is as follows:

if (!Studio.inReader) { // true indicates that the page is in the preview state (running state), and false indicates that the page is in the development state.
   //todo
} 

The logic related to the editing state in the widget, such as editVm, needs to be executed only when the widget is not in the running state.